I am using vue to prototype several components in Storybook where I just need the HTML part for later usage. So I am thinking of compiling the vue templates, but I am not quite sure if there is a tooling already available or how I would go about it.
So what I have is for example those three components:
// PrimaryButton.vue
<template>
<button class="plr-button -primary">{{ label }}</button>
</template>
<script>
export default {
name: "PrimaryButton",
props: ['label']
}
</script>
// SecondaryButton.vue
<template>
<button class="plr-button -secondary">{{ label }}</button>
</template>
<script>
export default {
name: "SecondaryButton",
props: ['label']
}
</script>
// ButtonGroup.vue
<template>
<div class="plr-button-group">
<primary-button :label="label1"></primary-button>
<secondary-button :label="label2"></secondary-button>
</div>
</template>
<script>
export default {
name: "ButtonGroup",
components: {
'primary-button': PrimaryButton,
'secondary-button': SecondaryButton,
},
props: ['label1', 'label2']
}
</script>
What I want as a compiled HTML string for ButtonGroup is this:
<div class="plr-button-group">
<button class="plr-button -primary">{{ label }}</button>
<button class="plr-button -secondary">{{ label }}</button>
</div>
I know that I could do all this using some AST transformations, but I thought that maybe there is already something in the vue ecosystem to achieve this. I don't want the props inside the templates to be replaced and there are no vue bindings except for composite components.
Does anybody know how to get the desired result?