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.jsが掲げる"Universal Vue.js Applications"とは何者か
Search
Yosuke Ishikawa
October 04, 2017
Programming
10
2.8k
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
Yosuke Ishikawa
October 04, 2017
Tweet
Share
More Decks by Yosuke Ishikawa
See All by Yosuke Ishikawa
効率的な開発手段として VRTを活用する
ishkawa
1
200
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
4.3k
Achieving Testability in Presentation Layer
ishkawa
4
3.8k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.3k
Declarative UICollectionView
ishkawa
28
8.2k
Static Dependency Injection by Code Generation
ishkawa
15
6.4k
実践クライアントサイドSwift
ishkawa
24
4.3k
JSON-RPC on APIKit
ishkawa
5
61k
RxSwiftは開発をどう変えたか?
ishkawa
12
4k
Other Decks in Programming
See All in Programming
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
760
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
180
CSC509 Lecture 03
javiergs
PRO
0
330
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
120
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
170
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Faster Mobile Websites
deanohume
310
31k
A better future with KSS
kneath
239
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Building an army of robots
kneath
306
46k
Into the Great Unknown - MozCon
thekraken
40
2.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Building Adaptive Systems
keathley
43
2.8k
Transcript
Nuxt.js が掲げる "Universal Vue.js Applications" とは何者か
None
None
None
Universal Mode SPA Mode
Universal Mode ← こっち SPA Mode
None
None
わかるようでわからない
でも、使ってみたら理解できた
None
None
None
デベロッパーは1 つの Nuxt.js アプリ( ≒ Vue.js アプリ) を 開発するが...
SSR するサーバーも生成される
"Universal Vue.js Applications"
そういう感じか~
Vue.js のアプリと 生成されるサーバーの関係は?
例 ディレクトリ構造 → ルーティングに反映 asyncData() → サーバーサイドで実行
ルーティング
pages ├── index.vue └── items ├── _id.vue ├── create │
└── index.vue └── index.vue Nuxt.js アプリのディレクトリ構造
export function createRouter () { return new Router({ mode: 'history',
base: '/', (中略) routes: [ {path: "/", component: _d26d9516, name: " {path: "/items", component: _8ac95cea, nam {path: "/items/create", component: _4bfc3 {path: "/items/:id", component: _07563ab3 ] }) } 生成されたサーバーのルーティング
asyncData()
asyncData() 最初に取得するデータをSSR
... <script> export default { async asyncData ({ app })
{ const res = await app.axios.$get('/api/item return { items: res.items, nextCursor: res.nextCursor, } } } </script> Nuxt.js アプリの.vue ファイル
let asyncDatas = await Promise.all(Components.m let promises = [] if
(Component.options.asyncData && typeof Com let promise = promisify(Component.options.a (中略) promises.push(promise) } (中略) return Promise.all(promises) })) context.nuxt.data = asyncDatas.map(r => r[0] || で実行してdata にセット
要するに
Vue.js アプリを書いてたら SSR するサーバーが生成される
None
サーバーはNode.js
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう