11ty/eleventy-plugin-vue

Not able to use data form `serverPrefetch`

santicros opened this issue · 1 comments

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!

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