vue-safe-html

vue-safe-html

A Vue directive which renders sanitised HTML dynamically. Zero dependencies, compatible with Vue versions 3 and 2, TypeScript-ready.

Installation

Install package:

npm install vue-safe-html
# OR
yarn add vue-safe-html

Use the plugin:

import Vue from 'vue';
import VueSafeHTML from 'vue-safe-html';

Vue.use(VueSafeHTML);

Usage

In your component:

<template>
  <div v-safe-html="myUnsafeHTML">
</template>

export default {
  computed: {
    myUnsafeHTML() {
      return '<script>oh my!</script> I am safe!';
    }
  }
}

Renders to:

<div>I am safe!</div>

Options

allowedTags

Array of strings. Default: ['a', 'b', 'br', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup'].

Customize the tags that are allowed to be rendered, either by providing new ones:

Vue.use(VueSafeHTML, {
  allowedTags: ['marquee', 'blockquote'],
});

Or extending the default ones:

import VueSafeHTML, { allowedTags } from 'vue-safe-html';

Vue.use(VueSafeHTML, {
  allowedTags: [...allowedTags, 'marquee', 'blockquote'],
});

If no tags are passed, all tags are stripped:

import VueSafeHTML from 'vue-safe-html';

Vue.use(VueSafeHTML, {
  allowedTags: [],
});

It is also possible to provide custom allowed tags directly to the directive tag, using directive modifiers. This allows local override of the option:

<template>
  <!-- only allow p and strong tags -->
  <div v-safe-html.p.strong="myUnsafeHTML">
</template>

Nuxt

vue-safe-html is written as a Vue plugin so you can easily use it inside Nuxt by following the Nuxt documentation.

License

Do No Harm