Auto import components in NuxtJS

In the last week NuxtJS announced a new way to auto import your components. It is now officially supported with the latest version(2.13+).

You just have to enable it in your nuxt.config.js

export default {
  components: true,
}

You can find more details on the official github page. Here is the demo

Long story short with this image:

Supported Features

• Scan and auto import components
• Multiple paths with customizable prefixes and lookup/ignore patterns
• Dynamic import (aka Lazy loading) Support
• Hot reloading Support
• Transpiling Support (useful for component libraries' authors)
• Fully tested!

Usage

Ensure using nuxt 2.13+ and components option is set in nuxt.config:

export default {
  components: true,
}

Note: If using nuxt 2.10...2.13, you have to also manually install and add @nuxt/components to buildModules inside nuxt.config.

Create your components:

components/
  ComponentFoo.vue
  ComponentBar.vue

Use them whenever you want, they will be auto imported in .vue files :

<template>
  <ComponentFoo />
  <component-bar />
</template>

No need anymore to manually import them in the script section!

See live demo.

Dynamic Imports

To make a component imported dynamically (lazy loaded), all you need is adding a Lazy prefix in your templates.

If you think this prefix should be customizable, feel free to create a feature request issue!

You are now being able to easily import a component on-demand :

<template>
  <LazyComponentFoo v-if="foo" />
  <button @click="loadFoo">
    Load Foo
  </button>
</template>

<script>
export default {
  data () {
    return {
      foo: null
    }
  },
  methods: {
    async loadFoo () {
      this.foo = await this.$axios.$get('foo')
    }
  }
}
</script>

Nested Components

If you have components in nested directories:

components/
  foo/
    Bar.vue

The component name will be based on its filename:

<Bar />

We do recommend to use the directory name in the filename for clarity in order to use <FooBar />:

components/
  foo/
    FooBar.vue

If you want to keep the filename as Bar.vue, consider using the prefix option: (See directories section)

components: ['~/components/', { path: '~/components/foo/', prefix: 'foo' }]

Directories

By setting components: true, default ~/components directory will be included. However you can customize module behaviour by proividing directories to scan:

export default {
  components: [
    '~/components', // shortcut to { path: '~/components' }
    { path: '~/components/awesome/', prefix: 'awesome' },
  ],
}

Each item can be either string or object. String is shortcut to { path }.

Note: Don't worry about ordering or overlapping directories! Components module will take care of it. Each file will be only matched once with longest path.

f you prefer to split your SFCs into .js, .vue and .css, you can only enable .vue files to be scanned:

├── src
│   └── components
│         └── componentC
│           └── componentC.vue
│           └── componentC.js
│           └── componentC.scss

// nuxt.config.js
export default {
  components: [{ path: '~/components', extensions: ['vue'] }],
}