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.7k
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
59k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.9k
Other Decks in Programming
See All in Programming
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
690
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
160
slogパッケージの深掘り
integral0515
0
150
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.2k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
構文解析器入門
ydah
7
1.9k
What's new in Adaptive Android development
fornewid
0
110
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
The Invisible Side of Design
smashingmag
301
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Faster Mobile Websites
deanohume
308
31k
A designer walks into a library…
pauljervisheath
207
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The World Runs on Bad Software
bkeepers
PRO
70
11k
For a Future-Friendly Web
brad_frost
179
9.8k
Speed Design
sergeychernyshev
32
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう