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.5k
実践クライアントサイドSwift
ishkawa
24
4.3k
JSON-RPC on APIKit
ishkawa
5
62k
RxSwiftは開発をどう変えたか?
ishkawa
12
4k
Other Decks in Programming
See All in Programming
EMこそClaude Codeでコード調査しよう
shibayu36
0
290
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
16
6.4k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
200
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
技術的負債の正体を知って向き合う
irof
0
210
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
400
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Leading Effective Engineering Teams in the AI Era
addyosmani
7
550
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
320
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
530
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
The World Runs on Bad Software
bkeepers
PRO
72
11k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Code Review Best Practice
trishagee
72
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
How STYLIGHT went responsive
nonsquared
100
5.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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう