🎤Nuxt Nationカンファレンス開催！11月12日〜13日
54.8K

インポートメタ

`import.meta` を使用してコードの実行場所を理解する。

import.meta オブジェクト

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

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'

// Resolve relative from the current file
const resolver = createResolver(import.meta.url)

export default defineNuxtModule({
  meta: { name: 'myModule' },
  setup() {
    addComponent({
      name: 'MyModuleComponent',
      // Resolves to '/modules/my-module/components/MyModuleComponent.vue'
      filePath: resolver.resolve('./components/MyModuleComponent.vue')
    })
  }
})
⬅️ ライフサイクルフック ➡️ Nuxt設定