Demystifying Nuxt Bridge

Vue Fes 2023
wattanx

Transcript

1. STORES 株式会社 Demystifying Nuxt Bridge 〜 あなたがまだ見ぬ可能性とその活用法〜
2. 目次 2 自己紹介 はじめに Nuxt Bridge を使った Nuxt 3 移行 Nuxt Bridge でもできない Nuxt 3 移行 STORES の事例 まとめ 01 02 03 04 05 06
3. 自己紹介
4. 渡邊 涼太（wattanx） ・STORES 株式会社 ソフトウェアエンジニア。 ・STORES ネットショップの開発に関わっている。 ・猫が好き。大阪在住。 ・Nuxt Bridge のコアコントリビュータ。 ・https://twitter.com/pontaxx 自己紹介
5. はじめに
6. はじめに（今日話すこと） どのように Nuxt Bridge を導入して Nuxt 3 移行を進めるのがよいかを話します
7. はじめに（今日話さないこと） Nuxt 2 の機能や Nuxt 3 の機能はあまり深掘りません
8. はじめに Nuxt Bridge を知っていますか？
9. はじめに • https://github.com/nuxt/bridge • Nuxt 3 と上方互換性のあるライブラリ (Nuxt 3 の機能の一部が Nuxt 2 でも使えるようなる) Nuxt Bridge とは
10. はじめに Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
11. はじめに Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
12. はじめに Nuxt 3 との差分を減らし、 Nuxt 3 への移行の負担を減らす
13. はじめに どれくらい Nuxt 3 との差分が少なくなるのか
14. はじめに https://github.com/wattanx/nuxt-migration-example
15. はじめに Nuxt 2 の状態で どれくらい Nuxt 3 への移行が進められるか
16. はじめに Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでも一部できる
17. はじめに Nuxt Bridge の導入って何をするのか Nuxt Bridge 入れた Nuxt 3 移行ってどうやるのか
18. Nuxt Bridge を使った Nuxt 3 移行
19. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入) Nuxt Bridge のインストール 〜 設定完了まで
20. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入) • Nuxt 2 を最新バージョンにし、Nuxt Bridge をインストールする RCでも良い
21. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入) • defineNuxtConfig つかうように修正する • bridge オプションを false にして config を設定する
22. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入) • nuxt コマンドを nuxt2 コマンドに変更する
23. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入) • @nuxt/cli (nuxi) が提供する nuxt コマンドと競合するので、nuxt2 に変更する必要がある。 ◦ Nuxt 3 では nuxt コマンドで nuxi を実行できるようにしている • 変更しない場合、nuxt 3 の nuxt コマンドだと認識されてしまう場合 がある。
24. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入) nuxt2 コマンドを実行してみてください 今までどおり Nuxt 2 のプロジェクトが動作するはず
25. Nuxt Bridge を使った Nuxt 3 移行 ここからは Nuxt 2 の状態でできる Nuxt 3 移行
26. Nuxt Bridge を使った Nuxt 3 移行 • TypeScript • Plugins and Middleware • Migrate New Composition API • Migrate Legacy Composition API • Meta Tags • Runtime Config • Nitro • Vite
27. Nuxt Bridge を使った Nuxt 3 移行 全部一度に対応する必要はない 少しずつ移行できる（Nuxt Bridge のメリット）
28. Nuxt Bridge を使った Nuxt 3 移行（TypeScript） • https://nuxt.com/docs/bridge/typescript • Nuxt 3 では @nuxt/typescript-build や @nuxt/typescript-runtime といったModule は もう必要ありません。 • Nuxt 3 と同じように TypeScript が利用できる。 TypeScript
29. • bridge.typescript オプションを true にする Nuxt Bridge を使った Nuxt 3 移行（TypeScript）
30. Nuxt Bridge を使った Nuxt 3 移行（TypeScript） • @nuxt/typescript-build や @nuxt/typescript-runtime などの Module を削除する • tsconfig.json を修正する
31. Nuxt Bridge を使った Nuxt 3 移行（TypeScript） • tsconfig を拡張したい場合、nuxt.config にて設定する必要がある。 ◦ https://nuxt.com/docs/api/configuration/nuxt-config#tsconfig • compilerOptions.paths を拡張したいときは、nuxt.config の alias に設定する必要がある。 ◦ https://nuxt.com/docs/api/configuration/nuxt-config#alias 注意点
32. Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware） • https://nuxt.com/docs/bridge/plugins-and-middleware • Nuxt 2 と Nuxt 3 では Plugins と Middleware の設定方法が大 きく変わる。 • Nuxt 3 と同じ書き方で Plugins や Middleware が設定できる。 Plugins and Middleware
33. Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware） defineNuxtPlugin に変更する
34. Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware） • Nuxt 3 では plugins ディレクトリの一番上の階層に配置され たファイルしか認識されない。 ◦ https://nuxt.com/docs/guide/directory-structure/p lugins#which-files-are-registered • Nuxt 2 のうちにディレクトリ構造を見直しておいた方がよい Plugins
35. Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware） defineNuxtRouteMiddleware に変更する
36. Nuxt Bridge を使った Nuxt 3 移行（Migrate New Composition API） • https://nuxt.com/docs/bridge/nuxt3-compatible-api • Nuxt2 では、@nuxtjs/composition-api を利用していた • Nuxt 3 では利用できないので、別の関数などに書き換える 必要がある。 • Nuxt 3 で提供される useNuxtApp などの関数は、Nuxt Bridge でも利用できる。 (Auto Import も使える) Migrate New Composition API
37. Nuxt Bridge を使った Nuxt 3 移行（Migrate New Composition API） 量が多いので一部を抜粋 • useContext -> useNuxtApp • Auto Import を使わない場合
38. Nuxt Bridge を使った Nuxt 3 移行（Migrate New Composition API） • @nuxtjs/composition-api と併用できる。 • 1ページずつ、1コンポーネントずつみたいなかたちですこしずつ移行 できる。 Tips
39. Nuxt Bridge を使った Nuxt 3 移行 Nuxt 3 との差分少なくなってますよね
40. Nuxt Bridge を使った Nuxt 3 移行（Migrate Legacy Composition API） • https://nuxt.com/docs/bridge/bridge-composition-api • @nuxtjs/composition-api の機能は全部 Nuxt Bridge に入った • この Migration を行わずに Migrate New Composition API を やってもいい Migrate Legacy Composition API
41. Nuxt Bridge を使った Nuxt 3 移行（Migrate Legacy Composition API） bridge.capi オプションを true にする
42. Nuxt Bridge を使った Nuxt 3 移行（Migrate Legacy Composition API） • @vue/composition-api や @nuxtjs/composition-api などの Module を削除する • 一部の関数は削除されていたり変更があるので対応する
43. Nuxt Bridge を使った Nuxt 3 移行（Migrate Legacy Composition API） • @nuxtjs/composition-api という alias が Nuxt Bridge により提供 されているので、import文 を書き換える必要はなし (.nuxt/tsconfig.json)
44. Nuxt Bridge を使った Nuxt 3 移行 • TypeScript • Plugins and Middleware • Migrate New Composition API • Migrate Legacy Composition API • Meta Tags（次はここの説明） • Runtime Config • Nitro • Vite
45. Nuxt Bridge を使った Nuxt 3 移行 全部一度に対応する必要はない 少しずつ移行できる（Nuxt Bridge のメリット）
46. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags） • https://nuxt.com/docs/bridge/meta • Nuxt 2 では useMeta という Composables をつかっていた。 • Nuxt 3 からは useHead に変更されている。 • Nuxt 3 同様 useHead が利用できる。 (@unhead/vue を使用) Meta Tags
47. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags） bridge.meta オプションを true にする
48. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags） config を変更する app.head に変更する
49. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags） useMeta ではなく useHead を使う (Options API の場合は defineNuxtComponent を使う)
50. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags） nuxt.config の titleTemplate は関数で設定できないので注意 ↓のようなコードを /layouts に含める必要がある。 注意点
51. Nuxt Bridge を使った Nuxt 3 移行（Nitro） • https://nuxt.com/docs/bridge/nitro • Nuxt 3 から Nitro というサーバーエンジンに変更されている。 • Nuxt Bridge でも Nitro が利用できる Nitro
52. Nuxt Bridge を使った Nuxt 3 移行（Nitro） bridge.nitro オプションを true にする
53. Nuxt Bridge を使った Nuxt 3 移行（Nitro） • @nuxt/nitro を削除する • nuxi をインストールする • .gitignore に .output を追加する
54. Nuxt Bridge を使った Nuxt 3 移行（Nitro） • nuxt2 コマンドから nuxi コマンドに変更する • target: static なら nuxi generate
55. Nuxt Bridge を使った Nuxt 3 移行（Nitro） nuxi dev コマンドを実行してみてください
56. Nuxt Bridge を使った Nuxt 3 移行（Nitro） • ~/server/middleware や ~/server/api も利用できる https://nuxt.com/docs/guide/directory-structure/server
57. Nuxt Bridge を使った Nuxt 3 移行（Nitro） • Nitro にすると動かなくなる Nuxt Module がある。 ◦ 例えば @nuxtjs/proxy 注意点
58. Nuxt Bridge を使った Nuxt 3 移行（Runtime Config） • https://nuxt.com/docs/bridge/runtime-config • Nuxt 2 では publicRuntimeConfig や privateRuntimeConfig • Nuxt 3 では runtimeConfig に変更された • Nuxt Bridge でも runtimeConfig が利用できる。 (しかし Nitro を使える状態にあることが前提) Runtime Config
59. Nuxt Bridge を使った Nuxt 3 移行（Runtime Config） nuxt.config を修正する
60. Nuxt Bridge を使った Nuxt 3 移行（Runtime Config） useRuntimeConfig で nuxt.config で設定した値が使える
61. Nuxt Bridge を使った Nuxt 3 移行（Vite） • https://nuxt.com/docs/bridge/vite • Nuxt 3 から webpack と Vite も選択できる。 • Nuxt Bridge でも Vite が利用できる。 (ただし、Nitro が使える状態であることが前提) Vite
62. Nuxt Bridge を使った Nuxt 3 移行（Vite） bridge.vite オプションを true にする
63. Nuxt Bridge を使った Nuxt 3 移行（Vite） • require を使った 動的 Asset URL が使えない ◦ :src=”require(‘@/images/hoge.png’)”のようなコード • 使えなくなる Nuxt Module がある。(@nuxt/sentry など) • 他にもあるかも... Vite に移行するならやることいっぱいある
64. Nuxt Bridge を使った Nuxt 3 移行 ほぼ Nuxt 3 です
65. Nuxt Bridge でもできない Nuxt 3 移行
66. Nuxt Bridge でもできない Nuxt 3 移行 Nuxt 3 への移行ガイドを参考に
67. Nuxt Bridge でもできない Nuxt 3 移行 • Configuration • Vue 3 への移行 • Vuex • Pages and Layouts
68. Nuxt Bridge でもできない Nuxt 3 移行 • https://nuxt.com/docs/migration/configuration • buildModules -> modules へ置き換え • router.extendRoutes -> pages:extend hook Configuration
69. Nuxt Bridge でもできない Nuxt 3 移行 • https://v3-migration.vuejs.org/ • やるしかない Vue 3 への移行
70. Nuxt Bridge でもできない Nuxt 3 移行 • https://nuxt.com/docs/migration/configuration#vuex • Nuxt 2 では store ディレクトリを使うだけで Vuex が使えた • Nuxt 3 では store ディレクトリがサポートされなくなる • Nuxt 3 では Pinia の使用が推奨されている。 (useState でも代替可能) Vuex
71. Nuxt Bridge でもできない Nuxt 3 移行 Nuxt 3 でも store ディレクトリを使って Vuex を使えるようにする module がある https://github.com/wattanx/nuxt-vuex-module
72. Nuxt Bridge でもできない Nuxt 3 移行 • https://nuxt.com/docs/migration/pages-and-layouts • app.vue の作成 • Layout の <Nuxt /> を <slot /> に変更する • Dynamic Routes ◦ 例えば _id.vue を [id].vue に変更する必要がある • Nested Routes ◦ 例えば <NuxtChild /> を <NuxtPage /> に変更する必要がある Pages and Layouts
73. Nuxt Bridge でもできない Nuxt 3 移行 • https://nuxt.com/docs/api/utils/define-page-meta#definepagemeta • middleware や layout の指定が Component Option からできな くなる。 • layout と middleware のみ Nuxt Bridge でもサポートしている • layout と middleware 以外の移行作業が必要 definePageMeta
74. Nuxt Bridge でもできない Nuxt 3 移行 Nuxt Bridge でもできそうならぜひ Pull Request を
75. STORES の事例
76. STORES の事例 自分でつくれる、 本格的なネットショップ むずかしい知識や技術いらずで 自分だけのネットショップをかんたんに。
77. STORES の事例 ネットショップを開設した事業者が触る 管理画面を Nuxt 3 に移行しようとしている
78. STORES の事例（なぜ Nuxt 3 へ移行するのか） Vue 3 使いたい
79. STORES の事例（なぜ Nuxt 3 へ移行するのか） Nuxt 2 の EOL は 2024/6/30
80. STORES の事例 STORES はどのような順番で進めているのか
81. STORES の事例
82. STORES の事例
83. STORES の事例 • TypeScript • Migrate Legacy Composition API ◦ 必要だと思ってたので対応した • Migrate New Composition API • Meta Tags • Plugins and Middleware • Nitro（これから） • Runtime Config（これから） Nuxt Bridge を使った Nuxt 3 移行
84. STORES の事例 • Vitest への移行 • Vue 2.7 移行 • Vue 3 移行 ◦ Vue 2 の状態でできる移行を先にやる。 ▪ Vue Test Utils の wrapper を作成したり極力差分を減らす ようにしている。 ◦ 社内ライブラリの Vue 3 移行を並行して進める。 Nuxt Bridge を使った Nuxt 3 移行以外
85. STORES の事例 • ネットショップ管理画面の Nuxt Bridge を使った Nuxt 3 移行 ◦ Nitro ◦ Runtime Config ◦ 一旦 webpack で動かす予定なので Vite には移行しない • ネットショップ管理画面の Nuxt Bridge ではできない Nuxt 3 移行 あとなにが残っているのか
86. STORES の事例 おすすめの移行方法
87. STORES の事例 • 以下の対応を行う。(どれからやってもいい、並行して進めてもいい) ◦ TypeScript ◦ Migrate New Composition API ◦ Plugins and Middleware ◦ Meta Tags ◦ Nitro • Nuxt Bridge ではできない Nuxt 3 移行をする 我々が考えるおすすめの移行方法
88. STORES の事例 • Vue 3 移行も並行で進めるのが良い。 ◦ Vue 2 の状態でできる移行がある • Nuxt Modules が Nuxt 3 に対応しているのか調査しておくのが良い。 ◦ 自作しなければならない場合があるため。 • script setup への移行も並行できると良い。 ◦ https://wattanx-converter.vercel.app/vue-composition-converter/ ◦ https://wattanx-converter.vercel.app/vue-script-setup-converter/ 我々が考えるおすすめの移行方法
89. まとめ
90. まとめ Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
91. まとめ Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
92. まとめ Nuxt 3 との差分を減らし、 Nuxt 3 への移行の負担を減らす
93. まとめ 少しずつ Nuxt 3 に向けたマイグレーションができるのが Nuxt Bridge の良いところ
94. まとめ 紹介した移行方法がすべてではない
95. まとめ より良い方法があればぜひ Pull Request を
96. まとめ 今日話したことは全部ドキュメントに書きました https://nuxt.com/docs/bridge/overview
97. おまけ いまから Nuxt Bridge RC.2 をリリースします