6. Plugins

Nuxt.js allows you to define JavaScript plugins to be run before instantiating the root vue.js application. This is especially helpful when using your own libraries or external modules.

Custom Plugin

So far we have seen how to load an array in our main view, but if we look at the browser console in the developer tools we will notice that we have an error [Vue warn]: Failed to resolve filter: date this happens because in our component GistArticle.vue uses a filter to improve the readability of the created date of the article. Let's now create a custom filter to solve this.

• The first thing is to install moment.js to support us from this library and make the development faster: npm i -S moment
• Then in the folder plugins we create the file filters.js with the following content:

import Vue from 'vue'
import moment from 'moment'

Vue.filter('date', (value, format) => {
  if (value) {
    return moment(String(value)).format(format)
  }
})

• Finally we must add our filter in the configuration file of nuxt.config.js

// Add after the key modules

plugins: [
  '~plugins/filters.js'
],

External Packages

We may want to use external packages/modules in our application, one great example is axios for making HTTP request for both server and client. We install it via npm: npm i --S axios

Note

Axios could be added as a module as we saw in 4. Modules but for example purposes we are going to use it as an external plugin.

In our main page index.vue we are going to change a bit the response of the asyncData method to use an asynchronous call to the API of GitHub.

  // Add
  import axios from 'axios'

  // Remove
  const gists ...

  export default {
    // Modificar
    data () {
      return { gists: [] }
    },


    // Change
    async asyncData ({ params }) {
      const { data } = await axios.get('https://api.github.com/users/khriztianmoreno/gists')
      return { gists: data }
    }

    ...
  }

Client-side only

Some plugins might work only for the browser, you can use the ssr: false option in plugins to run the file only on the client-side.

Example: nuxt.config.js

module.exports = {
  plugins: [
    { src: '~plugins/ga.js', ssr: false },
  ]
}

It is necessary to have in the qa.js file in the plugins folder

/* eslint-disable */

export default ({ app }) => {
  /*
  ** Only run on client-side and only in production mode
  */
  if (process.env.NODE_ENV !== 'production') return
  /*
  ** Include Google Analytics Script
  */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  /*
  ** Set the current page
  */
  ga('create', 'UA-XXXXXXXX-X', 'auto')
  /*
  ** Every time the route changes (fired on initialization too)
  */
  app.router.afterEach((to, from) => {
    /*
    ** We tell Google Analytics to add a `pageview`
    */
    ga('set', 'page', to.fullPath)
    ga('send', 'pageview')
  })
}

To see these steps complete, you can change to the 6-plugins branch in this repository.