Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt v2からv3へのマイグレーション
Search
kubotak
November 30, 2021
Programming
0
1k
Nuxt v2からv3へのマイグレーション
Nuxt道場参面@11/25
kubotak
November 30, 2021
Tweet
Share
More Decks by kubotak
See All by kubotak
情報漏洩させないための設計
kubotak
5
1.5k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
95
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
490
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
770
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
10k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.2k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
730
Felteで作る簡単フォームバリデーション
kubotak
1
1.5k
SvelteKitを本番投入してみて
kubotak
2
2k
Other Decks in Programming
See All in Programming
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
190
Grafana Cloudとソラカメ
devoc
0
170
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
110
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
390
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
120
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
290
技術を根付かせる / How to make technology take root
kubode
1
250
Spring gRPC について / About Spring gRPC
mackey0225
0
220
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Building an army of robots
kneath
303
45k
BBQ
matthewcrist
87
9.5k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Embracing the Ebb and Flow
colly
84
4.6k
Thoughts on Productivity
jonyablonski
69
4.5k
Designing Experiences People Love
moore
140
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Done Done
chrislema
182
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Transcript
Copyright© M&A Nuxt v 2 v 3 Nuxt @Kenjiro Kubota
Copyright© M&A Profile kubotak-is kubotak_public kenjiro.kubota M&A (Java|Type)Script PHP https://kubotak.page
Copyright© M&A M&A 3 ങ͍ख ɾҊ݅ใुM&AޭใुͷΈ ɾ࠷खྉͳ͠ ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳ
ɾજࡏʹϦʔν͕Մೳ खྉແྉ ※ϓϥοτϑΥʔϜҊ݅ͷ߹ ※ ചΓख 1.ܝࡌ͢Δ ɾങ͍खͷM&AχʔζΛࣗΒௐΔ͜ͱ͕Մೳ ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳ ɾങ͍खͷM&A୲ऀʹίϯλΫτΛͱΕΔ ɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉ 2.ΦϑΝʔ͢Δ M&Aɾग़ࢿχʔζΛܝࡌ ങ͍खͷϝϦοτ ചΓखͷϝϦοτ ɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉ ʓʓྖҬͷձࣾΛ ืू͠·͢ ͜ͷձࣾͱҰॹʹ ͍͖͍ͬͯͨʂ 3 PR
Copyright© M&A Nuxt v 2 v 3 4
Copyright© M&A Nuxt v 2 5
Copyright© M&A Nuxt v 2 6 TypeScript Nuxt TypeScript
Copyright© M&A Nuxt v 2 7
Copyright© M&A 8
Copyright© M&A OpenWeather API 9 Free API https://openweathermap.org
Copyright© M&A OpenWeather API 10 API weather[ 0 ].icon URL
Copyright© M&A API Client 11 @aspida/axios
Copyright© M&A 12 TS Vetur this
Copyright© M&A 13 Vue v 2 TS Nuxt Composition API
nuxt.config.js
Copyright© M&A 14 SCF defineComponent export Composition API
Copyright© M&A 15
Copyright© M&A v 3 16
Copyright© M&A 17 Nuxt v 2 ⾒ Nuxt Bridge
Copyright© M&A 18 Nuxt 3 v 2 v 3 Nuxt
Bridge v 3
Copyright© M&A v 3 19 Nuxt Bridge
Copyright© M&A Nuxt Bridge 20 package.json &package-lock.json @nuxt/bridge
Copyright© M&A Nuxt Bridge 21 npm script nuxt nuxi generate
⾒ nuxt.config.js target: static
Copyright© M&A Nuxt Bridge 22 nuxt.config.js defineNuxtConfig export nuxt.config.(ts)
Copyright© M&A Nuxt Bridge 23 tsconfig.json
Copyright© M&A Nuxt Bridge 24 https://v 3 .nuxtjs.org/getting-started/bridge-composition-api @nuxtjs/composition-api ⾒
nuxt-bridge Composition API
Copyright© M&A Nuxt Bridge 25 https://v 3 .nuxtjs.org/getting-started/bridge-composition-api composition-api #app
Copyright© M&A Nuxt Bridge 26
Copyright© M&A Nuxt Bridge 27 TypeScript
Copyright© M&A Nuxt Bridge 28 npm run dev
Copyright© M&A 2 29 Vue 3 Vetur
Copyright© M&A Nuxt Bridge v 3 30
Copyright© M&A Nuxt v 3 31 Nuxt 3
Copyright© M&A Nuxt v 3 32 nuxt-edge nuxt 3 Nuxt
Bridge
Copyright© M&A Nuxt v 3 33 nuxt.config.ts defineNuxtConfig
Copyright© M&A Nuxt v 3 34 npm run dev SSR
SPA ssr: true
Copyright© M&A Nuxt v 3 35 CompositionAPI Auto Import
Copyright© M&A Nuxt v 3 36 npm run dev Vite
WARN
Copyright© M&A Nuxt v 3 37
Copyright© M&A 3 38 Vetur
Copyright© M&A 39 Nuxt 3 Nuxt Bridge package-lock.json Nuxt Bridge
Vue 2 Vue 3 Nuxt 3 Vite Vetur
Copyright© M&A thanks for watching this:)