Learn Nuxt with a Collection of 100+ Tips!

Импорт метаданных

Понять, где выполняется ваш код, можно с помощью `import.meta`.

Объект import.meta

С помощью ES-модулей вы можете получить некоторые метаданные от кода, который импортирует или компилирует ваш ES-модуль. Это делается через import.meta, который является объектом, предоставляющим вашему коду эту информацию. В документации по Nuxt вы можете увидеть сниппеты, которые используют эту информацию, чтобы выяснить, выполняется ли код в данный момент на клиенте или на сервере.

Read more about import.meta.

Runtime (App) свойства

Эти значения внедряются статически и могут быть использованы для операции tree-shaking вашего кода во время выполнения.

СвойствоТипОписание
import.meta.clientbooleantrue при вычислении на клиенте.
import.meta.browserbooleantrue при вычислении на клиенте.
import.meta.serverbooleantrue при вычислении на сервере.
import.meta.nitrobooleantrue при вычислении на сервере.
import.meta.devbooleantrue при запуске в Nuxt dev server.
import.meta.testbooleantrue при запуске в тестовом контексте.
import.meta.prerenderbooleantrue при рендеринге HTML на сервере на этапе пререндера вашей сборки.

Свойства билдера

Эти значения доступны как в модулях, так и в вашем nuxt.config.

СвойствоТипОписание
import.meta.envobjectРавно process.env
import.meta.urlstringРазрешимый путь для текущего файла.

Примеры

Использование import.meta.url для разрешения файлов внутри модулей

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

// Относительно текущего файла
const resolver = createResolver(import.meta.url)

export default defineNuxtModule({
  meta: { name: 'myModule' },
  setup() {
    addComponent({
      name: 'MyModuleComponent',
      // Разрешается в '/modules/my-module/components/MyModuleComponent.vue'
      filePath: resolver.resolve('./components/MyModuleComponent.vue')
    })
  }
})