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
190
アプリを起動せずにアプリを開発して品質と生産性を上げる
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
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.8k
Laravel Boost 超入門
fire_arlo
2
170
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
コンテキストエンジニアリング Cursor編
kinopeee
1
740
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
740
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
230
Updates on MLS on Ruby (and maybe more)
sylph01
1
170
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
230
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
140
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
KATA
mclloyd
32
14k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Scaling GitHub
holman
463
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう