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

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