eleventy-plugin-vue
eleventy-plugin-vue copied to clipboard
11ty
Use a `.vue` file as an Eleventy Layout.
e.g.:
<template>
<html lang="en" v-html="content"/>
</template>
<script>
export default {
props: {},
components: {}
}
</script>
and then referenced in the page template:
---
layout: "layout.vue"
---
Why is this an issue here? It seems to me that simply cutting away certain code from the plugin enables this functionality, at least partially.
Disclaimer: I am new to eleventy, with a week of experience, and has no previous experience in Vue toolchain at all.
First of all, I tried to place a Vue SFC file inside the layouts folder, which looks like this:
---
layout: layouts/base.njk
---
<template>
<div class="vue-work-here" v-html="content"/>
</template>
<script>
export default {
props: {},
components: {}
}
</script>
It is identical to the one you posted above. Referencing this template from a Markdown and everything just works. I got the following output:
<div class="vue-work-here"><h1>About Me</h1>
<time datetime="2022-06-06">06 Jun 2022</time>
<p>I am a person that writes stuff.</p>
</div>
The next thing I tried is to use Vue with another base layout, which by the way is said to be supported in the README:
---
layout: layouts/base.njk
---
<template>
<div class="vue-work-here" v-html="content"/>
</template>
<script>
export default {
props: {},
components: {}
}
</script>
Nothing happened. It seems that this plugin just ignores the YAML directive.
So I dug down a little bit in the plugin. When registering the new template format, I noticed that someone passed the following line:
https://github.com/11ty/eleventy-plugin-vue/blob/0b64bdc7897aeb78a89da1eeecb9a1d5e58f2942/.eleventy.js#L100
My guess is that this line stops eleventy to parse the file themselves and perform layout composition. So I just delete that line, along with this conditional statement:
https://github.com/11ty/eleventy-plugin-vue/blob/0b64bdc7897aeb78a89da1eeecb9a1d5e58f2942/.eleventy.js#L180
And everything just works. I can use Vue as a layout and reference other base static layout that provides things like the basic html structure. Is there anything wrong with this approach?
