Nuxt Nation カンファレンス開催!11月12日~13日参加をお待ちしています。

機能

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

Nuxtの一部の機能は、オプトイン方式で利用可能、または必要に応じて無効にできます。

機能

inlineStyles

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

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

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: true // or a function to determine inlining
  }
})

noScripts

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

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

future

将来(メジャーバージョンアップの可能性あり)のフレームワークバージョンでデフォルトになる新しい機能を早期にオプトインするためのfuture名前空間もあります。

compatibilityVersion

この設定オプションは、Nuxt v3.12以降で使用できます。

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

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

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // To re-enable _all_ Nuxt v3 behaviour, set the following options:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    scanPageMeta: 'after-resolve',
    sharedPrerenderData: false,
    compileTemplate: true,
    resetAsyncDataToUndefined: true,
    templateUtils: true,
    relativeWatchPaths: true,
    normalizeComponentNames: false
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

typescriptBundlerResolution

これにより、TypeScriptの「バンドラー」モジュール解決モードが有効になります。これは、NuxtやViteなどのフレームワークでは推奨される設定です。

exportsを使用する最新のライブラリを使用する場合、型サポートが向上します。

元のTypeScriptプルリクエストを参照してください

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