Compile Vue.js to static HTML

Question

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>

I take it const staticHtml = compileVueComponent(vueComponent) doesn't do what you want? — Bravo
– Bravo, Commented May 5, 2022 at 7:08
Does this answer your question? Is it possible to compile Vue.js templates to static HTML and CSS files? — evolutionxbox
– evolutionxbox, Commented May 5, 2022 at 7:25
Nuxt is already serving static files if you check the output or disable the JS on your page. — kissu
– kissu, Commented May 5, 2022 at 7:28
At runtime? Not sure how (nor why) you want it to work in that way. You need a trip to a server to generate static files. You can always fetch the .html file generated from a Node.js running server on each change or save I guess. What's the purpose of this? — kissu
– kissu, Commented May 5, 2022 at 7:38
@kissu This I not for a server application. Currently I'm attempting to build a tool for creating HTML email templates. The templates will only have to be created once ever and then these templates will be added as resources for a backend web api using C#. I have found other similar applications for this as well, but none involve the generated static files being server by a web server directly. — Montana
– Montana, Commented May 5, 2022 at 7:45

kissu · Accepted Answer · 2022-05-05 16:22:13Z

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/

edited May 5, 2022 at 16:22

answered May 5, 2022 at 8:39

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Compile Vue.js to static HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related