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
930
Nuxt v2からv3へのマイグレーション
Nuxt道場参面@11/25
kubotak
November 30, 2021
Tweet
Share
More Decks by kubotak
See All by kubotak
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
230
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
190
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
9.2k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
760
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
530
Felteで作る簡単フォームバリデーション
kubotak
1
880
SvelteKitを本番投入してみて
kubotak
2
1.5k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
300
Other Decks in Programming
See All in Programming
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
490
Honoとhtmx
yusukebe
6
1.2k
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
ONE WEDGE_Company_Information
1wedge
0
170
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
8
2.2k
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
14k
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
OpenTelemetry のサービスという概念について
azukiazusa1
1
390
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
In The Pink: A Labor of Love
frogandcode
137
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Visualization
eitanlees
135
14k
Music & Morning Musume
bryan
39
5.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Agile that works and the tools we love
rasmusluckow
323
20k
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:)