Auto-importaciones

Nuxt Kit proporciona un conjunto de utilidades para ayudarte a trabajar con auto-importaciones. Estas funciones te permiten registrar tus propios utilitarios, composables y APIs de Vue.

Nuxt auto-importa funciones de ayuda, composables y APIs de Vue para usarlas en toda tu aplicación sin necesidad de importarlas explícitamente. Basado en la estructura de directorios, cada aplicación de Nuxt también puede usar auto-importaciones para sus propios composables y plugins.

Con Nuxt Kit también puedes agregar tus propias auto-importaciones. addImports y addImportsDir te permiten agregar importaciones a la aplicación Nuxt. addImportsSources te permite agregar importaciones listadas de paquetes de terceros a la aplicación Nuxt.

Estas utilidades son impulsadas por unimport, que proporciona el mecanismo subyacente de auto-importación utilizado en Nuxt.

Estas funciones están diseñadas para registrar tus propios utilitarios, composables y APIs de Vue. Para páginas, componentes y plugins, por favor consulta las secciones específicas: Pages, Components, Plugins.

Mira el video de Vue School sobre las utilidades de Auto-importaciones de Nuxt Kit.

`addImports`

Agrega importaciones a la aplicación Nuxt. Hace que tus importaciones estén disponibles en la aplicación Nuxt sin necesidad de importarlas manualmente.

Uso

import { defineNuxtModule, addImports } from "@nuxt/kit";

export default defineNuxtModule({
  setup(options, nuxt) {
    const names = [
      "useStoryblok",
      "useStoryblokApi",
      "useStoryblokBridge",
      "renderRichText",
      "RichTextSchema"
    ];

    names.forEach((name) =>
      addImports({ name, as: name, from: "@storyblok/vue" })
    );
  }
})

Tipo

function addImports (imports: Import | Import[]): void

Parámetros

imports: Un objeto o un array de objetos con las siguientes propiedades:

Propiedad	Tipo	Requerido	Descripción
`name`	`string`	`true`	Nombre de la importación a detectar.
`from`	`string`	`true`	Especificador del módulo desde el cual importar.
`priority`	`number`	`false`	Prioridad de la importación; si múltiples importaciones tienen el mismo nombre, se usará la de mayor prioridad.
`disabled`	`boolean`	`false`	Si esta importación está deshabilitada.
`meta`	`Record<string, any>`	`false`	Metadatos de la importación.
`type`	`boolean`	`false`	Si esta importación es una importación de tipo puro.
`typeFrom`	`string`	`false`	Usa esto como el valor `from` al generar declaraciones de tipo.
`as`	`string`	`false`	Importar como este nombre.

`addImportsDir`

Agrega importaciones desde un directorio a la aplicación Nuxt. Importará automáticamente todos los archivos del directorio y los hará disponibles en la aplicación Nuxt sin necesidad de importarlos manualmente.

Uso

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

export default defineNuxtModule({
  meta: {
    name: '@vueuse/motion',
    configKey: 'motion',
  },
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('./runtime/composables'))
  },
})

Tipo

function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void

Parámetros

Propiedad	Tipo	Requerido	Descripción
`dirs`	`string \| string[]`	`true`	Una cadena o un array de cadenas con la ruta al directorio desde el cual importar.
`options`	`{ prepend?: boolean }`	`false`	Opciones para pasar a la importación. Si `prepend` está establecido en `true`, las importaciones se añadirán al principio de la lista de importaciones.

`addImportsSources`

Agrega importaciones listadas a la aplicación Nuxt.

Uso

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

export default defineNuxtModule({
  setup() {
    addImportsSources({
      from: 'h3',
      imports: [
        'defineEventHandler',
        'getQuery',
        'getRouterParams',
        'readBody',
        'sendRedirect'
      ],
    })
  }
})

Tipo

function addImportsSources (importSources: ImportSource | ImportSource[]): void

Parámetros

importSources: Un objeto o un array de objetos con las siguientes propiedades:

Propiedad	Tipo	Requerido	Descripción
`from`	`string`	`true`	Especificador del módulo desde el cual importar.
`imports`	`PresetImport \| ImportSource[]`	`true`	Un objeto o un array de objetos, que pueden ser nombres de importación, objetos de importación o fuentes de importación.

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/kit/autoimports