Compile a Vue template to a string containing the HTML

Viewed 61

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?

0 Answers
Related