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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

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

Avatar for Yosuke Ishikawa

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 にセット