@nuxtjs/global-components
Module to register global components for Nuxt.js
⚠️ Important
NuxtJS Team released @nuxt/components to auto import components when used in templates, allowing better performances and features.
If you want to migrate from this module, you will simply have to remove the .global
suffix.
Usage
Suffix your components with .global.{ext}
to declare your global components.
components/
my-component.vue # local component, import it to use it
my-button.global.vue # global component, no need to register it!
See live demo.
Setup
- Add
@nuxtjs/global-components
dependency to your project
yarn add --dev @nuxtjs/global-components # or npm install --save-dev @nuxtjs/global-components
- Add
@nuxtjs/global-components
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
// Simple usage
'@nuxtjs/global-components',
// With options
['@nuxtjs/global-components', { /* module options */ }]
]
}
dependency
(No --dev
or --save-dev
flags) and use modules
section in nuxt.config.js
instead of buildModules
.
Using top level options
export default {
buildModules: [
'@nuxtjs/global-components'
],
globalComponents: {
/* module options */
}
}
Options
dir
- Type:
String|Array
- Default:
components
A list of directories to find components inside your nuxt project.
suffixes
- Type:
Array
- Default:
['global']
The suffixes that files can contain.
extensions
- Type:
Array
- Default:
['vue', 'js', 'ts']
The extensions that files can contain.
ignore
- Type:
Array
- Default:
[]
An array of glob patterns to exclude matches.
ignoreNameDetection
- Type:
Boolean
- Default:
false
Ignore name detection using prototype names.
License
Insipired by nuxtjs.org
Copyright (c) Nuxt Community