Me gustaría poder tomar un componente Vue.js y compilarlo en html estático (idealmente en tiempo de ejecución). No necesito javascript pero sí estilos. Estoy buscando una biblioteca donde pueda ejecutar algo similar a esto:
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)Producción:
<body> <div style="background: red;">Hello!</div> <div style="background: blue;">World!</div> </body>No obtendrá ningún beneficio al usar Vue aquí, especialmente para las plantillas de correo electrónico, todo lo contrario (necesita ir y venir sin mucho valor adicional).
Si necesita crear algunas vistas dinámicas con datos de back-end, será mejor que use EJS , Jinja , pug o cualquier otro lenguaje de plantillas de back-end. Puede lograr una representación dinámica, bucles en listas, traer su CSS y prácticamente todo lo necesario para una plantilla de correo electrónico.
Supongo que este video también podría ser útil (no lo vi yo mismo): https://www.vuemastery.com/conferences/vueconf-us-2021/html-email-with-vue.js/