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の提供は今の所時期未定のようです。
今から待ち遠しいですね。

🙇‍♀️

Nuxt v3はどうなるのか