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
180
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
4.2k
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.1k
Static Dependency Injection by Code Generation
ishkawa
15
6.4k
実践クライアントサイドSwift
ishkawa
24
4.2k
JSON-RPC on APIKit
ishkawa
5
60k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.9k
Other Decks in Programming
See All in Programming
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
令和最新版手のひらコンピュータ
koba789
13
7.3k
kiroでゲームを作ってみた
iriikeita
0
150
Vibe coding コードレビュー
kinopeee
0
430
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
740
iOS開発スターターキットの作り方
akidon0000
0
240
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
130
新世界の理解
koriym
0
130
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
340
ワープロって実は計算機で
pepepper
2
1.2k
バイブコーディング × 設計思考
nogu66
0
100
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Scaling GitHub
holman
461
140k
Music & Morning Musume
bryan
46
6.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
450
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう