Demystifying Nuxt Bridge

by wattanx

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

はじめに

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Nuxt Bridge を使った Nuxt 3 移行

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Nuxt Bridge を使った Nuxt 3 移行（TypeScript） ● https://nuxt.com/docs/bridge/typescript ● Nuxt 3 では @nuxt/typescript-build や @nuxt/typescript-runtime といったModule はもう必要ありません。 ● Nuxt 3 と同じように TypeScript が利用できる。 TypeScript

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware） deﬁneNuxtPlugin に変更する

Slide 34

Slide 34 text

Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware） ● Nuxt 3 では plugins ディレクトリの一番上の階層に配置されたファイルしか認識されない。 ○ https://nuxt.com/docs/guide/directory-structure/p lugins#which-ﬁles-are-registered ● Nuxt 2 のうちにディレクトリ構造を見直しておいた方がよい Plugins

Slide 35

Slide 35 text

Nuxt Bridge を使った Nuxt 3 移行（Plugins and Middleware） deﬁneNuxtRouteMiddleware に変更する

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Nuxt Bridge を使った Nuxt 3 移行（Runtime Conﬁg） nuxt.conﬁg を修正する

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Nuxt Bridge でもできない Nuxt 3 移行 ● Conﬁguration ● Vue 3 への移行 ● Vuex ● Pages and Layouts

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

STORES の事例

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

STORES の事例

Slide 82

Slide 82 text

STORES の事例

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

まとめ

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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