メタのインポート

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

import.meta オブジェクト

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

import.meta について詳しくはこちらをご覧ください。

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

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

プロパティタイプ説明
import.meta.clientブール値クライアント側で評価された場合に True。
import.meta.browserブール値クライアント側で評価された場合に True。
import.meta.serverブール値サーバー側で評価された場合に True。
import.meta.nitroブール値サーバー側で評価された場合に True。
import.meta.devブール値Nuxt開発サーバーを実行している場合に True。
import.meta.testブール値テストコンテキストで実行されている場合に True。
import.meta.prerenderブール値ビルドのプリレンダリング段階でサーバー上でHTMLをレンダリングしている場合に True。

ビルダープロパティ

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

プロパティタイプ説明
import.meta.envオブジェクトprocess.env に等しい。
import.meta.url文字列現在のファイルの解決可能なパス。

例

モジュール内のファイルを解決するために 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'),
    })
  },
})