eleventy-plugin-vue icon indicating copy to clipboard operation
eleventy-plugin-vue copied to clipboard

Not able to use data form `serverPrefetch`

Open santicros opened this issue 2 years ago • 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/[email protected] or @11ty/[email protected], and Eleventy 1.0 @11ty/[email protected] :)

Thanks!

santicros avatar Nov 19 '21 16:11 santicros

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

kotgakapainor avatar Dec 09 '21 22:12 kotgakapainor