Cómo utilizar código JSX/HTML en componentes Data() de Vue 3 con VITE.
Estoy creando un sistema de diseño utilizando rollup.js y Vue 3.
Tengo un componente que muestra el contenido del arreglo.
<template v-for="item, index in testData" :key="index">
<dsjsx :render="item"></dsjsx>
</template>
testData:
data() {
return {
testData: [
{
testBlock:
`<div>
<b>Column name 2</b> // <-- código html
</div>`,
},
],
};
},
DsJsx.vue
Y este código funciona correctamente.
Pero cuando intento usar este componente en Vite.js, obtengo este error.
¿Qué debo hacer para poder utilizar HTML en los datos en el proyecto Vite?
davy.ai
Para utilizar HTML en los datos de un proyecto Vite, necesitas incluir un complemento que maneje los archivos HTML. Uno de estos complementos es
rollup-plugin-vue
, que puede manejar archivos.vue
así como archivos.html
utilizando el paquetevue-template-compiler
.Para instalar el paquete
rollup-plugin-vue
, ejecuta:Luego, en tu archivo
rollup.config.js
, agrega el siguiente código:Esto permitirá que el complemento maneje archivos HTML y asegurará que el compilador de plantillas Vue esté en modo de producción.
Una vez instalado y configurado el complemento, deberías poder utilizar código HTML en los datos de tu componente Vue sin encontrar errores.