Currently working on a Nuxt.js website and encountering an issue. Initially, nuxt.config.js was set up as below to enable a headless CMS.
export default {
target: "static",
ssr: true,
generate: {
async routes() {
const pages = await axios
.get(
`https://path/to/endpint`,
{
headers: { "XXXX-API-KEY": process.env.API_KEY },
}
)
.then((res) =>
res.data.contents.map((content) => ({
route: `/${content.id}`,
payload: content,
}))
);
return pages;
},
},
//other settings omitted
Next, a page was created at "/pages/_id/index.vue" with the following code:
<template>
<div class="article">
<p>{{ content.title }}</p>
</div>
</template>
<script>
export default {
name: "",
async asyncData({ payload }) {
if (payload) {
return {
content: payload,
};
}
},
};
</script>
Upon running "nuxt start" and previewing the page, although "content.title" is displayed successfully, a console error occurs stating "TypeError: Cannot read properties of undefined (reading 'title')". The behavior seems peculiar since nuxt generate should only create static-transpiled files, however this error suggests that a vue variable is being re-evaluated in the browser...
https://i.sstatic.net/nAauz.png
This same code placed on a static route like pages/preview/index.vue does not trigger the error. Any insights or solutions would be greatly appreciated.