es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo utilizar código JSX/HTML en componentes Data() de Vue 3 con VITE.

19 Jul, 2023 Programación

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

Imagen

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?

Imagen

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 paquete vue-template-compiler.

    Para instalar el paquete rollup-plugin-vue, ejecuta:

    npm install --save-dev rollup-plugin-vue

    Luego, en tu archivo rollup.config.js, agrega el siguiente código:

    import vue from 'rollup-plugin-vue';

export default {
  plugins: [
    vue({ template: { isProduction: true } }),
  ],
};

    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.

Comments are closed.