Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か

Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か

Yosuke Ishikawa

October 04, 2017
Tweet

More Decks by Yosuke Ishikawa

Other Decks in Programming

Transcript

  1. pages ├── index.vue └── items ├── _id.vue ├── create │

    └── index.vue └── index.vue Nuxt.js アプリのディレクトリ構造
  2. 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 ] }) } 生成されたサーバーのルーティング
  3. ... <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 ファイル
  4. 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 にセット