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.5k
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
Yosuke Ishikawa
October 04, 2017
Tweet
Share
More Decks by Yosuke Ishikawa
See All by Yosuke Ishikawa
Achieving Testability in Presentation Layer
ishkawa
4
3.3k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.1k
Declarative UICollectionView
ishkawa
28
7.4k
Static Dependency Injection by Code Generation
ishkawa
15
5.9k
実践クライアントサイドSwift
ishkawa
24
3.8k
JSON-RPC on APIKit
ishkawa
5
48k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.5k
Swift + JSON-RPC
ishkawa
0
46k
アッテiOSの設計と開発フローの変遷
ishkawa
9
13k
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
240
Let's learn code review
riofujimon
2
550
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
230
Hanami and htmx
bkuhlmann
0
210
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.4k
Java 22 Overview
kishida
1
190
Code Reviews
bkuhlmann
4
890
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
190
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
200
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
What We Can Learn From OSS
inouehi
0
430
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
How to name files
jennybc
65
93k
Automating Front-end Workflow
addyosmani
1357
200k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Happy Clients
brianwarren
92
6.4k
Scaling GitHub
holman
457
140k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
The Invisible Customer
myddelton
114
12k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう