Nuxt2をNuxt/Bridge対応したかった

rm -rf yarn.lock

nuxt @nuxt/typescript-build を手動で消す

yarn add nuxt-edge@latest

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge typescript

npx nuxi prepare

npx nuxi prepare で型定義生成後、プロジェクトに応じて nuxt.d.ts と nuxt-shims.d.ts を作る
- https://zenn.dev/link/comments/196aa7b7a89dca
nuxt.config.js(ts) で defineNuxtConfig
- import { defineNuxtConfig } from '@nuxt/bridge';
- export default defineNuxtConfig({...})
- 型周りが変わっているものがあるので注意
buildModules から @nuxtjs/composition-api/module を削除
- そのままにすると消せって警告がでてビルドが通らない
- ドキュメントには Remove @nuxtjs/composition-api: Bridge provides a Nuxt 3 compatible composition-api layer and help to remove dependency とあるが代わりに useContext などを得る手段が見当たらないのでそのままにした
- nuxt-edge や @nuxt/bridge からexportされていない
- コミュニティで聞いたら To aid in migration, the import paths remain unchanged from nuxtjs/composition-api って返ってきた
- defineNuxtPlugin などは @nuxt/bridge/dist/runtime/app からインポートできる（後述）
config,plugins のesm化
- ネイティブesm化したためcjsなどの記法がサポートされなくなった
- plugins でもともと Vue.use しかしていないものは末尾に export default {} を足す
.gitignore に .output を追加

ushironoko

nuxt module の対応表がある

特にtailwindcss moduleが非対応なので待つ必要がある。一旦buildModulesから消してビルドすれば通る。

  buildModules: [
    // '@nuxtjs/tailwindcss',
  ],

ushironoko

nuxtjs/sentry も動かなかった

ushironoko

vue-scrollも動かない

ushironoko

~~@nuxtjs/composition-api から defineNuxtPlugin をとっている場合は @nuxt/bridge からとるように修正する必要がある~~
嘘
真実は後述

ushironoko

ないが

ushironoko

#appから読めるらしい

nuxt-edgeに対応した型を使うには以下を一回は叩いている必要がある

npx nuxi prepare

実行すると nuxt.d.ts がプロジェクトルートに生成される。
中身は利用しているmoduleとnuxt-edge本体の型定義がトリプルスラッシュディレクティブで定義されている。

nitroの型を.nuxtからとっている部分があるためパスに注意。

/// <reference path=".nuxt/nitro.d.ts" />
/// <reference path=".nuxt/auto-imports.d.ts" />

既存の nuxt.d.ts がある場合そちらを nuxt-shims.d.ts とかにして別ファイルで管理する。

ushironoko

#app からのimportはなんか動かないので直接することにした
この場合@nuxt/bridgeをdevDependenciesからdependenciesに移動させる必要がある

import { defineNuxtPlugin } from '@nuxt/bridge/dist/runtime';

ushironoko

Nuxt2のinjectを使っている部分はuseStateに置き換える必要があるっぽい

import Vue from 'vue';
import { useState, defineNuxtPlugin } from '@nuxt/bridge/dist/runtime';

export default defineNuxtPlugin((): void => {
  useState('notify', () => Vue.prototype.$notify);
});

@nuxtjs/composition-apiのdefineNuxtPluginと違って引数にcontextやinjectは入ってこない。代わりにuseStateにキーとコールバックを渡して登録する。

https://v3.nuxtjs.org/docs/usage/state

詳細はここら辺

ushironoko

Vuexも現状だと動かない
内部のヘルパー関数で typeof を使用しているところがなぜか死んでいる。

とりあえず自分で適当にパッチを当てれば通る。

node_modules/vuex/dist/vuex.common.js

function isObject (obj) {
  // return obj !== null && typeof obj === 'object'
  return true
}

function unifyObjectStyle (type, payload, options) {
  if (isObject(type) && type.type) {
    options = payload;
    payload = type;
    type = type.type;
  }

  if ((process.env.NODE_ENV !== 'production')) {
    // assert(typeof type === 'string', ("expects string as the type, but found " + (typeof type) + "."));
  }

  return { type: type, payload: payload, options: options }
}

ushironoko

defineNuxtPlugin 内で context などを参照したい場合代わりに useNuxtApp を使う。旧APIから取れたものは legacyNuxt というプロパティに入っている。

import {
  defineNuxtPlugin,
  useNuxtApp,
  useState,
} from '@nuxt/bridge/dist/runtime';

export default defineNuxtPlugin(() => {
  const { legacyNuxt } = useNuxtApp();
  const { context } = legacyNuxt;
  const { app, store, redirect, env, route } = context;
  ...
});