Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt v2からv3へのマイグレーション

Avatar for kubotak kubotak
November 30, 2021
Programming
0
1.1k

Nuxt v2からv3へのマイグレーション

Nuxt道場参面@11/25

Avatar for kubotak

kubotak

November 30, 2021
Tweet

More Decks by kubotak

See All by kubotak
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
490
情報漏洩させないための設計
Avatar for kubotak kubotak
7
2.3k
Svelteコンポーネントの依存関係に秩序を〜
Avatar for kubotak kubotak
0
160
DMARCレポート可視化ツールを SvelteKitで作った話
Avatar for kubotak kubotak
2
570
Superforms本番投入で分かった良さとハマりどころ
Avatar for kubotak kubotak
0
950
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
Avatar for kubotak kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
Avatar for kubotak kubotak
1
1.3k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
Avatar for kubotak kubotak
2
830
Felteで作る簡単フォームバリデーション
Avatar for kubotak kubotak
1
1.7k

Other Decks in Programming

See All in Programming
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
Avatar for cc4966 cc4966
1
190
AI時代のUIはどこへ行く？
Avatar for Yusuke Wada yusukebe
18
8.8k
@Environment(\.keyPath)那么好我不允许你们不知道！ / atEnvironment keyPath is so good and you should know it!
Avatar for Elvis Shi lovee
0
120
CloudflareのChat Agent Starter Kitで簡単！AIチャットボット構築
Avatar for syumai syumai
2
480
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
390
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
270
個人軟體時代
Avatar for Ethan Huang ethanhuang13
0
320
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
Avatar for dafujii dafujii
1
530
GitHubとGitLabと AWS CodePipelineで CI/CDを組み比べてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
4
220
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
Avatar for clshinji clshinji
1
210
Azure SRE Agentで運用は楽になるのか？
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.1k
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
120

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
112
20k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k

Transcript

  1. Copyright© M&A Nuxt v 2 v 3 Nuxt @Kenjiro Kubota

  2. Copyright© M&A Profile kubotak-is kubotak_public kenjiro.kubota M&A (Java|Type)Script PHP https://kubotak.page

  3. Copyright© M&A M&A 3 ങ͍ख ɾҊ݅ใु͸M&A੒ޭใुͷΈ ɾ࠷௿ख਺ྉͳ͠ ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ

    ɾજࡏ૚ʹ΋Ϧʔν͕Մೳ ख਺ྉແྉ ※ϓϥοτϑΥʔϜҊ݅ͷ৔߹ ※ ചΓख 1.ܝࡌ͢Δ ɾങ͍खͷM&AχʔζΛࣗΒௐ΂Δ͜ͱ͕Մೳ
 ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ
 ɾങ͍खͷM&A୲౰ऀʹ௚઀ίϯλΫτΛͱΕΔ
 ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ 2.ΦϑΝʔ͢Δ M&Aɾग़ࢿχʔζΛܝࡌ ങ͍खͷϝϦοτ ചΓखͷϝϦοτ ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ ʓʓྖҬͷձࣾΛ ืू͠·͢ ͜ͷձࣾͱҰॹʹ ΍͍͖͍ͬͯͨʂ 3 PR

  4. Copyright© M&A Nuxt v 2 v 3 4

  5. Copyright© M&A Nuxt v 2 5

  6. Copyright© M&A Nuxt v 2 6 TypeScript Nuxt TypeScript

  7. Copyright© M&A Nuxt v 2 7

  8. Copyright© M&A 8

  9. Copyright© M&A OpenWeather API 9 Free API https://openweathermap.org

  10. Copyright© M&A OpenWeather API 10 API weather[ 0 ].icon URL

  11. Copyright© M&A API Client 11 @aspida/axios

  12. Copyright© M&A 12 TS Vetur this

  13. Copyright© M&A 13 Vue v 2 TS Nuxt Composition API

    nuxt.config.js

  14. Copyright© M&A 14 SCF defineComponent export Composition API

  15. Copyright© M&A 15

  16. Copyright© M&A v 3 16

  17. Copyright© M&A 17 Nuxt v 2 ⾒ Nuxt Bridge

  18. Copyright© M&A 18 Nuxt 3 v 2 v 3 Nuxt

    Bridge v 3

  19. Copyright© M&A v 3 19 Nuxt Bridge

  20. Copyright© M&A Nuxt Bridge 20 package.json &package-lock.json @nuxt/bridge

  21. Copyright© M&A Nuxt Bridge 21 npm script nuxt nuxi generate

    ⾒ nuxt.config.js target: static

  22. Copyright© M&A Nuxt Bridge 22 nuxt.config.js defineNuxtConfig export nuxt.config.(ts)

  23. Copyright© M&A Nuxt Bridge 23 tsconfig.json

  24. Copyright© M&A Nuxt Bridge 24 https://v 3 .nuxtjs.org/getting-started/bridge-composition-api @nuxtjs/composition-api ⾒

    nuxt-bridge Composition API

  25. Copyright© M&A Nuxt Bridge 25 https://v 3 .nuxtjs.org/getting-started/bridge-composition-api composition-api #app

  26. Copyright© M&A Nuxt Bridge 26

  27. Copyright© M&A Nuxt Bridge 27 TypeScript

  28. Copyright© M&A Nuxt Bridge 28 npm run dev

  29. Copyright© M&A 2 29 Vue 3 Vetur

  30. Copyright© M&A Nuxt Bridge v 3 30

  31. Copyright© M&A Nuxt v 3 31 Nuxt 3

  32. Copyright© M&A Nuxt v 3 32 nuxt-edge nuxt 3 Nuxt

    Bridge

  33. Copyright© M&A Nuxt v 3 33 nuxt.config.ts defineNuxtConfig

  34. Copyright© M&A Nuxt v 3 34 npm run dev SSR

    SPA ssr: true

  35. Copyright© M&A Nuxt v 3 35 CompositionAPI Auto Import

  36. Copyright© M&A Nuxt v 3 36 npm run dev Vite

    WARN

  37. Copyright© M&A Nuxt v 3 37

  38. Copyright© M&A 3 38 Vetur

  39. Copyright© M&A 39 Nuxt 3 Nuxt Bridge package-lock.json Nuxt Bridge

    Vue 2 Vue 3 Nuxt 3 Vite Vetur

  40. Copyright© M&A thanks for watching this:)