Help us understand the problem. What is going on with this article?

Nuxt v3はどうなるのか

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/typesnuxt-tsが不要になる
  • VueComponentのTypescriptサポート(SFC?)
  • ランタイムとnuxt.configのサポート

現状はNuxt TypeScriptを使っていますがNuxt v3からはnuxt-tsが不要になるというので楽しみですね。

Builder v3

  • ESBuild preset(babelより3倍速くなる)
  • Webpack Config preset
  • Webpack5

ESBuildを使うことによってビルドが高速化されるのは嬉しいですね。
hardSourceオプションを使っていますが、これなしでも十分速くなることに期待

app.vue

  • エントリーポイントがapp.vueに変更
  • pagesはオプショナル

ランディングページを作成する際などはシンプルになりますね。

Routing

  • Vue Router 4
  • pages/_slug.vuepages/[slug].vue に変更
  • pages/blog/[...all].vue でサブパスをすべて取得できる
  • pages/404.vuepages/_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.htmldocument.htmlに変更
  • サーバーサイドのみ機能する /functions が追加

Nuxt v3の提供は今の所時期未定のようです。
今から待ち遠しいですね。

🙇‍♀️

kubotak
フロントエンドが好物 これでもサーバーサイドエンジニア
https://kubotak.page
macloud
M&Aクラウドは「テクノロジーの力で、M&Aに流通革命を」をミッションにM&Aプラットフォーム「M&Aクラウド」を開発運営するスタートアップです。
https://macloud.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away