nuxt logo

Traducción de Documentación (No Oficial)

Nuxt.js
Version:v3.17

Import meta

Comprende dónde se está ejecutando tu código usando import.meta.

El objeto import.meta

Con los módulos ES puedes obtener algunos metadatos del código que importa o compila tu módulo ES. Esto se hace a través de import.meta, que es un objeto que proporciona esta información a tu código. A lo largo de la documentación de Nuxt, puedes ver fragmentos que ya utilizan esto para determinar si el código se está ejecutando actualmente en el lado del cliente o del servidor.

Ver también developer.mozilla.org > en-US > docs > Web > JavaScript > Reference > Operators > import.meta

Propiedades de Runtime (App)

Estos valores se inyectan estáticamente y pueden usarse para optimizar tu código de runtime.

PropiedadTipoDescripción
import.meta.clientbooleanoVerdadero cuando se evalúa en el lado del cliente.
import.meta.browserbooleanoVerdadero cuando se evalúa en el lado del cliente.
import.meta.serverbooleanoVerdadero cuando se evalúa en el lado del servidor.
import.meta.nitrobooleanoVerdadero cuando se evalúa en el lado del servidor.
import.meta.devbooleanoVerdadero cuando se ejecuta el servidor de desarrollo de Nuxt.
import.meta.testbooleanoVerdadero cuando se ejecuta en un contexto de prueba.
import.meta.prerenderbooleanoVerdadero cuando se renderiza HTML en el servidor en la etapa de prerenderizado de tu build.

Propiedades del Constructor

Estos valores están disponibles tanto en los módulos como en tu nuxt.config.

PropiedadTipoDescripción
import.meta.envobjetoEquivale a process.env
import.meta.urlcadenaRuta resoluble para el archivo actual.

Ejemplos

Usando import.meta.url para resolver archivos dentro de módulos

modules/my-module/index.ts
import { createResolver } from 'nuxt/kit'

// Resolver relativo desde el archivo actual
const resolver = createResolver(import.meta.url)

export default defineNuxtModule({
  meta: { name: 'myModule' },
  setup() {
    addComponent({
      name: 'MyModuleComponent',
      // Se resuelve a '/modules/my-module/components/MyModuleComponent.vue'
      filePath: resolver.resolve('./components/MyModuleComponent.vue')
    })
  }
})