https://v3.nuxtjs.org/getting-started/bridge/
## 背景
[[Nuxt3]]を使いたいが以下の理由で使えない。
- [[Vue3]]未対応ライブラリ([[Vuetify]])がある
- まだオープンβで不安定
今後[[Nuxt2]]から移行する必要もあるため、[[Nuxt Bridge]]を使えないか試してみる。
## 動かしたいライブラリ
- [[Vuetify]]
- [[Composition API]]
## [[Nuxt2でプロジェクト作成]]
```console
$ npm --version
8.1.0
$ node --version
v16.13.0
```
[[create-nuxt-app]]で作成。
```console
$ npm init nuxt-app nuxt-bridge-test
.
.
create-nuxt-app v3.7.1
✨ Generating Nuxt.js project in nuxt-bridge-test
? Project name: nuxt-bridge-test
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: Prettier
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
.
.
```
動作確認。
```console
cd .\nuxt-bridge-test\
npm run dev
```
`http://localhost:3000`でページが表示されればOK。
## [[Nuxt2]]の代わりに[[nuxt-edge]]を使う
ここからが本番。
### [[Nuxt.js]]を[[nuxt-edge]]に切り替える
`package.json`の依存関係を変更。また、`package-lock.json`は削除する。
```diff:package.json
- "nuxt": "^2.15.7",
+ "nuxt-edge": "latest",
```
もう一度インストールして動作確認する。
```console
npm install
npm run dev
```
先ほどと変わっていなければOK。
## [[Nuxt Bridge]]の導入
### インストール
```console
npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
```
### 設定変更
#### コマンドの変更
`package.json`の`scripts`を変更する。`nuxt`コマンドの代わりに[[Nuxi]]を使ったり、`.mjs`ファイルを実行する方式に変わっている。
```diff:package.json
"scripts": {
- "dev": "nuxt",
+ "dev": "nuxi dev",
- "build": "nuxt build",
+ "build": "nuxi generate",
- "start": "nuxt start",
+ "start": "node .output/server/index.mjs",
"generate": "nuxt generate",
"test": "jest"
},
```
`nuxt generate`は一旦保留。`target: 'static'`なので`build`は`nuxi generate`。
#### nuxt.configの更新
拡張子を`.ts`に変更。
```console
mv nuxt.config.js nuxt.config.ts
```
`defineNuxtConfig`を使う。
```diff:nuxt.config.ts
import colors from 'vuetify/es5/util/colors'
+ import { defineNuxtConfig } from '@nuxt/bridge'
- export default {
+ export default defineNuxtConfig({
..
..
- }
+ })
```
[[@nuxt.typescript]]の設定は削除する。[^1]
```diff:nuxt.config.ts
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
- // https://go.nuxtjs.dev/typescript
- '@nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
],
```
#### tsconfig.jsonの更新
[[Nuxt.js]]の型定義を追加。
```diff:tsconfig.json
{
+ "extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
```
#### 不要な依存関係の削除
https://v3.nuxtjs.org/getting-started/bridge/#remove-incompatible-and-obsolete-modules
- [[@nuxt.typescript]]
#### .outputを無視
```console
echo .output >> .gitignore
```
#### 補足
今回は不要だが..以下は既存プロジェクトにありそうな削除対象
- [[CommonJS]]形式の`import`/`export`
- `__dirname`や`__filename`
- [[Nuxt Composition API|@nuxt/composition-apij]]
## 動作確認
まずは実行。
```console
$ npm run dev
>
[email protected] dev
> nuxi dev
'nuxi' is not recognized as an internal or external command,
operable program or batch file.
```
タイミング悪くバグを踏んでしまった模様..。
- [Nuxi not runnable via npx · Issue \#1617 · nuxt/framework](https://github.com/nuxt/framework/issues/1617)
- ℹ️ #2021/11/03 時点の[[Nuxt Bridge]]最新版では解消済み
`npx`を使わずに進める。
```console
node node_modules/nuxi/bin/nuxi.mjs dev
```
先ほどと同じように画面が出ればOK。
### ホットリロード効かない問題
> deleted...
### [[Node.js]]のバージョン指定Warningについて
今回使用している[[Node.js]]のバージョンは正式にサポートされていないというエラーが出る。
> WARN Current version of Node.js (16.13.0) is unsupported and might cause issues.
> Please upgrade to a compatible version (^14.16.0 || ^16.11.0 || ^17.0.0).
ただ、[[セマンティックバージョニング]]的に`16.13.0`は`^16.11.0`を満たしているはず。調べてみたら不具合のようだ。
- [node version detection is warning on compatible version · Issue \#1586 · nuxt/framework](https://github.com/nuxt/framework/issues/1586)
- ℹ️ #2021/11/03 時点の[[Nuxt Bridge]]最新版では解消済み
せっかくなので、[[Volta]]を使って[[Node.js]]バージョンを指定しておく。
```console
volta pin node@lts
```
[^1]: 削除しないと `FATAL Please remove @nuxt/typescript-build from buildModules or set bridge.typescript: false to avoid conflict with bridge.`のようなエラーが出る
## [[Composition API]]と[[script setup]]
[[Composition API]]と[[script setup]]の動作をまとめて確認する。`index.vue`にカウントアップUIを実装する。
```ts:index.vue
<script setup lang="ts">
import { computed, ref } from '@vue/composition-api'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
const handleClick = () => {
count.value++
}
</script>
<template>
<v-row justify="center" align="center">
<v-col cols="12" sm="8" md="6">
<v-card>
<v-card-title class="headline">タイトル</v-card-title>
<v-card-text>
<ul>
<li>カウント: {{ count }}</li>
<li>カウント2倍: {{ doubleCount }}</li>
</ul>
</v-card-text>
<v-card-actions>
<v-btn @click="handleClick">カウントアップ</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</template>
```
これは動作したので基本的な機能は問題なさそう。
## パッケージング
```console
nuxi generate
```
## トラブルシューティング
### nuxi generateのエラー
> [!add] #2022/07/27 追記
> #2022/07/09 の対応で発生しなくなった。
`nuxi generate`でリリース版が`.output\public\`に出力される。が直後にエラーが出る。`ssr: false`だと問題があるらしい。
> [!error]- SSRがオフでビルドエラー
> [[📝Nuxt Bridgeでnuxt.configのssrをfalseにするとnuxt(nuxi) generateに失敗する]] を参照
### [[Nuxt Bridge]]を最新にアップデートしたらビルドエラー
[[nuxt-edge]]も忘れず最新にする。
```console
npm i nuxt-edge@latest
```
また、`Can't resolve '@vue/composition-api'` のようなエラーになる場合は、どこかのタイミングで[[nuxt-edge]]の[[Vue]]がv2.7にアップロードされた可能性が高い。[[📜nuxt2.15.8 x TypeScript x Electronのプロジェクトでvue.jsを2.7にアップデートしてみた#ビルドしてトライ エラー]] を参考に修正する。
### [[Nitro Engine]]で`nuxi generate`すると以前と成果物の構成が変わってしまう
[[📝Nuxt Bridgeでnuxi generateしてもdistが生成されない]] を参照。