nuxt logo

ドキュメント翻訳（非公式）

Nuxt.js
Version:v3.17

Import meta

import.meta を使用してコードがどこで実行されているかを理解する。

import.meta オブジェクト

ESモジュールを使用すると、ESモジュールをインポートまたはコンパイルするコードからいくつかのメタデータを取得できます。 これは import.meta を通じて行われ、コードにこの情報を提供するオブジェクトです。 Nuxtのドキュメント全体で、コードが現在クライアント側またはサーバー側で実行されているかどうかを判断するためにこれを使用するスニペットを見ることができます。

こちらも参照 developer.mozilla.org > en-US > docs > Web > JavaScript > Reference > Operators > import.meta

ランタイム（アプリ）プロパティ

これらの値は静的に注入され、ランタイムコードのツリーシェイクに使用できます。

プロパティ型説明
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。

ビルダープロパティ

これらの値はモジュールと nuxt.config の両方で利用可能です。

プロパティ型説明
import.meta.envobjectprocess.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')
    })
  }
})

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/advanced/import-meta