2020/09/19にめでたくVue.js v3がリリースされました🎉
さて、私の関心は業務でも利用しているNuxt.jsがVue.js v3に対応するとどうなるのか、Nuxt.js v3はどうなっていくのか気になっています。
Vue.js Amsterdamで紹介されたNuxt.js v3のスライドから個人的に気になったところを抜粋して紹介します。
詳しくはスライドを参照ください。
TypeScriptのサポート
- core や vue-appが型付になる
-
@nuxt/typesやnuxt-tsが不要になる - VueComponentのTypescriptサポート（SFC？）
- ランタイムと
nuxt.configのサポート
現状はNuxt TypeScriptを使っていますがNuxt v3からはnuxt-tsが不要になるというので楽しみですね。
Builder v3
- ESBuild preset（babelより３倍速くなる）
- Webpack Config preset
- Webpack5
ESBuildを使うことによってビルドが高速化されるのは嬉しいですね。
hardSourceオプションを使っていますが、これなしでも十分速くなることに期待
app.vue
- エントリーポイントがapp.vueに変更
-
pagesはオプショナル
ランディングページを作成する際などはシンプルになりますね。
Routing
- Vue Router 4
-
pages/_slug.vueはpages/[slug].vueに変更 -
pages/blog/[...all].vueでサブパスをすべて取得できる -
pages/404.vueとpages/_error.vueが追加 -
pages/_ignored.vueプレフィックスを無視する - プラグインを利用して実行時にルートを追加
-
<nuxt/>および<nuxt-child/>は<nuxt-page/>に変更
エラーページはSSR時のエラーもハンドリングされるんでしょうか？
期待したいですね。
ignoreについてはよくわからないです（詳しい方コメントください）
Data Fetching
- CompositionAPIベース
- fetchされるまでページナビゲーションを停止できる
- サーバー側とのデータをレンダリング時にハイドレーション
- コンポーネントレベルでどこでも機能
- SWRのようなキャッシングをサポート
- Custom Data Fetcherをサポート
Nuxt v3で特に期待されている機能かと思います。
SWRはstale-while-revalidateの頭文字だそうで、ざっくり説明するとCache-Control、ETag、Expiresヘッダーなどからリソース期限を判断し、適切に再取得する仕組みのようです。ユーザーはリソースの期限を気にすることなく実装することができそうですね。
追記:
@ushironoko さんよりコメントいただきました。
VueにもSWRVというNuxtのコアメンバーが開発しているcomposition apiベースの似たライブラリがあるので、それを利用するという話かもしれませんね。
https://github.com/Kong/swrv
また、SWR(stale-while-revalidate)はCache-Controlヘッダーに指定することでブラウザがバックグラウンドで新しいリソースをチェックくれるみたいです。細かい挙動を理解していないので以下等を参照ください🙇♀️
https://tools.ietf.org/html/rfc5861
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control
useFetch
Data FetchingはuseFetch関数によって提供されます。
詳しい機能はスライドの動画を参照ください。
import { useFetch } from '@nuxt/composables'
export default {
async setup() {
// Make an API call
const { data: mountains } = await useFetch('https://api.nuxtjs.dev/mountains')
return { mountains }
}
}
// Signature
useFetch(request, options)
// Watch a param
useFetch(() => `https://api.nuxtjs.dev/mountains/${props.slug}`)
// Use a custom fetcher
useFetch(() => $prismic.api.getByUID('page', params.uid))
// Don't block client-side navigation
useFetch('https://api.nuxtjs.dev/mountains', { defer: true })
// Fetch only on client
useFetch('https://api.nuxtjs.dev/mountains', { server: false })
Multi App
- themeを利用したProjectの拡張
- ロジックで構造を分離
個人的には刺さらなかったですが、複数アプリを管理したい人は朗報でしょうか？
├── shop
| ├── components
| | └── nav.vue
| ├── layouts
| | └── admin.vue
| ├── middleware
| | └── admin.js
| ├── pages
| | └── shop
| | └── index.vue
| └── store
| └── admin.js
├── nuxt.config.js
├── package.json
├── pages
| └── index.vue
└── store
└── public.js
※スライドより転載
他気になったところ
- IE11がサポート対象外
-
/pluginsがauto importになる -
/staticは/publicに変更 -
app.htmlはdocument.htmlに変更 - サーバーサイドのみ機能する
/functionsが追加
Nuxt v3の提供は今の所時期未定のようです。
今から待ち遠しいですね。
🙇♀️