Incorporating Vue into server-side rendering presents a challenge when the content data within the template needs to be fetched from another CMS server.
<template>
<h1>{{ content.heading }}</h1>
</template>
<script>
export default {
data() {
return {
content: {
heading: ''
}
}
},
created() {
axios
.get(CONTENT_RESOURCE)
.then(content => this.content = content);
}
}
</script>
Since the axios.get method is asynchronous, the server may send empty content before the request is complete.
To retrieve content using curl:
curl 'URL';
# It returns <h1></h1>,
# but I need <h1>Something here</h1>
How can I ensure that the server-side rendering includes the CMS content data?