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
3.7k
Achieving Testability in Presentation Layer
ishkawa
4
3.7k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.3k
Declarative UICollectionView
ishkawa
28
8k
Static Dependency Injection by Code Generation
ishkawa
15
6.3k
実践クライアントサイドSwift
ishkawa
24
4.2k
JSON-RPC on APIKit
ishkawa
5
57k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.9k
Swift + JSON-RPC
ishkawa
0
53k
Other Decks in Programming
See All in Programming
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.5k
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
540
SpringBootにおけるオブザーバビリティのなにか
irof
1
890
Investigating Multithreaded PostgreSQL
macdice
0
150
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
590
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
750
Doma で目指す ORM 最適解
nakamura_to
1
160
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
250
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
230
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
230
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Documentation Writing (for coders)
carmenintech
71
4.8k
What's in a price? How to price your products and services
michaelherold
245
12k
Designing Experiences People Love
moore
142
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
A Tale of Four Properties
chriscoyier
159
23k
Balancing Empowerment & Direction
lara
1
84
Typedesign – Prime Four
hannesfritz
41
2.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう