Making components globally available on NuxtJS

When working with VueJS based projects, oftentimes we come up with situations where we have to use the same component more than once based on our project’s requirements. For example, think of a situation where you have to include a country picker or a date picker in a number of different forms/pages. Another example would be a Google map which you have to show on several pages. In such a situation, instead of duplicating the same piece of code multiple times, it would be best to define the component once and then share it with all the pages/forms which need it. VueJS solves this problem with a technique called components. Once created, a component can be re-used any number of times which greatly improves the code maintainability.

There are a couple of ways in which you can make use of a component.

  1. Import a component locally
  2. Register a component globally

Assume we have a component named Navbar. To locally import the Navbar component, we use the following syntax:

<script>
import Navbar from '@/components/Navbar'

export default {
  components: {
    Navbar
  }
}
</script>

What if we want to use the Navbar on all the pages of our app? If we follow the above method, we gonna have to use the import statement on all of our pages. That seems somewhat tedious and cumbersome, isn’t it? Especially on an app that has a large number of pages. This is a situation where the global registration of a component can become our savior.

Here’s how we globally register our Navbar component:

import Vue from 'vue'
import Navbar from '@/components/Navbar'
Vue.component('navbar', Navbar)

In a usual VueJS app the above lines should normally go into some app initialization script such as main.js or app.js. If somebody is using a Vue based framework such as Nuxt, the global component registrations should happen in a dedicated plugin script.

Once the components have been registered, you can freely use them in whatever page or in any other component without needing to use import statements. This saves a lot of hassle in a big application.

Finally, after that brief introduction into what components are and how to use them, now I can take you into what was promised by the title of this post. That is how to make components globally available in a NuxtJS project.

Imagine you have the following components that you would like to make globally available:

~/components/Page.vue
~/components/Teaser.vue
~/components/Grid.vue
~/components/Feature.vue

In Nuxt, in order to make those components globally available, we’ll first have to create a Nuxt plugin, perform the component registrations within that plugin and finally register the plugin with Nuxt so that the registered components will be globally accessible.

The below steps will show you how to get that done:

1. Create a script named components.js under ~/plugins

2. Import and Register the components you want to make globally available as shown in the below snippet:

~/plugins/components.js

// Import Vue
import Vue from 'Vue'

// Import the components to register
import Page from '~/components/Page.vue'
import Teaser from '~/components/Teaser.vue'
import Grid from '~/components/Grid.vue'
import Feature from '~/components/Feature.vue'

// Register components
Vue.component('page', Page)
Vue.component('teaser' Teaser)
Vue.component('grid', Grid)
Vue.component('feature', Feature)

3. Register the components plug-in with Nuxt by adding it to the plugins array of nuxt.config.js

export default {
  plugins: [
    '~/plugins/components'
  ],
  ...
}

Now you will be able to use each of the registered components without having to import individually.

You can find more about Nuxt plug-ins by having a look at https://go.nuxtjs.dev/config-plugins

Happy Coding! 👋👋👋

Was this helpful?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0