With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading. That means you can just add your component in the template without having to add it to the script tag. This makes development much faster.

How does it work?

This module parses your template and automatically includes the component in the file where you are using it such as a page, layout or even a component. Because Nuxt.js uses automatic code splitting to split your pages by default this module works perfect as it will only contain the components that are used on that page. Also, if you use a component in more than 2 pages, Nuxt.js will automatically create a shared chunk for them thanks to the magic of webpack.

Installation

If you are using Nuxt v2.13+ then this module is included by default but it is not activated by default so you don’t have to install it but you do have to set components to true in your nuxt config file.

export default {
  components: true
}

OR

If you are using Nuxt 2.10+ then you will need to install the module.

yarn add --dev @nuxt/components # or npm install --save-dev @nuxt/components

Then you need to add the @nuxt/components to your buildModules section of your nuxt.config.js file.

export default {
  buildModules: [
    '@nuxt/components'
  ]
}

Auto Import your components

Once you have the module activated or installed you can now simply add your components in your template. The module will read the components directory and automatically look for the component in there.

1. Create your components

components/
  TheHeader.vue
  TheFooter.vue

1. Use your components in any .vue file (components, pages or layouts) without having to add a script tag or an import.

<template>
  <TheHeader /> <!-- or <the-header /> -->
  <TheFooter /> <!--  or <the-footer /> -->
</template>

#vuejs #javascript #vue #vue-js #nuxtjs