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

いまからはじめるnuxt-edge #nuxtmeetup

いまからはじめるnuxt-edge #nuxtmeetup

2018.05.15 Nuxt Meetup#2 @メルペイ にて発表した資料です

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

Transcript

  1. ͍·͔Β͸͡ΊΔ
    nuxt-edge
    2018.05.13 NuxtMeetup@merpay

    View full-size slide

  2. potato4d
    • HANATANI Takuma a.k.a. potato4d

    • 20 years old

    • Freelance Web Engineer

    • ⚙ JS(Vue), PHP, Ruby(Rails)

    • @increments, @gnexltd, @alisproject, etc…

    • Vue.js Japan Usergroup staff

    • “Nuxt tech book” author

    • I — Vue.js / Nuxt.js

    View full-size slide

  3. What’s nuxt-edge?

    View full-size slide

  4. IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB

    View full-size slide

  5. IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB

    View full-size slide

  6. nuxt@2
    EarlyAccess edition

    View full-size slide

  7. Nuxt v2 ….

    Features

    Breaking Changes

    Modules

    View full-size slide

  8. ⚙ Features
    • webpack@4

    • fast

    • Support ESModules with .mjs extension

    • using std/esm

    View full-size slide

  9. Breaking changes
    • Remove isClient / isServer flag

    • use process.browser / process.server instead of it

    • options.dev flag on build function in nuxt.config.js

    • use options.isDev instead of it

    • remove vendors

    • remove “vendor” key in nuxt.config.js

    View full-size slide

  10. Upgrade modules
    • @nuxtjs/axios

    • >= 5.2.0, replace dependencies from nuxt o nuxt-edge

    • @nuxtjs/pwa

    • Coming soon…

    • Other modules

    • Independence

    View full-size slide

  11. How to upgrade

    View full-size slide

  12. IUUQTRJJUBDPNQPUBUPEJUFNTCDEBE

    View full-size slide

  13. 5 Step
    • yarn remove nuxt @nuxtjs/axios

    • yarn add nuxt-edge @nuxtjs/axios

    • s/isClient/process.browser/g

    • s/isServer/process.server/g

    • yarn dev

    View full-size slide

  14. Note
    • In Nuxt I recommend using Yarn

    • https://github.com/nuxt/nuxt.js/blob/dev/yarn.lock

    View full-size slide

  15. with Express

    View full-size slide

  16. 6 Step
    • yarn remove nuxt @nuxtjs/axios

    • yarn add nuxt-edge @nuxtjs/axios

    • s/isClient/process.browser/g

    • s/isServer/process.server/g

    • yarn dev

    • replace “nuxt” to “nuxt-edge“ on import / require syntax

    View full-size slide

  17. https://github.com/magitek-telescope/nuxt-meetup-2

    View full-size slide

  18. ”When will Nuxt 2 be released?”

    View full-size slide

  19. IUUQTOVYUKTDNUZJPOVYUOVYUKTJTTVFTD

    View full-size slide

  20. “It will be in May”

    View full-size slide

  21. I can’t wait

    View full-size slide

  22. IUUQTTFRVFVFKQ /VYUSDOVYUFEHF

    View full-size slide

  23. IUUQTQVTIKQ /VYUYOVYUFEHF

    View full-size slide

  24. IUUQTTBSEJOFTZTUFNDPN /VYUOVYUFEHF

    View full-size slide

  25. /VYUUFDICPPL
    https://potato4d.booth.pm/items/824745
    Nuxt tech book
    ໨࣍
    ɾ·͕͖͑
    ɾΠϯτϩμΫγϣϯ
    ɾNuxt.js֓࿦
    ɾNuxt ʹΑΔجຊతͳWebΞϓϦέʔγϣϯ։ൃ
    ɾNuxt ͷػೳΛϑϧ׆༻͢Δ
    ɾ࣮ફతͳWebΞϓϦέʔγϣϯ։ൃϊ΢ϋ΢
    ɾNuxt ͷΤίγεςϜ
    ɾNuxt ͷ৘ใऩूɾΩϟονΞοϓͷεεϝ
    ɾ͋ͱ͕͖
    PDF Edition ˇ1,600
    Bookˇ2,000

    View full-size slide