Feel like I've looked at every forum post on the internet by the time I decided to ask the question myself. My brain is running on fumes so bear with me.
I've got a Nuxt project to host a game designer's portfolio using NetlifyCMS and VueX. I use the nuxtServerInit() function to populate the VueX store with the two types of content: 'prototypes' and 'design documents'. See bellow:
export const actions = {
// nuxtServerInit is called by Nuxt.js before server-rendering every page
async nuxtServerInit({ dispatch, getters }, { $content }) {
// Setup store with project data
const types = ['prototypes', 'design-documents']
let projectList = []
for (const type of types) {
let arr = await $content(type).fetch()
arr.forEach((element) => {
projectList.push(element)
})
}
// Sorted by date completed
projectList.sort((a, b) => (a.date < b.date ? 1 : -1))
await dispatch('projects/setProjectList', projectList, { root: true })
},
}
The same code is run on the index.vue page of my project to populate the 'Projects' component with the titles of the component.
The Nuxt generate function seems to correctly generate a page per project (either 'prototype' or 'design document'). When navigating to these pages from the homepage, no problems. However, in production, when I navigate to these pages by typing them into the address bar or even just refreshing the page after navigating to it, the console logs an error dictating that the respective project object is undefined.
I should note that I no longer have this issue in development which leads me to conclude that I must be doing something wrong before building the project before deploying it (currently I run nuxt build
and then nuxt generate
before deploying to Netlify where the build command is npm run generate
).
I did wonder if my fetch/VueX dispatch code should be done on the default.vue layout file to ensure that the content is fetched on every page that the project renders but I felt like this might lead to multiple unnecessary fetch requests. Is there somewhere more global I should be putting this code or have I simply slipped up somewhere?
Many thanks in advance for any support anyone might be able to give.