@nuxtjs/global-components

Module to register global components for Nuxt.js

📖 Release Notes

⚠️ 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

1. Add @nuxtjs/global-components dependency to your project

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

2. Add @nuxtjs/global-components to the buildModules section of nuxt.config.js

export default {
  buildModules: [
    // Simple usage
    '@nuxtjs/global-components',

    // With options
    ['@nuxtjs/global-components', { /* module options */ }]
  ]
}

⚠️ If you are using Nuxt < v2.9 you have to install the module as a 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

MIT License

Insipired by nuxtjs.org

Copyright (c) Nuxt Community