Registering global components in Nuxt

We learned about the directory structure in Chapter 2, Getting Started with Nuxt, and that the /plugins/ directory is where we can create JavaScript files that we want to run before instantiating the root Vue app. Hence, this is the best place to register our global components.

Let's create our first global component:

1. Create a simple Vue component in the /plugins/ directory, as follows:

// components/global/sample-1.vue
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data () {
    return {
      message: 'A message from sample global component 1.'
    }
  }
}
</script>

2. Create a .js file in the /plugins/ directory and import the preceding component, as follows:

// plugins/global-components.js
import Vue from 'vue'
import Sample from '~/components/global/sample-1.vue'

Vue.component('sample-1', Sample)

3. We can also create a second global component directly...