うぇぶちぇんじろぐ2021

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

うぇぶちぇんじろぐ2021

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

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

TypeScript

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


1
export default defineNuxtConfig({
2
  typescript: {
3
    strict: true
4
  }
5
})

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

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
}

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
})

今後の展開

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
})