[247] Can't get nuxt / vuejs to render store properly in the server.

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.