Not able to use data form `serverPrefetch`
santicros opened this issue · 1 comments
santicros commented
Hi! I'm loving using this plugin for Eleventy. The problem I'm having is that I'm not able to use serverPrefetch
, it always returns undefined content to the template.
I've put the demo code from the README.md
<template>
<header v-html="content"/>
</template>
<script>
export default {
async serverPrefetch() {
// let content = await this.renderFile("./_includes/blogpost.md", "md");
let content = await this.renderTemplate("# Title", "md");
return {
content
};
}
}
</script>
And I get the error [Vue warn]: Property "content" was accessed during render but is not defined on instance.
and on the template is shows undefined
.
I've tried it to make it work with @11ty/eleventy-plugin-vue@0.6.0
or @11ty/eleventy-plugin-vue@0.6.0
, and Eleventy 1.0
@11ty/eleventy@1.0.0-beta.8
:)
Thanks!
kotgakapainor commented
Hey, this works for me:
"@11ty/eleventy": "^1.0.0-beta.8",
"@11ty/eleventy-plugin-vue": "^0.6.0",
<template>
<div>
<div v-html="renderedContent" />
</div>
</template>
<script>
export default {
data() {
return {
renderedContent: undefined,
}
},
async serverPrefetch() {
await this.getContent()
},
methods: {
async getContent() {
let renderedContent = await this.renderTemplate(this.content, 'md')
this.renderedContent = renderedContent
},
},
}
</script>
As I understand it, this is the vue way of doing it. As you can read in the vue docs
The readme of this plugin should be updated.
kind regards