Use a `.vue` file as an Eleventy Layout.

zachleat commented 4 years ago

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"
---

zachleat commented 3 years ago

Test already in the repo for this one. Vue as Layout file (Issue #26)

notcome commented 2 years ago

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?

11ty / eleventy-plugin-vue

Use a `.vue` file as an Eleventy Layout. #5