11ty / eleventy-plugin-vue

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

Allows Vue Components to be used in {% renderTemplate %} #43

Closed kotgakapainor closed 1 year ago

kotgakapainor commented 2 years ago

By my understanding, renderTemplate does not currently support rendering of components.

where Test.vue is

<template>
    <div>
        test vue file
        <slot></slot>
    </div>
</template>

<script>
export default{
    name: 'Test',
} 
</script>

called in the markdown file

{% renderTemplate "vue" %}
<div>
  THIS IS VUE
  <Test/>
</div>
{% endrenderTemplate %}

will result in something like

<div>
THIS IS VUE
<test></test>
</div>

My expected result would be

<div>
  THIS IS VUE
  <div>
     test vue file
  </div>
</div>

To overcome this shortcoming i propose to make all the compiled components globally available to the internal vue app. In my draft, to make it consistently work ,the vue component needs to be named. Or else the file name could be extracted from the file path.