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

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

1851e42555822b0fc915dbf3ef0c0f76?s=47 kubotak
November 30, 2021

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

Nuxt道場参面@11/25

1851e42555822b0fc915dbf3ef0c0f76?s=128

kubotak

November 30, 2021
Tweet

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