Components

Component utilities to help you work with components

Components

Nuxt Kit provides a set of utilities to help you work with components. You can register components globally or locally, and also add directories to be scanned for components.

Components are the building blocks of your Nuxt application. They are reusable Vue instances that can be used to create a user interface.

addComponentsDir

Register a directory to be scanned for components and imported only when used. Keep in mind, that this does not register components globally, until you specify global: true option.

Type

function addComponentsDir(dir: ComponentsDir, opts: { prepend?: boolean } = {}): void

Parameters

dir: An object with the following properties:

Property	Type	Required	Description
path	string	true	Path (absolute or relative) to the directory containing your components.
pattern	string | string[]	false	Accept Pattern that will be run against specified path.
ignore	string[]	false	Ignore patterns that will be run against specified path.
prefix	string	false	Prefix all matched components with this string.
pathPrefix	boolean	false	Prefix component name by its path.
global	boolean	false	If enabled, registers components to be globally available.
island	boolean	false	If enabled, registers components as islands.
watch	boolean	false	Watch specified path for changes, including file additions and file deletions.
extensions	string[]	false	Extensions supported by Nuxt builder.
transpile	'auto' | boolean	false	Transpile specified path using build.transpile. If set to 'auto', it will set transpile: true if node_modules/ is in path.

opts:

Property	Type	Required	Description
prepend	boolean	false	If set to true, the directory will be prepended to the array with unshift() instead of push().

Usage

import { defineNuxtModule, addComponentsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/ui',
    configKey: 'ui',
  },
  setup() {
    const resolver = createResolver(import.meta.url)
    
    addComponentsDir({
      path: resolver.resolve('./runtime/components'),
      prefix: 'U',
      pathPrefix: false,
    })
  },
})

addComponent

Register a component to be automatically imported.

Type

function addComponent(options: AddComponentOptions): void

Parameters

options: An object with the following properties:

Property	Type	Required	Description
name	string	true	Component name.
filePath	string	true	Path to the component.
declarationPath	string	false	Path to component’s declaration file. Used to generate components’ type templates.
pascalName	string	false	Pascal case component name. If not provided, generated from the component name.
kebabName	string	false	Kebab case component name. If not provided, generated from the component name.
export	string	false	Specify named or default export. If not provided, set to 'default'.
global	boolean	false	If enabled, registers component to be globally available.
island	boolean	false	If enabled, registers component as island.
mode	'client' | 'server' | 'all'	false	Indicates if component should render on client, server or both. By default, renders on both.
priority	number	false	Priority of the component. If multiple components have the same name, the one with the highest priority will be used.

Usage

import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  setup() {
    const resolver = createResolver(import.meta.url)

    addComponent({
      name: 'NuxtImg',
      filePath: resolver.resolve('./runtime/components/NuxtImg.vue'),
    })

    addComponent({
      name: 'NuxtPicture',
      filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'),
    })
  },
})

Auto-importing from npm packages

If you want to auto-import a component from an npm package, and the component is a named export (rather than the default), you can use the export option.

import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
    addComponent({
      name: 'MyAutoImportedComponent',
      export: 'MyComponent',
      filePath: 'my-npm-package',
    })
  },
})

Source

View source on GitHub