Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
いまからはじめるnuxt-edge #nuxtmeetup
Search
potato4d(Takuma HANATANI)
May 15, 2018
Programming
1
8.3k
いまからはじめるnuxt-edge #nuxtmeetup
2018.05.15 Nuxt Meetup#2 @メルペイ にて発表した資料です
potato4d(Takuma HANATANI)
May 15, 2018
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
350
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
410
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
880
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
Better Code Design in PHP
afilina
0
140
Datadog Workflow Automation で圧倒的価値提供
showwin
1
100
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
880
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
230
CI改善もDatadogとともに
taumu
0
180
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
190
SwiftUI Viewの責務分離
elmetal
PRO
2
260
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
120
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to train your dragon (web standard)
notwaldorf
91
5.9k
A designer walks into a library…
pauljervisheath
205
24k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Optimizing for Happiness
mojombo
376
70k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Transcript
͍·͔Β͡ΊΔ nuxt-edge 2018.05.13 NuxtMeetup@merpay
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
What’s nuxt-edge?
IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB
IUUQTNFEJVNDPNOVYUOVYUJTDPNJOHPIZFBIDBFB
nuxt@2 EarlyAccess edition
Nuxt v2 …. ⚙ Features Breaking Changes Modules
⚙ Features • webpack@4 • fast • Support ESModules with
.mjs extension • using std/esm
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
Upgrade modules • @nuxtjs/axios • >= 5.2.0, replace dependencies from
nuxt o nuxt-edge • @nuxtjs/pwa • Coming soon… • Other modules • Independence
How to upgrade
IUUQTRJJUBDPNQPUBUPEJUFNTCDEBE
TL;DR
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
Note • In Nuxt I recommend using Yarn • https://github.com/nuxt/nuxt.js/blob/dev/yarn.lock
with Express
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
Simple Demo
https://github.com/magitek-telescope/nuxt-meetup-2
Digression
”When will Nuxt 2 be released?”
IUUQTOVYUKTDNUZJPOVYUOVYUKTJTTVFTD
“It will be in May”
I can’t wait
So…
IUUQTTFRVFVFKQ /VYUSDOVYUFEHF
IUUQTQVTIKQ /VYUYOVYUFEHF
IUUQTTBSEJOFTZTUFNDPN /VYUOVYUFEHF
Promotion
/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
Thanks!