Slide 1
Slide 1 text
Nuxt.js
が掲げる
"Universal Vue.js Applications"
とは何者か
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Universal Mode
SPA Mode
Slide 6
Slide 6 text
Universal Mode ←
こっち
SPA Mode
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
わかるようでわからない
Slide 10
Slide 10 text
でも、使ってみたら理解できた
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
デベロッパーは1
つの
Nuxt.js
アプリ(
≒ Vue.js
アプリ)
を
開発するが...
Slide 15
Slide 15 text
SSR
するサーバーも生成される
Slide 16
Slide 16 text
"Universal Vue.js Applications"
Slide 17
Slide 17 text
そういう感じか～
Slide 18
Slide 18 text
Vue.js
のアプリと
生成されるサーバーの関係は？
Slide 19
Slide 19 text
例
ディレクトリ構造 →
ルーティングに反映
asyncData() →
サーバーサイドで実行
Slide 20
Slide 20 text
ルーティング
Slide 21
Slide 21 text
pages
├── index.vue
└── items
├── _id.vue
├── create
│ └── index.vue
└── index.vue
Nuxt.js
アプリのディレクトリ構造
Slide 22
Slide 22 text
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
]
})
}
生成されたサーバーのルーティング
Slide 23
Slide 23 text
asyncData()
Slide 24
Slide 24 text
asyncData()
最初に取得するデータをSSR
Slide 25
Slide 25 text
...
export default {
async asyncData ({ app }) {
const res = await app.axios.$get('/api/item
return {
items: res.items,
nextCursor: res.nextCursor,
}
}
}
Nuxt.js
アプリの.vue
ファイル
Slide 26
Slide 26 text
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
にセット
Slide 27
Slide 27 text
要するに
Slide 28
Slide 28 text
Vue.js
アプリを書いてたら
SSR
するサーバーが生成される
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
サーバーはNode.js
Slide 31
Slide 31 text
サーバーの動作はカスタマイズ可能
外れすぎない範囲で使うのが良さそう