Demystifying Nuxt Bridge

Vue Fes 2023
wattanx

Transcript

1. STORES 株式会社
   Demystifying Nuxt Bridge
   〜 あなたがまだ見ぬ可能性とその活用法〜
   

   View Slide

2. 目次
   2
   自己紹介
   はじめに
   Nuxt Bridge を使った Nuxt 3 移行
   Nuxt Bridge でもできない Nuxt 3 移行
   STORES の事例
   まとめ
   01
   02
   03
   04
   05
   06
   

   View Slide

3. 自己紹介
   

   View Slide

4. 渡邊 涼太（wattanx）
   ・STORES 株式会社 ソフトウェアエンジニア。
   ・STORES ネットショップの開発に関わっている。
   ・猫が好き。大阪在住。
   ・Nuxt Bridge のコアコントリビュータ。
   ・https://twitter.com/pontaxx
   自己紹介
   

   View Slide

5. はじめに
   

   View Slide

6. はじめに（今日話すこと）
   どのように Nuxt Bridge を導入して
   Nuxt 3 移行を進めるのがよいかを話します
   

   View Slide

7. はじめに（今日話さないこと）
   Nuxt 2 の機能や Nuxt 3 の機能はあまり深掘りません
   

   View Slide

8. はじめに
   Nuxt Bridge を知っていますか？
   

   View Slide

9. はじめに
   ● https://github.com/nuxt/bridge
   ● Nuxt 3 と上方互換性のあるライブラリ
   (Nuxt 3 の機能の一部が Nuxt 2 でも使えるようなる)
   Nuxt Bridge とは
   

   View Slide

10. はじめに
    Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
    

    View Slide

11. はじめに
    Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
    

    View Slide

12. はじめに
    Nuxt 3 との差分を減らし、
    Nuxt 3 への移行の負担を減らす
    

    View Slide

13. はじめに
    どれくらい Nuxt 3 との差分が少なくなるのか
    

    View Slide

14. はじめに
    https://github.com/wattanx/nuxt-migration-example
    

    View Slide

15. はじめに
    Nuxt 2 の状態で
    どれくらい Nuxt 3 への移行が進められるか
    

    View Slide

16. はじめに
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでもできる
    Bridgeでも一部できる
    

    View Slide

17. はじめに
    Nuxt Bridge の導入って何をするのか
    Nuxt Bridge 入れた Nuxt 3 移行ってどうやるのか
    

    View Slide

18. Nuxt Bridge を使った Nuxt 3 移行
    

    View Slide

19. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入)
    Nuxt Bridge のインストール 〜 設定完了まで
    

    View Slide

20. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入)
    ● Nuxt 2 を最新バージョンにし、Nuxt Bridge をインストールする
    RCでも良い
    

    View Slide

21. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入)
    ● defineNuxtConfig つかうように修正する
    ● bridge オプションを false にして config を設定する
    

    View Slide

22. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入)
    ● nuxt コマンドを nuxt2 コマンドに変更する
    

    View Slide

23. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入)
    ● @nuxt/cli (nuxi) が提供する nuxt コマンドと競合するので、nuxt2
    に変更する必要がある。
    ○ Nuxt 3 では nuxt コマンドで nuxi を実行できるようにしている
    ● 変更しない場合、nuxt 3 の nuxt コマンドだと認識されてしまう場合
    がある。
    

    View Slide

24. Nuxt Bridge を使った Nuxt 3 移行 (Nuxt Bridge の導入)
    nuxt2 コマンドを実行してみてください
    今までどおり Nuxt 2 のプロジェクトが動作するはず
    

    View Slide

25. Nuxt Bridge を使った Nuxt 3 移行
    ここからは Nuxt 2 の状態でできる Nuxt 3 移行
    

    View Slide

26. Nuxt Bridge を使った Nuxt 3 移行
    ● TypeScript
    ● Plugins and Middleware
    ● Migrate New Composition API
    ● Migrate Legacy Composition API
    ● Meta Tags
    ● Runtime Config
    ● Nitro
    ● Vite
    

    View Slide

27. Nuxt Bridge を使った Nuxt 3 移行
    全部一度に対応する必要はない
    少しずつ移行できる（Nuxt Bridge のメリット）
    

    View Slide

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
    

    View Slide

29. ● bridge.typescript オプションを true にする
    Nuxt Bridge を使った Nuxt 3 移行（TypeScript）
    

    View Slide

30. Nuxt Bridge を使った Nuxt 3 移行（TypeScript）
    ● @nuxt/typescript-build や @nuxt/typescript-runtime などの
    Module を削除する
    ● tsconfig.json を修正する
    

    View Slide

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
    注意点
    

    View Slide

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
    

    View Slide

33. Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware）
    defineNuxtPlugin
    に変更する
    

    View Slide

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
    

    View Slide

35. Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware）
    defineNuxtRouteMiddleware に変更する
    

    View Slide

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
    

    View Slide

37. Nuxt Bridge を使った Nuxt 3 移行（Migrate New Composition API）
    量が多いので一部を抜粋
    ● useContext -> useNuxtApp
    ● Auto Import を使わない場合
    

    View Slide

38. Nuxt Bridge を使った Nuxt 3 移行（Migrate New Composition API）
    ● @nuxtjs/composition-api と併用できる。
    ● 1ページずつ、1コンポーネントずつみたいなかたちですこしずつ移行
    できる。
    Tips
    

    View Slide

39. Nuxt Bridge を使った Nuxt 3 移行
    Nuxt 3 との差分少なくなってますよね
    

    View Slide

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
    

    View Slide

41. Nuxt Bridge を使った Nuxt 3 移行（Migrate Legacy Composition API）
    bridge.capi オプションを true にする
    

    View Slide

42. Nuxt Bridge を使った Nuxt 3 移行（Migrate Legacy Composition API）
    ● @vue/composition-api や @nuxtjs/composition-api などの
    Module を削除する
    ● 一部の関数は削除されていたり変更があるので対応する
    

    View Slide

43. Nuxt Bridge を使った Nuxt 3 移行（Migrate Legacy Composition API）
    ● @nuxtjs/composition-api という alias が Nuxt Bridge により提供
    されているので、import文 を書き換える必要はなし
    (.nuxt/tsconfig.json)
    

    View Slide

44. Nuxt Bridge を使った Nuxt 3 移行
    ● TypeScript
    ● Plugins and Middleware
    ● Migrate New Composition API
    ● Migrate Legacy Composition API
    ● Meta Tags（次はここの説明）
    ● Runtime Config
    ● Nitro
    ● Vite
    

    View Slide

45. Nuxt Bridge を使った Nuxt 3 移行
    全部一度に対応する必要はない
    少しずつ移行できる（Nuxt Bridge のメリット）
    

    View Slide

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
    

    View Slide

47. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags）
    bridge.meta オプションを true にする
    

    View Slide

48. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags）
    config を変更する
    app.head に変更する
    

    View Slide

49. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags）
    useMeta ではなく useHead を使う
    (Options API の場合は defineNuxtComponent を使う)
    

    View Slide

50. Nuxt Bridge を使った Nuxt 3 移行（Meta Tags）
    nuxt.config の titleTemplate は関数で設定できないので注意
    ↓のようなコードを /layouts に含める必要がある。
    注意点
    

    View Slide

51. Nuxt Bridge を使った Nuxt 3 移行（Nitro）
    ● https://nuxt.com/docs/bridge/nitro
    ● Nuxt 3 から Nitro というサーバーエンジンに変更されている。
    ● Nuxt Bridge でも Nitro が利用できる
    Nitro
    

    View Slide

52. Nuxt Bridge を使った Nuxt 3 移行（Nitro）
    bridge.nitro オプションを true にする
    

    View Slide

53. Nuxt Bridge を使った Nuxt 3 移行（Nitro）
    ● @nuxt/nitro を削除する
    ● nuxi をインストールする
    ● .gitignore に .output を追加する
    

    View Slide

54. Nuxt Bridge を使った Nuxt 3 移行（Nitro）
    ● nuxt2 コマンドから nuxi コマンドに変更する
    ● target: static なら nuxi generate
    

    View Slide

55. Nuxt Bridge を使った Nuxt 3 移行（Nitro）
    nuxi dev コマンドを実行してみてください
    

    View Slide

56. Nuxt Bridge を使った Nuxt 3 移行（Nitro）
    ● ~/server/middleware や ~/server/api も利用できる
    https://nuxt.com/docs/guide/directory-structure/server
    

    View Slide

57. Nuxt Bridge を使った Nuxt 3 移行（Nitro）
    ● Nitro にすると動かなくなる Nuxt Module がある。
    ○ 例えば @nuxtjs/proxy
    注意点
    

    View Slide

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
    

    View Slide

59. Nuxt Bridge を使った Nuxt 3 移行（Runtime Config）
    nuxt.config を修正する
    

    View Slide

60. Nuxt Bridge を使った Nuxt 3 移行（Runtime Config）
    useRuntimeConfig で nuxt.config で設定した値が使える
    

    View Slide

61. Nuxt Bridge を使った Nuxt 3 移行（Vite）
    ● https://nuxt.com/docs/bridge/vite
    ● Nuxt 3 から webpack と Vite も選択できる。
    ● Nuxt Bridge でも Vite が利用できる。
    (ただし、Nitro が使える状態であることが前提)
    Vite
    

    View Slide

62. Nuxt Bridge を使った Nuxt 3 移行（Vite）
    bridge.vite オプションを true にする
    

    View Slide

63. Nuxt Bridge を使った Nuxt 3 移行（Vite）
    ● require を使った 動的 Asset URL が使えない
    ○ :src=”require(‘@/images/hoge.png’)”のようなコード
    ● 使えなくなる Nuxt Module がある。(@nuxt/sentry など)
    ● 他にもあるかも...
    Vite に移行するならやることいっぱいある
    

    View Slide

64. Nuxt Bridge を使った Nuxt 3 移行
    ほぼ Nuxt 3 です
    

    View Slide

65. Nuxt Bridge でもできない Nuxt 3 移行
    

    View Slide

66. Nuxt Bridge でもできない Nuxt 3 移行
    Nuxt 3 への移行ガイドを参考に
    

    View Slide

67. Nuxt Bridge でもできない Nuxt 3 移行
    ● Configuration
    ● Vue 3 への移行
    ● Vuex
    ● Pages and Layouts
    

    View Slide

68. Nuxt Bridge でもできない Nuxt 3 移行
    ● https://nuxt.com/docs/migration/configuration
    ● buildModules -> modules へ置き換え
    ● router.extendRoutes -> pages:extend hook
    Configuration
    

    View Slide

69. Nuxt Bridge でもできない Nuxt 3 移行
    ● https://v3-migration.vuejs.org/
    ● やるしかない
    Vue 3 への移行
    

    View Slide

70. Nuxt Bridge でもできない Nuxt 3 移行
    ● https://nuxt.com/docs/migration/configuration#vuex
    ● Nuxt 2 では store ディレクトリを使うだけで Vuex が使えた
    ● Nuxt 3 では store ディレクトリがサポートされなくなる
    ● Nuxt 3 では Pinia の使用が推奨されている。
    (useState でも代替可能)
    Vuex
    

    View Slide

71. Nuxt Bridge でもできない Nuxt 3 移行
    Nuxt 3 でも store ディレクトリを使って Vuex を使えるようにする
    module がある
    https://github.com/wattanx/nuxt-vuex-module
    

    View Slide

