Home

Hello. I use Vuex and Axios.

The code works.
But, the server-side rendering, does not show the component, if I use ajax, in the source code.
I want the search engines to see the content in the source code that I get with ajax.

Static codes look at the page source.
But, I get with ajax data, does not show in the browser source code.

? Code:
<script type="text/javascript" defer>window.__NUXT__={"data":[null],"error":null,"state":{"topics":[],"categories":[]},"serverRendered":true}</script>

But the state is actually(not emty). And the data is coming.

view - not problem

vuex store - not problem

initial state ? I think the problem

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'

Vue.use(Vuex)

const defaultState = {
	topics: [],
	categories: []
}

const inBrowser = typeof window !== 'undefined'

// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__NUXT__) || defaultState

const mutations = {
	TOPICS_LIST: (state, topics) => {
		state.topics = topics
	},

	CATEGORIES_LIST: (state, categories) => {
		state.categories = categories
	}
}

export default new Vuex.Store({
	state,
	actions,
	mutations,
	getters
})

store/action.js

import request from 'axios'

request.defaults.baseURL = 'http://apiurl.com'

export const getTopics = ({ commit, state }) => {
	return request.get('movies').then((response) => {
		commit('TOPICS_LIST', response.data.data)
	}).catch((error) => {
		console.log(error)
	})
}

export const getCategories = ({ commit, state }) => {
	return request.get('genres').then((response) => {
		commit('CATEGORIES_LIST', response.data.data)
	}).catch((error) => {
		console.log(error)
	})
}

store/getters.js

export const getTopics = state => state.topics
export const getCategories = state => state.categories

component/itemList :

<script>
import { mapGetters } from 'vuex'

const fetchInitialData = store => {
	return store.dispatch(`getTopics`)
}

export default {
	prefetch: fetchInitialData,
	computed: {
		...mapGetters({
			topics: 'getTopics'
		})
	},
	mounted () {
		fetchInitialData(this.$store)
	}
}
</script>

pages/index :

<template>
  <section class="container">
		<itemList></itemList>
    <nuxt-link class="button" to="/about">
      About page
    </nuxt-link>
  </section>
</template>

<script>
import itemList from '~components/itemList.vue'
export default {
  components: {
    itemList
  }
}
</script>