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
2.8k
Achieving Testability in Presentation Layer
ishkawa
4
3.7k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.2k
Declarative UICollectionView
ishkawa
28
7.9k
Static Dependency Injection by Code Generation
ishkawa
15
6.3k
実践クライアントサイドSwift
ishkawa
24
4.2k
JSON-RPC on APIKit
ishkawa
5
55k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.8k
Swift + JSON-RPC
ishkawa
0
52k
Other Decks in Programming
See All in Programming
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
300
List とは何か? / PHPerKaigi 2025
meihei3
0
870
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
280
AI時代の開発者評価について
ayumuu
0
150
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
480
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
510
国漢文混用体からHolloまで
minhee
1
190
Making TCPSocket.new "Happy"!
coe401_
1
1.2k
DataStoreをテストする
mkeeda
0
290
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
130
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
750
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
160
Featured
See All Featured
Building an army of robots
kneath
304
45k
Music & Morning Musume
bryan
47
6.5k
Designing for Performance
lara
608
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Bash Introduction
62gerente
611
210k
Producing Creativity
orderedlist
PRO
344
40k
How GitHub (no longer) Works
holman
314
140k
Side Projects
sachag
452
42k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
How to Ace a Technical Interview
jacobian
276
23k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう