11ty / eleventy-plugin-vue

Use Vue.js templates and Vue.js single file components in Eleventy.
195 stars 11 forks source link

Not able to use data form `serverPrefetch` #37

Open santicros opened 2 years ago

santicros commented 2 years ago

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 2 years ago

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