CODEWITHSUNDEEP
javascripthtmlcssvue.jsnuxt.js
Montana
Montana

Reputation: 502

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>

Upvotes: 0

Views: 858

Answers (1)

kissu
kissu

Reputation: 46677

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/

Upvotes: 1

Related Questions