v-outer-html

v-outer-html directive

Usage no npm install needed!

<script type="module">
  import vOuterHtml from 'https://cdn.skypack.dev/v-outer-html';
</script>

README

v-outer-html directive

Usage

| npm install v-outer-html | yarn add v-outer-html | |--|--|

Works same as v-html but replaces the element with directive instead of putting elements inside it.

import Vue from 'vue';
import vOuterHTML from 'v-outer-html';
Vue.directive('outer-html', vOuterHTML);

let htmlContent = `
  <h1>Title</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quia dolorem iste expedita, molestias ipsam.
  </p>
`
<div v-outer-html="htmlContent"></div>

<!--produces this-->
<h1>Title</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quia dolorem iste expedita, molestias ipsam.
</p>

<!--instead of this-->
<div>
  <h1>Title</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quia dolorem iste expedita, molestias ipsam.
  </p>
</div>