'Compile Vue.js to static HTML

I would like to be able to take a Vue.js component and compile it to static html (ideally at runtime). I do not need any javascript but I do need styles. I'm looking for a library where I could run something along the lines of this:

SomeNestedComponent.vue

<template>
  <div class="world">
    World!
  </div>
</template>

<style lang="scss">
.world {
  background: blue;
}


const vueComponent = `
<template>
  <div class="hello">Hello!</div>
  <SomeNextedComponent />
</template>

<style lang="scss">
.hello {
  background: red;
}
</style>
`

const staticHtml = compileVueComponent(vueComponent)

Output:

<body>
  <div style="background: red;">Hello!</div>
  <div style="background: blue;">World!</div>
</body>
javascripthtmlcssvue.jsnuxt.js


Solution 1:[1]

You will not get any benefits from using Vue here especially for email templates, quite the opposite (need back and forth without a lot of plus value).

If you need to create some dynamic views with backend data, you'll better be using EJS, Jinja, pug or any other backend templating language. You could achieve dynamic rendering, looping on lists, bring your CSS and pretty much everything needed for an email template.

This video could also be somehow helpful I guess (didn't watched it myself): https://www.vuemastery.com/conferences/vueconf-us-2021/html-email-with-vue.js/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions