0

I would like to render HTML code that is generated from a declarative variable or a function (below is the example for a variable)

<template>
  <div>{{aFunctionOrAVariable}}</div>
</template>

<script>
(...)
setup() {
  let aFunctionOrAVariable = ref<string>('<div>some text</div>')
  return {aFunctionOrAVariable}
}
(...)
</script>

I know that the proper way is to have the HTML in the template and that there are possible security risks. For the sake of the question, let's assume that generating HTML in setup() is the way to go.

In the example above, the code will be escaped (so <div>some text</div> will not be rendered). Is there a way to force the rendering? (I think it was possible with filters but they are gone since v2)

WoJ
  • 27,165
  • 48
  • 180
  • 345
  • 3
    https://v3.vuejs.org/api/directives.html#v-html…? – deceze Aug 30 '21 at 09:03
  • @deceze: ohhh, I do not know how I missed that, thanks! If you do not mind turning this into an answer I will gladly accept. – WoJ Aug 30 '21 at 09:06

0 Answers0