リリース· 2025年7月28日

Nuxt 3.18

Nuxt 3.18がリリースされました。v4の機能をv3にもたらし、アクセシビリティの向上、ブラウザ開発ツールの統合の改善、パフォーマンスの強化を実現しました！

ダニエル・ロー

@danielroe.dev

🧪 Lazy Hydration マクロ

v3.16からの遅延ハイドレーションサポートをさらに発展させ、lazy hydration マクロ (#31192) をサポートしました！これにより、コンポーネントのハイドレーションをより人間工学的に制御できるようになります。

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./components/MyComponent.vue')
)
</script>
<template>
  <div>
    <!-- 
      Hydration will be triggered when
      the element(s) is 100px away from entering the viewport.
    -->
    <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" />
  </div>
</template>

これらのマクロにより、Nuxtのlazy hydrationユーティリティを明示的なコンポーネントインポートと組み合わせて使用することが可能になります。

組み込みの app.vue に <NuxtRouteAnnouncer> を含めることで、アクセシビリティを向上させました (#32621)。これにより、ページ変更がスクリーンリーダーに通知され、視覚障害のあるユーザーのナビゲーションがより利用しやすくなります。(これは、プロジェクトに app.vue がない場合にのみ適用されます。ある場合は、<NuxtRouteAnnouncer> を app.vue に保持してください！)

🛠️ 開発エクスペリエンスの強化

Chrome DevTools ワークスペース統合

Chrome DevTools ワークスペース統合 (#32084) を追加し、Chrome DevToolsから直接Nuxtのソースファイルを編集できるようになりました。これにより、DevToolsで行われた変更が実際のソースファイルに反映される、より良いデバッグ体験が生まれます。

コンポーネントの型安全性向上

コンポーネントの型安全性は以下によって改善されました。

<ClientOnly> および <DevOnly> の型付きスロット (#32707) - より優れたIntelliSenseとエラーチェック
エクスポートされた <NuxtTime> プロパティ型 (#32547) - 拡張とカスタマイズが容易に

新しい自動インポート: `onWatcherCleanup`

vue からの onWatcherCleanup 関数が自動インポートとして利用可能になり (#32396)、ウォッチャーのクリーンアップとメモリリークの防止が容易になりました。

const { data } = useAsyncData('users', fetchUsers)

watch(data, (newData) => {
  const interval = setInterval(() => {
    // Some periodic task
  }, 1000)
  
  // Clean up when the watcher is stopped
  onWatcherCleanup(() => {
    clearInterval(interval)
  })
})

// Before: had to wrap in array
addServerImports([{ from: 'my-package', name: 'myUtility' }])

// Now: can pass directly
addServerImports({ from: 'my-package', name: 'myUtility' })