v-outer-html v1.0.2

v-outer-html directive

Usage

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>