Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos.

Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post.

Insertar HTML en Vue

Para esto podemos usar v-html. Al usar esto, podremos inyectar HTML dentro del contenedor en el que se coloque la directiva. Por ejemplo, tenemos un div:

<div id="app">
  <h2>Probar HTML inyectado:</h2>
  <div v-html="miHtml"></div>
</div>

Al mismo le indico que el HTML que tendrá es el que esté en mi variable miHtml. Eso debe estar declarado en mi app, así:

new Vue({
  el: "#app",
  data: {
   miHtml: `<strong>Soy HTML</strong> y puedo
    <br>Ser
    <br>Inyectado
    <br>
    en Vue. Aquí un link:
    <a href="//parzibyte.me/blog">parzibyte.me/blog</a>`,
  },
  methods: {
   
  }
})

Tengo el HTML como cadena; ignora el uso de las backticks, podría ser con comillas normales; el punto es que al montar la app se inyectará el HTML:

Y si cambio el HTML desde la aplicación, se reflejará, justo como si fuera simple texto. Este HTML puede ser estático, venir de una base de datos, de una petición AJAX, etcétera.

Sé que es simple y tal vez un poco obvio, pero tal vez alguien (como yo antes de escribir esto) no sepa cómo hacerlo.

Si quieres puedes probar el ejemplo en JSFiddle.