このページ内容は2021年1月21日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
Nuxt3

Nuxt3はVue3.xが使えるVueのフレームワークです。Vue3.xではdata, computed, mounted, methodなどをsetup関数内で書けるようになったComposition APIcomposition_apiや複数のルートノード (template) が使えるFragmentsnuxt3_fragments, モーダルの作成に便利なTeleportnuxt3_teleportなどが使えるようになりました。その他の新機能についてはこちらnuxt3_featuresで確認できます。

以下ではNuxt3になってできるようになった機能について説明します。

link
TypeScript

Nuxt3からはデフォルトでTypeScriptが使えるようになりましたnuxt3_ts。StoreやPlugin周りのだけでなく、Vueファイル内でも<script lang="ts">を指定することでTypeScriptを使うことができます。設定ファイルで以下を追記することで、型をより安全にできます。

1
export default defineNuxtConfig({
2
typescript: {
3
strict: true
4
}
5
})
link
APIのサポート

Nuxt3からはNextjsのようなAPIを作れるようになりました。ルートディレクトリにserver/api/xxx.tsファイルを作成し、関数をexportすることで利用できます。すべてのリクエストで実行したい処理があるときは、server/middleware/xxx.tsファイルを作成することで処理できます。

~/server/api/count.ts
1
let counter = 0
2
export default () => {
3
counter++
4
return JSON.stringify(counter)
5
}
1
$ curl localhost:3000/api/count
2
1
link
CDN Edge上でのSSR

Nuxt3は設定ファイルにデプロイ形式を指定でき、AWS LambdaやCloudflare Worker上に簡単にデプロイできるようになりました。以前まではExpress上にNuxtを起動できないと無理だった部分が、Nuxtだけでできるようになりましたnuxt3_preset

nuxt.config.ts
1
// AWS Lambda, Netlify Function用にビルドしたいとき
2
export default defineNuxtConfig({
3
nitro: {
4
preset: 'lambda'
5
}
6
})
1
// Cloudflare Workerで動くようにビルドしたいとき
2
export default defineNuxtConfig({
3
nitro: {
4
preset: 'worker'
5
}
6
}
link
Nuxt2から3への緩やかな移行を支援する Nuxt Bridge

Nuxt3では従来のプラグインやモジュールを引き継いで動かすことができるそうです。Nuxt2でVue3.xのComposition APIを有効にしたり、Nuxt3の新しいサーバーエンジンであるNitroを試したりできるそうですnuxt3_bridge

1
// nuxt/bridgeをインストールして、nuxt.config.js で設定して使う
2
3
import { defineNuxtConfig } from '@nuxt/bridge'
4
5
export default defineNuxtConfig({
6
// Your existing configuration
7
})
link
今後の展開

GitHubのリポジトリのDiscussionにて、パスごとにビルド方式を変える機能が議論されていますnuxt3_path_build。ホスティングサービスにデプロイしたとして、どうやって動かすかは分かりませんが、個人的に面白い機能だと感じました。

1
export default defineNuxtConfig({
2
routes: {
3
'/': { prerender: true }, // Once per build (via builder)
4
'/blog/*': { static: true }, // Once on-demand per build (via lambda)
5
'/stats/*': { swr: '10 min' }, // Once on-demand each 10 minutes (via lambda)
6
'/admin/*': { ssr: false }, // Client-Side rendered
7
'/react/*': { redirect: '/vue' }, // Redirect Rules
8
}
9
})

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
サイトマップ
Notes
業務や趣味での気づき・メモ
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