Based on nuxt JS + Vue chat instance | nuxt imitation wechat / probe chat interface

1. Project introduction

Nuxt.js is a popular server-side rendering SSR framework. With its better SEO, faster content arrival time (* fast first screen rendering *) and based on Vue JS technology development, easier to start, has won the favor of many technology developers.
nuxt_chatroom project It is an example of wechat like Tinder interface chat developed based on nuxt+vue+vuex+vant and other technologies. It realizes the functions of card flipping, message sending / expression gif, picture / video preview, red envelope / circle of friends and so on.

Effect fragment

Tut Tut, the effect is OK. Let's explain the implementation process.

2. Technical framework

  • Using technology: nuxt js+vue. js+vuex
  • UI component library: vant UI (vue.js component library of youzan mobile terminal)
  • Font Icon: Ali iconfont Icon Library
  • Pop up component: vpopup (user-defined pop-up frame based on vue)
  • Local storage: Cookie universal nuxt: ^ 2.1.4

If you're right about nuxt If you are not familiar with JS, you can go to the official website to see the information first. In fact, as long as you can vue, it's very easy to get started.

3. Project directory structure

Want to learn more about nuxt JS directory structure and instructions, you can refer to the following link.

4. About custom components

Navbar, Tabbar and pop-up window at the top of the project are implemented by user-defined components, which will not be explained here. If you are interested, you can take a look at the following sharing articles.

Nuxt/Vue salted fish Tabbar bulge effect | vue custom navigation bar
Vue custom pop-up components | imitation of android/ios pop-up effect

5. Flipping of imitation Tinder | probe card

The encounter page prototype refers to the card sliding effect explored by social App. The whole is divided into three parts: top navigation, sliding area and bottom label bar.

There is not much introduction here. If you are interested, you can see the following sharing article.
Vue|Nuxt.js imitation probe card type drag left and right | vue imitation Tinder

6. nuxt default layout

In the nuxt project, default. In the layouts directory Vue page is the default layout page.

<!-- Layout template -->
  <div class="nuxt__container flexbox flex-col">
    <header-bar />
    <div class="nuxt__scrollview scrolling flex1"><nuxt /></div>
    <tab-bar />

Note: in nuxt project, < nuxt / > is used to display the main content, while in vue, < router view / >.

nuxt.config.js configuration file
nuxt.js default configuration file, which can configure meta, routing information, css/js, plug-in introduction, webpack and other configurations.

export default {
  // Port configuration (optional)
  server: {
    port: 3000,
    host: ''
  ** Page header meta information configuration
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
      { hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt Imitation wechat'},
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' },
    script: [
      { src: '/js/fontSize.js' },
      { src: '/js/wcPop/wcPop.js' },
  ** Global css configuration
  css: [
  ** Global plug-in list
  plugins: [
    // You can also import local js in this way (you need to set ssr:false)
    // {src: '~/assets/js/fontSize.js', ssr: false}
  // ...

nuxt. config. The meta in JS is globally configured. If it is configured on a separate page, refer to the following:

export default {
    // Configure page meta information
    head() {
        return {
            title: 'Here is the title information - Title Information',
            meta: [
                {name:'keywords',hid: 'keywords',content: 'Keyword 1 | Keyword 2 | Keyword 3'},
                {name:'description',hid:'description',content: 'Description 1 | Description 2 | Description 3'}
    // Custom layout page
    layout: 'xxx.vue',
    // Middleware processing
    middleware: 'auth',
    // Asynchronous processing
    async asyncData({app, params, query, store}) {
        let uid = params.uid
        let cid = query.cid
        return {
            uid: uid,
            cid: cid,
    // ...

7. Nuxt chat module

At first, consider that the edit box of the chat module is implemented by input or textarea. However, only emoj characters (: 32: smile:) can be inserted into the text box, and emoj image expressions cannot be inserted, which is not the effect you want.

As shown in the figure above: therefore, the editable function contenteditable of div is used to insert graphic content.


After a series of processing, the editor supports multi line text input, emoj expression insertion at the cursor and other functions.

As shown in the following figure: in Vue How to get the first frame of the uploaded video as the cover image in JS project?

Many online solutions will make the screenshot black. Later, after repeated debugging, this effect was finally realized.

let file = this.$refs.chooseVideo.files[0]
if(!file) return
let size = Math.floor(file.size / 1024)
if(size > 3*1024) {
    alert('Please select 3 MB Video within')
    return false
// Get video address
let videoUrl
if(window.createObjectURL != undefined) {
    videoUrl = window.createObjectURL(file)
} else if (window.URL != undefined) {
    videoUrl = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
    videoUrl = window.webkitURL.createObjectURL(file)

let $video = document.createElement('video')
$video.src = videoUrl
// Prevent black screen or transparent white screen on the cover of mobile terminal
$video.muted = true
$video.addEventListener('timeupdate', () => {
    if($video.currentTime > .1) {

// Capture the first frame of the video as the cover
$video.addEventListener('loadeddata', function() {
    setTimeout(() => {
        var canvas = document.createElement('canvas')
        canvas.width = $video.videoWidth * .8
        canvas.height = $video.videoHeight * .8
        canvas.getContext('2d').drawImage($video, 0, 0, canvas.width, canvas.height)
        let videoThumb = canvas.toDataURL('image/png')
    }, 16);

If you are interested, you can try it yourself. If there are other good methods, welcome to exchange and discuss!

OK, based on nuxt JS imitation wechat chat room project is shared here. Hope to help you! ✍💪

Finally, an example of Flutter project is attached
flutter+dart chat room | flutter imitates wechat App chat interface | flutter chat example

Tags: Vue.js

Posted by richever on Wed, 11 May 2022 10:54:46 +0300