Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Nuxt v2からv3へのマイグレーション
kubotak
November 30, 2021
Programming
0
520
Nuxt v2からv3へのマイグレーション
Nuxt道場参面@11/25
kubotak
November 30, 2021
Tweet
Share
More Decks by kubotak
See All by kubotak
Felteで作る簡単フォームバリデーション
kubotak
1
130
SvelteKitを本番投入してみて
kubotak
0
490
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
1k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
74
FeatureToggle戦略と運用方法
kubotak
3
780
SvelteKitでストアのハイドレーションを考えてみた
kubotak
2
98
PHPコードを消すライブラリを作った
kubotak
0
1.1k
なぜLaravel9はLTSではないのか
kubotak
0
930
カンファレンスで登壇すること
kubotak
0
58
Other Decks in Programming
See All in Programming
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
Git Rebase
bkuhlmann
10
1.2k
はてなリモートインターンシップ2022 Web API 講義資料
hatena
0
150
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330
Hasura の Relationship と権限管理
karszawa
0
130
eBPF와 함께 이해하는 Cilium 네트워킹
hadaney
3
830
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
320
様々なWebアプリをAzureにデプロイする
tomokusaba
0
110
GitHub Flowでの高速なデリバリーをささえるテスト基盤について
kyong0612
0
120
Data Product Manager? / データプロダクトマネージャーとは?
satoshihirose
3
1.5k
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
200
Featured
See All Featured
Making Projects Easy
brettharned
102
4.8k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
How STYLIGHT went responsive
nonsquared
89
4.2k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
Adopting Sorbet at Scale
ufuk
65
7.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
A designer walks into a library…
pauljervisheath
198
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Code Reviewing Like a Champion
maltzj
508
38k
Product Roadmaps are Hard
iamctodd
38
7.7k
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:)