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 Config ● 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 を削除する ● tsconfig.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) defineNuxtPlugin に変更する

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-files-are-registered ● Nuxt 2 のうちにディレクトリ構造を見直しておいた方がよい Plugins

Slide 35

Slide 35 text

Nuxt Bridge を使った Nuxt 3 移行(Plugins and Middleware) defineNuxtRouteMiddleware に変更する

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/tsconfig.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 Config ● 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) config を変更する app.head に変更する

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Nuxt Bridge を使った Nuxt 3 移行(Meta Tags) nuxt.config の 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 Config) nuxt.config を修正する

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 移行 ● Configuration ● Vue 3 への移行 ● Vuex ● Pages and Layouts

Slide 68

Slide 68 text

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

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/configuration#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 Config(これから) 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 Config ○ 一旦 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 をリリースします