72. Nuxt Bridge でもできない Nuxt 3 移行
    ● https://nuxt.com/docs/migration/pages-and-layouts
    ● app.vue の作成
    ● Layout の を に変更する
    ● Dynamic Routes
    ○ 例えば _id.vue を [id].vue に変更する必要がある
    ● Nested Routes
    ○ 例えば を に変更する必要がある
    Pages and Layouts
    

    View Slide

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
    

    View Slide

74. Nuxt Bridge でもできない Nuxt 3 移行
    Nuxt Bridge でもできそうならぜひ Pull Request を
    

    View Slide

75. STORES の事例
    

    View Slide

76. STORES の事例
    自分でつくれる、
    本格的なネットショップ
    むずかしい知識や技術いらずで
    自分だけのネットショップをかんたんに。
    

    View Slide

77. STORES の事例
    ネットショップを開設した事業者が触る
    管理画面を Nuxt 3 に移行しようとしている
    

    View Slide

78. STORES の事例（なぜ Nuxt 3 へ移行するのか）
    Vue 3 使いたい
    

    View Slide

79. STORES の事例（なぜ Nuxt 3 へ移行するのか）
    Nuxt 2 の EOL は 2024/6/30
    

    View Slide

80. STORES の事例
    STORES はどのような順番で進めているのか
    

    View Slide

81. STORES の事例
    

    View Slide

82. STORES の事例
    

    View Slide

83. STORES の事例
    ● TypeScript
    ● Migrate Legacy Composition API
    ○ 必要だと思ってたので対応した
    ● Migrate New Composition API
    ● Meta Tags
    ● Plugins and Middleware
    ● Nitro（これから）
    ● Runtime Config（これから）
    Nuxt Bridge を使った Nuxt 3 移行
    

    View Slide

84. STORES の事例
    ● Vitest への移行
    ● Vue 2.7 移行
    ● Vue 3 移行
    ○ Vue 2 の状態でできる移行を先にやる。
    ■ Vue Test Utils の wrapper を作成したり極力差分を減らす
    ようにしている。
    ○ 社内ライブラリの Vue 3 移行を並行して進める。
    Nuxt Bridge を使った Nuxt 3 移行以外
    

    View Slide

85. STORES の事例
    ● ネットショップ管理画面の Nuxt Bridge を使った Nuxt 3 移行
    ○ Nitro
    ○ Runtime Config
    ○ 一旦 webpack で動かす予定なので Vite には移行しない
    ● ネットショップ管理画面の Nuxt Bridge ではできない Nuxt 3 移行
    あとなにが残っているのか
    

    View Slide

86. STORES の事例
    おすすめの移行方法
    

    View Slide

87. STORES の事例
    ● 以下の対応を行う。(どれからやってもいい、並行して進めてもいい)
    ○ TypeScript
    ○ Migrate New Composition API
    ○ Plugins and Middleware
    ○ Meta Tags
    ○ Nitro
    ● Nuxt Bridge ではできない Nuxt 3 移行をする
    我々が考えるおすすめの移行方法
    

    View Slide

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/
    我々が考えるおすすめの移行方法
    

    View Slide

89. まとめ
    

    View Slide

90. まとめ
    Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
    

    View Slide

91. まとめ
    Nuxt 2 のプロジェクトで Nuxt 3 の機能を体験できる
    

    View Slide

92. まとめ
    Nuxt 3 との差分を減らし、
    Nuxt 3 への移行の負担を減らす
    

    View Slide

93. まとめ
    少しずつ Nuxt 3 に向けたマイグレーションができるのが
    Nuxt Bridge の良いところ
    

    View Slide

94. まとめ
    紹介した移行方法がすべてではない
    

    View Slide

95. まとめ
    より良い方法があればぜひ Pull Request を
    

    View Slide

96. まとめ
    今日話したことは全部ドキュメントに書きました
    https://nuxt.com/docs/bridge/overview
    

    View Slide

97. おまけ
    いまから Nuxt Bridge RC.2 をリリースします
    

    View Slide