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

Nuxt道場参面@11/25

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:)