nuxt logo

ドキュメント翻訳

機能

新しい可能性を開くために、Nuxtのオプション機能を有効または無効にします。

Nuxtのいくつかの機能は、オプトインベースで利用可能であり、必要に応じて無効にすることもできます。

features

inlineStyles

HTMLをレンダリングする際にスタイルをインライン化します。これは現在、Viteを使用している場合にのみ利用可能です。

Vueコンポーネントのパスを受け取り、そのコンポーネントのスタイルをインライン化するかどうかを示すブール値を返す関数を渡すこともできます。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: false // またはインライン化を決定する関数
  }
})

noScripts

NuxtスクリプトとJSリソースヒントのレンダリングを無効にします。routeRules内で細かく設定することもできます。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    noScripts: true
  }
})

future

将来の(おそらくメジャーな)バージョンでデフォルトになる新機能を早期にオプトインするためのfuture名前空間もあります。

compatibilityVersion

この設定オプションはNuxt v3.12+で利用可能です。現在のところ、Nuxt 4の動作にオプトインする各レイヤーで互換性バージョンを定義する必要があります。Nuxt 4がリリースされた後は必要ありません。

これにより、Nuxtの機能やフラグへの早期アクセスが可能になります。

compatibilityVersion4に設定すると、Nuxt v4の動作にオプトインするためにNuxt設定全体のデフォルトが変更されますが、テスト時にNuxt v3の動作を細かく再有効化することができます(例を参照)。その場合は問題を報告してください。Nuxtまたはエコシステムで対処します。

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // _すべての_ Nuxt v3の動作を再有効化するには、次のオプションを設定します:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    scanPageMeta: 'after-resolve',
    sharedPrerenderData: false,
    compileTemplate: true,
    resetAsyncDataToUndefined: true,
    templateUtils: true,
    relativeWatchPaths: true,
    normalizeComponentNames: false
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  features: {
    inlineStyles: true
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

typescriptBundlerResolution

これは、TypeScriptの'Bundler'モジュール解決モードを有効にします。これは、NuxtやViteのようなフレームワークに推奨される設定です。

exportsを使用する現代的なライブラリを使用する際の型サポートを向上させます。

オリジナルのTypeScriptプルリクエストを参照してください。

nuxt.config.ts
export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: true
  }
})