Use a .vue file as an Eleventy Layout.
#5
Comments
zachleat
changed the title
.vue file as a Layout..vue file as an Eleventy Layout.
|
Test already in the repo for this one. Vue as Layout file (Issue #26) |
|
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: eleventy-plugin-vue/.eleventy.js Line 100 in 0b64bdc 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: eleventy-plugin-vue/.eleventy.js Line 180 in 0b64bdc 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? |
e.g.:
and then referenced in the page template:
The text was updated successfully, but these errors were encountered: