はじめに
こんにちは、エンジニアのがんがんです。
News記事をあまり執筆できていなかったので来年は気長に続けていければ良いなと考えています。
Nuxtからクリスマスプレゼントとして v3.15 がリリースされました。🎁
Nuxtチームは以前にも v3.14.159 という円周率をテーマとしたバージョンをリリースしています。
今後もユーザーをワクワクさせてくれそうですね。
本記事ではNuxt v3.15のリリース内容を追っていきたいと思います。
本記事のお品書き
- Nuxt v3.15がリリースされました
- リリース内容の詳細はリリースノートを参照ください
リリース内容を眺める
❄️ Snowfall!
Nuxtのローディング画面で雪が降るエフェクトが追加されました。非常におしゃれな機能ですね❄️
動作が気になる方はPR上に動画がありますのでご覧ください。
⚡️ Vite 6 included
2024年11月26日にVite v6がリリースされました🎉
Vite v6のリリースブログはこちらを参照ください。
Nuxt v3.15 ではこのVite6に対応しました。Vite v6で追加された新規APIへの対応もどんどん行われていきます。
🗺️ Navigation mode for callOnce
Nuxt v3.9よりcallOnceという機能が追加されました。
実行ログの吐き出しやグローバルステートの設定、初回APIのコールなど1回しか実行しないような処理はプロダクト実装時に多々発生すると思います。
callOneを利用することでその要件を満たすことができます。
今回modeオプションが追加されたことで実行のタイミングを可変させることが出来るようになりました。
実行例は以下のようになります。
<script setup lang="ts">
const counter = ref(0)
await callOnce(() => counter.value++, { mode: 'navigation' })
</script>
📋 Page meta enhancements
definePageMetaに2つの更新が入っています。
1つ目はdefinePageMetaで利用するキーを追加する方法です。こちらは実験的に追加されています。こちらはモジュール作成者によるカスタムキーの拡張を想定して追加されています。
PRでは以下のような例が示されています。
<script lang="ts" setup>
definePageMeta({
foo: 'bar'
})
</script>
export default defineNuxtConfig({
experimental: {
extraPageMetaExtractionKeys: ['foo'],
},
hooks: {
'pages:resolved' (ctx) {
// ✅ foo is available
},
},
})
2つ目はdefinePageMetaでローカル関数をサポートした点です。リリースノートではページのルートが有効か無効かを判断するvalidateオプションに対してローカルのバリデーション関数を渡しています。
<script setup lang="ts">
import { someData } from '~/utils/example'
function validateIdParam(route) {
return route.params.id && !isNaN(Number(route.params.id))
}
const title = ref('')
definePageMeta({
validate: validateIdParam,
someData,
title, // do not do this, the ref will be hoisted out of the component
})
</script>
definePageMetaのパラメータは下記ドキュメントを参照ください。
🔥 Performance improvements
従来ではアプリ マニフェストのロードに時間がかかっていました。マニフェストを利用する場合はブラウザ側でpreloadするように変更されました。
おわりに
Nuxt v3.15のリリースノートを追っていきました。Vite v6がリリースされ、Nuxt v4、Nuxt UI v3、Nuxt Content v3がそれぞれリリースに向けて開発が進んでいます。
2025年も Nuxt および関連モジュールのさらなる進化が楽しみですね🎁
Discussion