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
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
57
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
440
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
640
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
10k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.1k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
700
Felteで作る簡単フォームバリデーション
kubotak
1
1.4k
SvelteKitを本番投入してみて
kubotak
2
1.9k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.6k
Other Decks in Programming
See All in Programming
受け取る人から提供する人になるということ
little_rubyist
0
230
CSC509 Lecture 11
javiergs
PRO
0
180
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Contemporary Test Cases
maaretp
0
130
C++でシェーダを書く
fadis
6
4.1k
Realtime API 入門
riofujimon
0
150
EventSourcingの理想と現実
wenas
6
2.3k
初めてDefinitelyTypedにPRを出した話
syumai
0
400
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
170
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
What's new in Ruby 2.0
geeforr
343
31k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Producing Creativity
orderedlist
PRO
341
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Facilitating Awesome Meetings
lara
50
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Making Projects Easy
brettharned
115
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
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:)