Get code from a slot.

[Decipher]

As a user I want the ability to wrap my code with a the vue-live component so it's code readable but still works.

Currently I have to set my code to a prop, which results in this:

<vue-live :code="`<un-readable nested-props='{ tooMuch: true }' />`" />

When it would be much nicer to write it like this:

<vue-live>
  <read-able
    :clean="true"
  />
</vue-live>

[elevatebart]

Hello @Decipher,

This is a great idea. It looks much cleaner indeed. It was my initial idea too but I abandoned it. It is almost impossible to ask VueJs NOT to render a template.

In styleguidist & in vuepress I preferred a markdown approach. I rarely use vue-live as is, but mostly as part of a bigger plugin. This way I almost never have to use the syntax described above.

I say almost impossible, because, in-theory, we could write an intermediary webpack loader. It would detect and transform vue-live instances from read-able to un-readable but working before the vue-loader picks it up ad transforms it.

Would you be interested in creating such a loader?

[Decipher]

Hi @elevatebart,

I will look more into this as soon as I have a free opportunity.

I plan to investigate writing my own webpack loaders anyway, so this would be a good way to learn.

[jannikbuscha]

You can get Slot Content in Vue 3 with:

<template>
<VueLive :code="slots.default()[0].children[0]" />
</template>

<script setup>
import { VueLive } from 'vue-live';
import 'vue-live/lib/vue-live.esm.css';

import { useSlots } from 'vue';
const slots = useSlots();
</script>

[elevatebart]

Agreed, the content of this slots is not the code as far as I know. What vue-live needs is the code. I am wondering if it can be extracted though.

[elevatebart]

I think we could probably do it using the same method as histoire If you have a minute for a PR that would be incredibly awesome.

example: https://github.com/histoire-dev/histoire/blob/8ae9b9235c97af0eba17a765ee7a4f14af853267/packages/histoire-plugin-vue/src/client/app/RenderStory.ts#L88-L107