Importing Vue plugins into Nuxt

The process works much the same in Nuxt apps. All plugins are to be run before the root Vue is initiated. So if we want to use a Vue plugin, as with the previous sample plugin, we need to set up the plugin before launching the Nuxt app. Let's copy our custom basic.js plugin into the /plugins/ directory in our Nuxt app and then implement the following steps to install it:

1. Create a basic-import.js file to import basic.js in the /plugins/ directory as follows:

// plugins/basic-import.js
import Vue from 'vue'
import PluginSample from './basic'

Vue.use(PluginSample)

We skip the options this time when installing the plugin with the Vue.use method.

2. Add the file path of basic-import.js to the plugins option in the Nuxt config file as follows:

export default {
  plugins: [
    '~/plugins/basic-import',
  ]
}

3. Use this plugin in any pages...