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

Transcript

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

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

3. What’s nuxt-edge?

4. IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB

5. IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB

6. nuxt@2 EarlyAccess edition

7. Nuxt v2 …. ⚙ Features Breaking Changes Modules

8. ⚙ Features • webpack@4 • fast • Support ESModules with

   .mjs extension • using std/esm

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

10. Upgrade modules • @nuxtjs/axios • >= 5.2.0, replace dependencies from

    nuxt o nuxt-edge • @nuxtjs/pwa • Coming soon… • Other modules • Independence

11. How to upgrade

12. IUUQTRJJUBDPNQPUBUPEJUFNTCDEBE

13. TL;DR

14. 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

15. Note • In Nuxt I recommend using Yarn • https://github.com/nuxt/nuxt.js/blob/dev/yarn.lock

16. with Express

17. 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

18. Simple Demo

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

20. Digression

21. ”When will Nuxt 2 be released?”

22. IUUQTOVYUKTDNUZJPOVYUOVYUKTJTTVFTD

23. “It will be in May”

24. I can’t wait

25. So…

26. IUUQTTFRVFVFKQ
    /VYU
    SD
    
    OVYUFEHF

27. IUUQTQVTIKQ
    /VYU
    Y
    
    OVYUFEHF

28. IUUQTTBSEJOFTZTUFNDPN
    /VYU
    
    
    OVYUFEHF

29. Promotion

30. /VYU
    UFDI
    CPPL https://potato4d.booth.pm/items/824745 Nuxt tech book ໨࣍ ɾ·͕͖͑ ɾΠϯτϩμΫγϣϯ ɾNuxt.js֓࿦ ɾNuxt

    ʹΑΔجຊతͳWebΞϓϦέʔγϣϯ։ൃ ɾNuxt ͷػೳΛϑϧ׆༻͢Δ ɾ࣮ફతͳWebΞϓϦέʔγϣϯ։ൃϊ΢ϋ΢ ɾNuxt ͷΤίγεςϜ ɾNuxt ͷ৘ใऩूɾΩϟονΞοϓͷεεϝ ɾ͋ͱ͕͖ PDF Edition ˇ1,600 Bookˇ2,000

31. Thanks!