Nuxt.js: Async data on components

Created on 13 Jan 2017 · 5Comments · Source: nuxt/nuxt.js

Loading data with axios only work in a page not in a component:
See this example: https://github.com/danieloprado/nuxt-async-data

[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
(found in component <category-header-component> at /home/daniel/projects/tegra-ecommerce-site/app/components/CategoryLinks.vue)
warn @ vue.runtime.common.js:521
initData @ vue.runtime.common.js:1901
initState @ vue.runtime.common.js:1848
Vue._init @ vue.runtime.common.js:3365
VueComponent @ vue.runtime.common.js:3485
createComponentInstanceForVnode @ vue.runtime.common.js:2761
init @ vue.runtime.common.js:2771
createComponent @ vue.runtime.common.js:4122
createElm @ vue.runtime.common.js:4065
updateChildren @ vue.runtime.common.js:4335
patchVnode @ vue.runtime.common.js:4398
updateChildren @ vue.runtime.common.js:4314
patchVnode @ vue.runtime.common.js:4398
patch @ vue.runtime.common.js:4523
Vue._update @ vue.runtime.common.js:2497
(anonymous) @ vue.runtime.common.js:2464
get @ vue.runtime.common.js:1661
run @ vue.runtime.common.js:1730
flushSchedulerQueue @ vue.runtime.common.js:1544
(anonymous) @ vue.runtime.common.js:473
nextTickHandler @ vue.runtime.common.js:422
vue.runtime.common.js:521 

[Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <category-header-component> at /home/daniel/projects/tegra-ecommerce-site/app/components/CategoryLinks.vue)

duplicate

Source

danieloprado

Most helpful comment

Just use the nuxtServerInit method at the store/actions and dispatch an action to load the data.

// store/actions.js
async nuxtServerInit({ dispatch }) {
    await dispatch('core/load');
 },

// store/core/actions.js
  load({ dispatch }) {
    return Promise.all([
      dispatch('loadCategories'),
      dispatch('loadStaticPages')
    ]);
  },
  loadCategories({ commit }) {
    return categoryList().then(categories => {
      commit('setCategories', categories);
    });
  },
  loadStaticPages({ commit }) {
    commit('setStaticPages', [
      { title: 'Novidades', position: 'top' },
      { title: 'Receitas', position: 'top' },
      { title: 'Sobre Nós', position: 'bottom' },
      { title: 'Como Funciona', position: 'bottom' },
      { title: 'Privacidade', position: 'bottom' },
      { title: 'Dicas', position: 'bottom' },
      { title: 'Fale Conosco', position: 'bottom' }
    ]);
  }

danieloprado on 2 Feb 2017

👍6

All 5 comments

Hi @danieloprado

As I mentioned in https://github.com/nuxt/nuxt.js/issues/32#issuecomment-264509187, nuxt.js only supercharges the data method in the pages components.

I tried different ways to make the sub components asynchronous but sadly I did not find any way of doing it.

Atinux on 13 Jan 2017

@Atinux How about supporting SSR layout async data? That's would be helpful for fetching some config from backend.

laosb on 2 Feb 2017

It will be possible with the middleware feature (I am actually working on it)

Atinux on 2 Feb 2017

👍1

Just use the nuxtServerInit method at the store/actions and dispatch an action to load the data.

// store/actions.js
async nuxtServerInit({ dispatch }) {
    await dispatch('core/load');
 },

// store/core/actions.js
  load({ dispatch }) {
    return Promise.all([
      dispatch('loadCategories'),
      dispatch('loadStaticPages')
    ]);
  },
  loadCategories({ commit }) {
    return categoryList().then(categories => {
      commit('setCategories', categories);
    });
  },
  loadStaticPages({ commit }) {
    commit('setStaticPages', [
      { title: 'Novidades', position: 'top' },
      { title: 'Receitas', position: 'top' },
      { title: 'Sobre Nós', position: 'bottom' },
      { title: 'Como Funciona', position: 'bottom' },
      { title: 'Privacidade', position: 'bottom' },
      { title: 'Dicas', position: 'bottom' },
      { title: 'Fale Conosco', position: 'bottom' }
    ]);
  }

danieloprado on 2 Feb 2017

👍6

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.