Passing html into Vue component

Don't pass HTML using attributes but using Slots:

Suppose we have a component called my-component with the following template:

<div>  <h2>I'm the child title</h2>  <slot>    This will only be displayed if there is no content    to be distributed.  </slot></div>

And a parent that uses the component:

<div>  <h1>I'm the parent title</h1>  <my-component>    <p>This is some original content</p>    <p>This is some more original content</p>  </my-component></div>

The rendered result will be:

<div>  <h1>I'm the parent title</h1>  <div>    <h2>I'm the child title</h2>    <p>This is some original content</p>    <p>This is some more original content</p>  </div></div>

You can also use Named Slots if you want to pass more than one field containing HTML.

You can inject raw html into Vue components with the v-html directive.

I had similar problem in a project some months ago. I fixed it passing the HTML code in base64 format.

my parent component :

<wysywyg id="ssaasa" :bal="to64('<strong>Me</strong>')"></wysywyg>

my method:

methods: {        to64(html) {            return btoa(html)        }    }

my component:

<template>    <div class="RenderHTMLEditor mx-3">        <label class="subtitle-1 pb-3">{{label}}</label>        <textarea html="true" v-model="to64"        width="100%"        :style="'height:'+height+'px;'"        wysywyg="true"        :name="id" :id="id"        class="tinywy">        </textarea>    </div></template><script>export default {    props: ['label', 'id', 'height', 'bal'],    data: function() {        return {                    }    },    computed: {        to64: function() {            return atob(this.bal)        }    },    mounted: function() {        window.initWy(this.id)    }}</script><style scoped>.RenderHTMLEditor {    width: 100%;}</style>