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

Nuxt道場参面@11/25

Transcript

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

   View Slide

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

   View Slide

3. Copyright© M&A
   M&A
   3
   ങ͍ख
   ɾҊ݅ใु͸M&A੒ޭใुͷΈ
   ɾ࠷௿ख਺ྉͳ͠
   ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ
   ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬
   ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ
   ɾજࡏ૚ʹ΋Ϧʔν͕Մೳ
   ख਺ྉແྉ
   ※ϓϥοτϑΥʔϜҊ݅ͷ৔߹
   ※
   ചΓख
   1.ܝࡌ͢Δ
   ɾങ͍खͷM&AχʔζΛࣗΒௐ΂Δ͜ͱ͕Մೳ

   ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ

   ɾങ͍खͷM&A୲౰ऀʹ௚઀ίϯλΫτΛͱΕΔ

   ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ
   2.ΦϑΝʔ͢Δ
   M&Aɾग़ࢿχʔζΛܝࡌ
   ങ͍खͷϝϦοτ ചΓखͷϝϦοτ
   ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ
   ʓʓྖҬͷձࣾΛ
   ืू͠·͢
   ͜ͷձࣾͱҰॹʹ
   ΍͍͖͍ͬͯͨʂ
   3
   PR
   

   View Slide

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

   View Slide

5. Copyright© M&A
   Nuxt v
   2
   5
   

   View Slide

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

   View Slide

7. Copyright© M&A
   Nuxt v
   2
   7
   

   View Slide

8. Copyright© M&A
   8
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Copyright© M&A
    12
    TS Vetur
    
    
    this
    

    View Slide

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

    View Slide

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

    View Slide

15. Copyright© M&A
    15
    

    View Slide

16. Copyright© M&A
    v
    3
    16
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Copyright© M&A
    Nuxt Bridge
    21
    npm script nuxt nuxi
    generate ⾒ nuxt.config.js target: static
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. Copyright© M&A
    Nuxt Bridge
    26
    

    View Slide

27. Copyright© M&A
    Nuxt Bridge
    27
    TypeScript
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. Copyright© M&A
    Nuxt v
    3
    34
    npm run dev
    
    
    SSR
    
    
    SPA ssr: true
    

    View Slide

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

    View Slide

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

    View Slide

37. Copyright© M&A
    Nuxt v
    3
    37
    
    

    View Slide

38. Copyright© M&A
    3
    38
    Vetur
    

    View Slide

39. Copyright© M&A
    39
    Nuxt
    3
    Nuxt Bridge
    
    
    
    
    package-lock.json Nuxt Bridge Vue
    2
    Vue
    3
    
    
    Nuxt
    3
    Vite
    
    
    Vetur
    

    View Slide

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

    View Slide