Nuxt + Web Workers, logout after idle (part 1)

Paramo — Fri, 22 May 2020 17:28:23 +0000

Para la versión en español ve a mi blog

In this post we are going to see how to logout a user after idle using Nuxt and Web Workers. I found out is a long process so im gonna keep it simple and well explained so everybody can follow along. Due to its extension I'm going to divide it into different sections.

In this section we are going to:

Install and configure everything needed to use web workers with Nuxt.
Code our very first worker
Execute our worker

I'm not going to explain what web workers are, but we are going to see how they work.

Are you ready? Here we go!

Installation and configuration

First we are going to install worker-loader this will help us to make webpack register our worker

Install with yarn:

yarn add worker-loader

Next we are goint to nuxt.config.js and add the following code over build

build: {
 extend (config, ctx) {
  if (ctx.isClient) {
   config.module.rules.push({
    test: /\.worker\.js$/,
    loader: 'worker-loader',
    exclude: /(node_modules)/
   })
  }
 }
}

With this we are telling webpack to get all the files with extension .worker.js and load them through worker-loader

All the files that serve as workers must have .worker.js extension*

Coding our very first worker

Let's add a new file under plugins directory (the name is up to you) and add the following.

import  SessionWorker  from  '~/assets/js/session.worker.js'

export  default (context, inject) => {
  inject('worker', {
   createWorker () {
   return  new  SessionWorker()
  }
 })
}

and then we register it in nuxt.config.js

plugins: [
 { src: '~/plugins/web-worker.js', ssr: false } 
 /* Important ssr: false 
 cause the workers wont work server side, just client*/
],

At the moment the compilation will fail because we have not created our file session.worker.js but patience, we are going to that.

Here we are basically giving the necessary instruction to create our worker. If you have doubts about plugins head to the documentation, its explained very simple.

Now we will create a folder and a file inside assets (assets -> js -> session.worker.js)

It is important that the new file is called in the same way as the one we import in our plugin, and it is on the same path.
And add:

self.addEventListener('message', (event) => {
 console.log('[WORKER] worker con data: ', event.data)
})

What is this?
self references the worker itself
message it is the first parameter that the function receives and should not say otherwise.

If its different than message It wont work

The event parameter is the one it receives when worker is called (we'll get to that)

So what my worker will do? just print to console the received message

But, how? Lets see.

Executing our worker

Lets head to pages -> index (you can actually run it anywhere, I chose in that specific place because it is the first contact of the application) and we add the following:

created: function () {
 if (process.browser) { // Remember workers just work in client?
  const worker = this.$worker.createWorker() // Instruction assigned in plugin
  worker.addEventListener('message', this.workerResponseHandler)
  worker.postMessage('Message sent to worker')
 }
},
methods: {
 workerResponseHandler: function (event) {
  console.log('[WORKER REPONSE]', event.data)
 }
}

What did we just see?
const worker = this.$worker.createWorker() We are creating the worker variable to start it.
worker.addEventListener('message', this.workerResponseHandler) We are creating the event by passing two parameters:

message this must keep it's name, otherwise wont work
this.workerResponseHandler function that handles worker response.

worker.postMessage('Message sent to worker') We send a message to our worker so it can be printed in console

Lastly:
workerResponseHandler print the worker response.

Its done! It is all for our first part, an apology if the explanation is very extensive, however it is a complicated process and I wanted it to be as clear as possible.

What we saw in this tutorial?

Install and configure everything needed to use web workers with Nuxt.
Code our very first worker
Execute our worker

Stay with me to see the next steps to logout a user after X time of inactivity.

Any questions or comments you have, with pleasure you can find me on twitter as @c3ppeu

Greetings!

Using SASS global variables in Nuxt JS

Paramo — Sat, 04 Apr 2020 17:10:37 +0000

Using a configuration file for global variables in Nuxt is very simple, it just takes some steps to follow...

Step 1: Add sass-loader and node-sass to your project

using npm:

npm install --save-dev node-sass sass-loader

using yarn:

yarn add --dev node-sass sass-loader

Step 2: Adding the plugin style-resources to your project. If you don't know about plugins take a look in NuxtJS documentation. Also you can review the mentioned plugin right here.

using npm:

npm install --save-dev @nuxtjs/style-resources

using yarn:

yarn add --dev @nuxtjs/style-resources

Step 3: Adding to your assets directory a new sccs directory (this is where your global variable files will be stored, you can use as much as you like)

And my colors.scss file looks like this

$white: #fff;
$black: #000;
$green: #43976c;

/* All the variables you want */

How we're going up to here? We're almost done! let's do this!

Step 4: Modify your nuxt.config.js file to map the new styles

export default {
    //...
    css: [
    '~assets/scss/colors.scss'
  ],
    //...
    modules: [
    '@nuxtjs/style-resources'
  ],

    //You will have to add this new object if it doesn't exist already
  styleResources: {
    scss: ['./assets/scss/*.scss']
  },
    //...
}

We did it!! That's all! 👍 👍 Now we can use our new variables wherever we want without importing anything.
Example

// Don't forget to specify lang="scss"
<style lang="scss" scoped>

.my-css-class {
  width: 90%;
  height: 2px;
  background-color: $green; // Here we are using the variable
  border-radius: 5px;
}

</style>

Hope this was helpfull for you! I'll leave the original post where I learned from.

Thank you for reading!

DEV Community: Paramo

Nuxt + Web Workers, logout after idle (part 1)

Installation and configuration

Coding our very first worker

Executing our worker

Using SASS global variables in Nuxt JS