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.7k
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
Yosuke Ishikawa
October 04, 2017
Tweet
Share
More Decks by Yosuke Ishikawa
See All by Yosuke Ishikawa
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
4k
Achieving Testability in Presentation Layer
ishkawa
4
3.7k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.3k
Declarative UICollectionView
ishkawa
28
8.1k
Static Dependency Injection by Code Generation
ishkawa
15
6.4k
実践クライアントサイドSwift
ishkawa
24
4.2k
JSON-RPC on APIKit
ishkawa
5
58k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.9k
Swift + JSON-RPC
ishkawa
0
54k
Other Decks in Programming
See All in Programming
Select API from Kotlin Coroutine
jmatsu
1
210
WindowInsetsだってテストしたい
ryunen344
1
210
Benchmark
sysong
0
280
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
540
GraphRAGの仕組みまるわかり
tosuri13
8
510
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
340
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
ReadMoreTextView
fornewid
1
490
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Review Best Practice
trishagee
69
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Practical Orchestrator
shlominoach
188
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Docker and Python
trallard
44
3.5k
Navigating Team Friction
lara
187
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
BBQ
matthewcrist
89
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう