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 からの移行

code:json

- "nuxt": "^2.15.0"

+ "nuxt-edge": "latest"

4. nuxt.config を更新

code:ts

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({

// Your existing configuration

})

5. CommonJS シンタックスを削除

6. 以下のモジュールを削除

@nuxt/content

nuxt-vite

@nuxtjs/typescript-build

@nuxt/nitro

@nuxtjs/composition-api

ディレクトリ構成

app.vue

最小構成

code:html

<template>

<h1>Hello World!</h1>

</template>

/pages を設ける場合

code:html

<template>

<div>

<NuxtPage/>

</div>

</template>

components/

nuxt/components v2 仕様の自動インポートが適用される模様

pages/

オプトインに

code:txt

-| pages/

---| index.vue

code:vue

<template>

{{ $route.params.group }}

{{ $route.params.id }}

</template>

plugins/

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

第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

ページ、コンポーネント、プラグインいずれでも利用可能

code:vue

<script setup>

const { data } = await useFetch('/api/count')

</script>

<template>

Page visits: {{ data.count }}

</template>

感想

レガシーブラウザを捨てたことで大幅な軽量化・高速化に成功

webpack 4 の代わりに vite/rollup 採用で DX 向上

フルスタック・サーバーレス志向。JAMStack も意識

結果として NextJS に寄ってきてる？そうでもない？