Package Exports

@nuxt/components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nuxt/components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nuxt/components

Module to scan and auto import components for Nuxt.js

📖 Release Notes

Usage

Create your components :

components/
  ComponentFoo.vue
  ComponentBar.vue

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

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

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

ℹ components directory is watched, so it even works with reloading (adding or removing a component) !

Here are some cases you may want to still import manually :

Third-party library components
Lazy load of components
Child components in functional templates (See edge case here)

ℹ If you import manually, it will override any automatic import that matches the same component name (automatic import will be in fact ignored).

See live demo.

Setup

Add @nuxt/components dependency to your project

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

Add @nuxt/components to the buildModules section of nuxt.config.js

export default {
  buildModules: [
    // Simple usage
    '@nuxt/components',

    // With options
    ['@nuxt/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.

Options

`pattern`

Type: String
Default: 'components/**/*.{vue,ts,tsx,js,jsx}'

The glob pattern that will find your components. This pattern will be run against your srcDir

`ignore`

Type: Array
Default: []

An array of glob patterns to exclude files.

License

MIT License