v3
Nuxt on GitHub

Import meta

import.meta를 사용하여 코드가 어디에서 실행되고 있는지 이해하기.

The import.meta object

ES 모듈을 사용하면 ES-모듈을 가져오거나 컴파일하는 코드로부터 일부 메타데이터를 얻을 수 있습니다. 이는 import.meta를 통해 이루어지며, 이 객체는 코드에 이러한 정보를 제공합니다. Nuxt 문서 전반에서 이미 클라이언트 또는 서버 측에서 코드가 실행 중인지 확인하기 위해 이 기능을 사용하는 예시를 볼 수 있습니다.

import.meta에 대해 더 알아보기.

Runtime (App) Properties

이 값들은 정적으로 주입되며 런타임 코드의 트리 셰이킹에 사용할 수 있습니다.

속성타입설명
import.meta.clientboolean클라이언트 측에서 평가될 때 true입니다.
import.meta.browserboolean클라이언트 측에서 평가될 때 true입니다.
import.meta.serverboolean서버 측에서 평가될 때 true입니다.
import.meta.nitroboolean서버 측에서 평가될 때 true입니다.
import.meta.devbooleanNuxt 개발 서버가 실행 중일 때 true입니다.
import.meta.testboolean테스트 컨텍스트에서 실행 중일 때 true입니다.
import.meta.prerenderboolean빌드의 프리렌더 단계에서 서버에서 HTML을 렌더링할 때 true입니다.

Builder Properties

이 값들은 모듈과 nuxt.config 모두에서 사용할 수 있습니다.

속성타입설명
import.meta.envobjectprocess.env와 동일합니다.
import.meta.urlstring현재 파일의 해석 가능한 경로입니다.

Examples

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