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:
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.
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>
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' }
]
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'] }
]
}