I have a working VueJS app with nested components.

In one of the components, I want to be able to inject arbitrary HTML but I don't want VUEJS to parse it : I want plain old HTML tags (scripts, iframes, style, divs, native events, whatever I need).

I know I can do that outside the root "#app", but is there a way to do that inside it ?

Thanks.

CodePudding user response：

You can use v-html directive, it takes an expression that evaluates to a string and sets the element's innerHTML to that string. Vue won't parse it as a template and insert it into the DOM instead. This is one of those things that you need to pay attention to security for.

See docs: https://vuejs.org/api/built-in-directives.html#v-html