Los componentes son los bloques de construcción de tu aplicación Nuxt. Son instancias de Vue reutilizables que se pueden usar para crear una interfaz de usuario. En Nuxt, los componentes del directorio de componentes se importan automáticamente por defecto. Sin embargo, si necesitas importar componentes desde un directorio alternativo o deseas importarlos selectivamente según sea necesario, @nuxt/kit proporciona los métodos addComponentsDir y addComponent. Estas utilidades te permiten personalizar la configuración del componente para adaptarse mejor a tus necesidades.

addComponentsDir

Registra un directorio para que sea escaneado en busca de componentes e importado solo cuando se use. Ten en cuenta que esto no registra componentes globalmente, hasta que especifiques la opción global: true.

Uso

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

Tipo

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

Parámetros

dir Un objeto con las siguientes propiedades:

opts

addComponent

Registra un componente para que sea importado automáticamente.

Uso

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

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  async 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'),
    })
  },
})

Tipo

function addComponent (options: AddComponentOptions): void

Parámetros

options: Un objeto con las siguientes propiedades:

Ejemplos

Si deseas importar automáticamente un componente desde un paquete npm, y el componente es una exportación nombrada (en lugar de la por defecto), puedes usar la opción export para especificarlo.

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',
    })
  },
})