Nuxt3 みるみる会
第一部 機能編
新機能
軽量化
モダンブラウザに絞り、サーバーデプロイおよびクライアントバンドルをを最大75倍サイズダウン
IE11がサポート対象外に
高速化
Nitro によるダイナミック SSR コード分割で最適化されたコールドスタートを提供
ハイブリッド
ISR(インクリメンタル静的生成)やその他の高度なモードが利用可能に
未提供
Suspense(待機)
遷移前後、任意のコンポーネント内でデータをフェッチできる
サスペンスを使うことで、レンダー可能になる前にコンポーネントが何かを「待機」できるようになります。
その他
Composition API
Nuxt CLI
Nuxt Devtools
未提供
Nuxt Kit
Webpack 5
Vite
Vue 3
Volar
TypeScript
Nitro Engine
フルスタック能力=サーバーサイドの統合
server/api/ でサーバーAPIを生成
server/functions/ からサーバーファンクションを提供
出力が軽量
アプリケーションとサーバーを同一ディレクトリにビルド
JavaScript をサポートするあらゆるシステムにデプロイ可能
ユニバーサル
あらゆる環境(Service Worker 等)で実行可能
静的ファイルを提供
JAMStack向け
rollup
今までは webpack 4 だった
h3
HTTPサーバー
Nuxt Bridge
Nuxt3 へのアップグレード対応
プラグイン・モジュール動作
nuxt.config.js の互換性
Options API のサポート
Nuxt2 への新機能取り込み
Nitro
Composition API
Nuxt CLI および DevTools
段階的アップグレード
第二部 技術編
技術選択
Vue3
ビルダ・バンドラとして Webpack5 および Vite
トランスパイラとして esbuild
SSR 実現に h3
vue-router
h3
H3 is a minimal h(ttp) framework built for high performance and portability
ポータブル
あらゆる環境で実行
静的ファイルを提供
コンパーチブル
c.f. Express
Webpack 4 廃止
Webpack
CommonJS
Node.jsの文脈で制定されたモジュールシステム
レガシーブラウザ対応(babel、polyfill)はこの上に築かれている
Rollup、esbuild
ES Modules
ES6 から導入されたモジュールシステム
TS対応の問題がしばらくあった
Snowpack, Vite
ノーバンドル
ブラウザがバンドル
ビルドには rollup や esbuild を使用
第三部 導入編
プロジェクト作成
npx nuxi init {プロジェクト名}
Nuxt2.x からの移行
1. yarn.lock(package.json)から nuxt を削除し、最新版の nuxt-edge に置き換え
code:json
- "nuxt": "^2.15.0"
+ "nuxt-edge": "latest"
2. yarn install
3. yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge
4. nuxt.config を更新
code:ts
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
// Your existing configuration
})
5. CommonJS シンタックスを削除
require や module.exports など
6. 以下のモジュールを削除
@nuxt/content
nuxt-vite
@nuxtjs/typescript-build
@nuxtjs/typescript-runtime and nuxt-ts
@nuxt/nitro
@nuxtjs/composition-api
ディレクトリ構成
app.vue
最小構成
code:html
<template>
<h1>Hello World!</h1>
</template>
/pages を設ける場合
code:html
<template>
<div>
<NuxtPage/>
</div>
</template>
defineComponent は不要に
components/
nuxt/components v2 仕様の自動インポートが適用される模様
pages/
オプトインに
_slug ではなく [slug] に
code:txt
-| pages/
---| index.vue
route なしで直接 template 内で参照できる
code:vue
<template>
{{ $route.params.group }}
{{ $route.params.id }}
</template>
plugins/
.server と .client をファイル名に指定可能
public/
static/ から名称変更
server/
APIが書ける
code:ts
export default (req, res) => 'Hello World'
code:ts
export default async (req, res) => {
await someAsyncFunction()
return {
someData: true
}
}
code:ts
import type { IncomingMessage, ServerResponse } from 'http'
export default async (req: IncomingMessage, res: ServerResponse) => {
res.statusCode = 200
res.end('Works!')
}
データフェッチ
useAsyncData
第1引数:ユニークな key
第2引数:値を返すフェッチ関数
第3引数:オプション
defer: サスペンス(フェッチが完了するまでページ遷移をブロック)
server: サーバーサイドでのフェッチ
transform: マッピング関数などを設定
pick: 値のうち実際に利用するプロパティを指定
パフォーマンス向上
code:vue
<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>
<template>
Page visits: {{ data }}
</template>
useFetch
ページ、コンポーネント、プラグインいずれでも利用可能
useAsyncData と $fetch の便利ラッパー
code:vue
<script setup>
const { data } = await useFetch('/api/count')
</script>
<template>
Page visits: {{ data.count }}
</template>
感想
レガシーブラウザを捨てたことで大幅な軽量化・高速化に成功
webpack 4 の代わりに vite/rollup 採用で DX 向上
フルスタック・サーバーレス志向。JAMStack も意識
結果として NextJS に寄ってきてる?そうでもない?