Nuxt.js: Can't get nuxt / vuejs to render store properly in the server.

[mascardoso]

Hi there,
I've been starting last week with Vuejs and Nuxt.
I've been struggling with something that might be very basic but I still couldn't find a way or a proper solution for it.

I'm trying to load some content in the server but I can't at the moment. So I've been trying several things.

First things first. I'm only trying at the moment to follow the nuxt example right here and return a promise by using axios and use the data within my component. Even though I can indeed confirm that the data arrives by logging it I always have the same warn/error.

[Vue warn]: data functions should return an object: https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function (found in component <main-nav> at /htdocs/sandbox/nutx/test/components/Nav.vue)

[Vue warn]: Property or method "navItems" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <main-nav> at /htdocs/sandbox/nutx/test/components/Nav.vue)

components > Nav.vue

<template>
  <nav>
    <ul>
      <li v-for="navItem in navItems">
        <nuxt-link class="button" :to="{ path: navItem.slug }">
          {{ navItem.title }}
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script>
  import axios from 'axios';
  import { mapActions } from 'vuex';

  export default {
    data() {
      return axios.get('https://cosmicjs.com/v1/[project]/object-type/pages')
        .then((res) => {
          console.log({ navItems: res.data.objects }); //Object {navItems: Array[2]}
          return { navItems: res.data.objects }
        })
    }
  }
</script>

Even though I get the data navItems isn't looped at all in the template.

Not sure if this is also related with this issue but I'm also trying the following so I can get this component rendered in the server and in the client with the Store. I can only get it rendered in the client side but not on the server:

components > Nav.vue

<template>
  <nav>
    <ul>
      <li v-for="navItem in navItems">
        <nuxt-link class="button" :to="{ path: navItem.slug }">
          {{ navItem.title }}
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script>
  import { mapActions } from 'vuex';

  export default {
    computed: {
      navItems () {
        return this.$store.state.nav.navItems
      }
    },
    created () {
      this.fetchData();
    },
    methods: {
      fetchData () {
        this.$store.dispatch('nav/fetchNavItems');
      }
    }
  }
</script>

store > nav.js

import Axios from 'axios';

export const state = {
  navItems: []
};

export const actions = {
  fetchNavItems (state) {
    Axios.get('https://cosmicjs.com/v1/marcocardoso/object-type/pages')
      .then((res) => {
        state.commit('setNavItems', res.data.objects);
      });
  }
};

export const mutations = {
  setNavItems: (state, data) => {
    state.navItems = Object.assign({}, data)
  }
};

store > index.js

export const state = {};
export const mutations = {};
export const actions = {};

layouts > default.vue

<template>
  <main>
    <main-nav />
    <nuxt/>
    <main-footer/>
  </main>
</template>

<script>
import MainFooter from '~components/Footer.vue';
import MainNav from '~components/Nav.vue';

export default {
  components: {
    MainFooter,
    MainNav
  }
}
</script>

I appreciate any guidance / help here. Thank you.

_{This question is available on Nuxt.js community (#c213)}

[alexchopin]

Hi,

1) Nav component data() methods issue: This is normal, only pages components have data() method supercharges by Nuxt.
2) Fo the Store, we have created a special action called nuxtserverinit which allows you to pre-fetch data before render it from the server side.

components > Nav.vue

export default {
    computed: {
      navItems () {
        return this.$store.state.nav.navItems
      }
    }
  }

store > index.js

export const state = {}
export const mutations = {}
export const actions = {
  nuxtServerInit ({ dispatch }) {
    return dispatch('nav/fetchNavItems')
  }
}

[mascardoso]

ok. That leads me to 3 questions / issues, sorry:

1) So it's not possible to fetch server side data from a component, only from pages? Doesn't this break modularity? If that's the case, is this a impossibility of the vuejs library or nuxt and therefore I will always need to fetch my data within the pages and distribute it to my components?

2) I followed your example and applied the nuxtserverinit. And I dont get the store filled even by applying this method. It's still empty, although the fetch and setNavItems are triggered:
window.__NUXT__={"data":[null],"error":null,"state":{"nav":{"navItems":[]}},"serverRendered":true}

3) Is the nuxtserverinit only possible to use in the store > index.js file? or can I also use it on my store > nav.js file.

Thank you for your help

[alexchopin]

No worries :)
1) No it's not possible, only from pages. Not really with the store usage you still keep modularity even more. Yes from pages or nuxtserverinit store method.
2) I did it on my side and works perfectly, you can try with this code in store > nav.js

export const actions = {
  async fetchNavItems (state) {
    let res = await Axios.get('https://cosmicjs.com/v1/marcocardoso/object-type/pages')
    state.commit('setNavItems', res.data.objects)
  }
};

3) Yes only in the index.js file.

[mascardoso]

Yes it does work. Thank you for the clarifications.

[lock[bot]]

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.