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

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

kubotak
November 30, 2021

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

Nuxt道場参面@11/25

kubotak

November 30, 2021
Tweet

More Decks by kubotak

Other Decks in Programming

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