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

by potato4d(Hanatani Takuma)

Slide 1

Slide 1 text

͍·͔Β͸͡ΊΔ nuxt-edge 2018.05.13 NuxtMeetup@merpay

Slide 2

Slide 2 text

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 staﬀ • “Nuxt tech book” author • I — Vue.js / Nuxt.js

Slide 3

Slide 3 text

What’s nuxt-edge?

Slide 4

Slide 4 text

IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB

Slide 5

Slide 5 text

IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB

Slide 6

Slide 6 text

nuxt@2 EarlyAccess edition

Slide 7

Slide 7 text

Nuxt v2 …. ⚙ Features Breaking Changes Modules

Slide 8

Slide 8 text

⚙ Features • webpack@4 • fast • Support ESModules with .mjs extension • using std/esm

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Upgrade modules • @nuxtjs/axios • >= 5.2.0, replace dependencies from nuxt o nuxt-edge • @nuxtjs/pwa • Coming soon… • Other modules • Independence

Slide 11

Slide 11 text

How to upgrade

Slide 12

Slide 12 text

IUUQTRJJUBDPNQPUBUPEJUFNTCDEBE

Slide 13

Slide 13 text

TL;DR

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

with Express

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Simple Demo

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Digression

Slide 21

Slide 21 text

”When will Nuxt 2 be released?”

Slide 22

Slide 22 text

IUUQTOVYUKTDNUZJPOVYUOVYUKTJTTVFTD

Slide 23

Slide 23 text

“It will be in May”

Slide 24

Slide 24 text

I can’t wait

Slide 25

Slide 25 text

So…

Slide 26

Slide 26 text

IUUQTTFRVFVFKQ /VYUSDOVYUFEHF

Slide 27

Slide 27 text

IUUQTQVTIKQ /VYUYOVYUFEHF

Slide 28

Slide 28 text

IUUQTTBSEJOFTZTUFNDPN /VYUOVYUFEHF

Slide 29

Slide 29 text

Promotion

Slide 30

Slide 30 text

/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

Slide 31

Slide 31 text

Thanks!