Update for article “Chat-app creation using Vue.js, Nuxt.js, Node.js, Socket.IO, Vuetify.js technologies”

Overview of project changes

Hello everyone!

After the publication of this article (if you have not read it, I advise you to read it in order to understand more of what is being discussed in this article), enough time has passed, during which I added new functionality and refactored the previously written things.

I received many letters on various social networks asking to update the article to match the current codebase.

It’s great that many people liked the article and found something useful for themselves, so I found some free time to make an update. Let’s not waste any time, let’s get started!

List of added features:

• “typing status” functionality
• vue-socket.io actions and mutations prefix
• Websockets reconnection logic
• PWA mode
• Migration Vuetify.js from 1.x to 2.x
• ESlint
• Code refactoring (splitting components, adding constants, optimizing code, adding meta information, using single action to call websockets events from Vuex)

Now let’s look at some points in more detail.

Vue-socket.io actions and mutations prefix

plugins/socket.client.js

Vue-Socket.io is a socket.io integration for Vue.js, easy to use, supporting Vuex and component level socket consumer managements.

store/index.js

server/app.js

When you set store parameter in installation (in our case it is socket.client.js file),
vue-socket.io will start sending websocket events to Vuex store.
For example, from the server we send the “newMessage” event, and we receive it in the Vuex with the prefix specified in the settings, in our case “SOCKET_newMessage”.

If you want to listen socket events from component side, you need to add sockets object in Vue component, and every function will start to listen events, depends on object key. This was described in a previous version of the article.

Websockets reconnection logic

plugins/socket.client.js

There was a problem if the application was in sleep mode, then it was impossible to reconnect, it was necessary to restart the application.

To solve the problem, settings were added when initializing the connection.

More details with a complete list of all settings can be found here

PWA mode

Installed Progressive Web Apps run in a standalone window instead of a browser tab.
They’re launchable from on the user’s home screen, dock, taskbar, or shelf.
It’s possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they’re installed on.

First of all you have to add @nuxtjs/pwa dependency to your project:

npm install @nuxtjs/pwa

Next, in the nuxt.config.js file, you need to specify the configuration.

nuxt.config.js

• iconSrc — icon on your home screen
• short_name — the name on your home screen
• theme_color — background of your app

You can find more information about the configuration here

ESlint

You can install ESLint using:

npm install --save-dev eslint

You can configure the rules for your project according to your needs in the .eslintrc.js file:

.eslintrc.js

A list of all available rules can be found here.

Migration Vuetify.js from 1.x to 2.x

You can find a list of all the changes and differences in the official documentation.

What has been updated in the project:

• Replaced initializing Vuetify.js directly in nuxt.config.js by adding it as a plugin in plugins/vuetify.js
• Migrated to the new markup using this ESlint plugin, of course he couldn’t do absolutely everything (he helped a lot), so I fixed some mistakes myself.

This is all about the changes, the plans include adding new functionality, adding push notifications, the ability to visit several rooms at the same time, attaching files and much more.

Previous version of the article

Github

Demo

Thanks for your attention.
Feel free to ask me your questions on social media.
See you next time!