Creating Custom Directives for Static & SSR Sites — Nuxt

Nuxt — Creating Custom Directives For Static & SRR Sites

What Are Directives? Why Are They Useful?

Custom directives are a way of making our code reusable similar to mixins but instead of reusing component functionalities, directives let us create single methods that are reusable these custom directives are great for DOM access/manipulation. Vue comes with a few default directives that you are guaranteed to have seen/used before like v-model, v-bind & v-show. It's a lot easier to understand once we see some examples of what we can do with custom directives.

Vue also allows you to register your own custom directives, where would custom directives would still be useful? An example would be focusing on an input element when the page is loaded.

What Will We Be Making?

We will be making a directive that will make elements scroll in & fade in once they are in view.

Preview of what we will be making

This animation is very subtle but this can help make a boring static web page more engaging and interesting to look at.

If you are not interested in creating this animation and just want to understand how to add directives to your project then you can just read these sections:

• Creating The Directive File
• Making The Directive Accessible Within Your Project

Creating A Directive

If you have ever made a directive in Vue before this is going to look very similar to that, but how we implement this into our application is a bit different.

Before You Start

First, we have to navigate to our plugins folder typically located in our applications root directory (~/plugins) if you don't have this folder you can just create it.

Creating The Directive File

Inside of your plugins folder create a file and call it whatever you like I called mine animateOnScroll. Your file extension can be simply .js or .client.js if you are going to deploy your site statically both of these extensions will work fine but if you are using SSR on your site once you deploy .js will not work you have to use .client.js. I tend to always use .client.js just to avoid this error in future if I decide to change to server-side rending.

Creating The Intersection Observer

Inside of your animateOnScroll.client.js let's create the observer this will observe elements and check if they are in view.

const animateOnScrollObserver = new IntersectionObserver()

Now that we have created an observer lets make it listen for an entry to be intersecting (in view) then add a class to animate it into view we also will want to unobserved the element once it has enter view because the intersection observer has done all we wanted it to do for that element so there is no purpose to continue observing.

This at first might look a bit intimidating at first if you have never worked with observers before but what is happening is quite simple and easy to read.

You might have realised we are adding a class that we haven't created yet don't worry that we will be creating that later on.

Creating The Directive

Before we can start creating our directive we need to import Vue into our animateOnScroll.client.js file.

import Vue from 'vue'

Now we can finally create our directive using Vue.directive() the directive function takes two parameters directive name (type string) and directive options/definition this is an object that holds “hook functions”.

There are about five hook functions as of now but for this project, we will only be using one of them the bind hook.

The bind hook is called only once, when the directive is first bound to the element. This is where you can do one-time setup work.

More about hook functions

What is happening here is the once the bind hook is called it calls our anonymous function which has a el parameter this is a reference to the target element (the element that the directive is bound to) and adding a class .before-enter then observing our target element.

Now the inside of the animateOnScroll.client.js file should now look something like this:

CSS Animation

For this animation, all we are going to do is create the two classes .enter and .before-enter these are the classes we are adding to our elements before and after the element is in view. You can change these styles to create/modify this animation.

Making The Directive Accessible Within Your Project

Goto your nuxt.config.js file and find the plugins array if you can't find this you can add it into the file by default this will be generated for you went you created your project. All that is left to do is add the path to the array.

plugins: [
  '~/plugins/animateOnScroll.client.js'
]

You can now use v-animate-on-scroll on any element/component anywhere in your project like this:

<UserCard v-animate-on-scroll />

All directives you defined will be prefixed with v- at the beginning of the directives name.

More About Creating Directives In Vue

Links To Documentation & Resources

• Link to Nuxt.org
• Link to docs: Plugins Property | Custom Directives | Render Property

Create Vue.js Directive - A Vue.js Lesson From our Vue.js Course:...