vue-safe-html

!Node

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

Note: This library is not XSS-safe, but only strips tags programmatically.

Installation

Install package:

``sh
npm install vue-safe-html


OR


yarn add vue-safe-html
`

Use the plugin:

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

Vue.use(VueSafeHTML);
`

Usage

In your component:

`html

`

`js
export default {
computed: {
myUnsafeHTML() {
return ' I am safe!';
}
}
}
`

Renders to:

`html



`

$3

#### 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:

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

Or extending the default ones:

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

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

If no tags are passed, all tags are stripped:

`js
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:

`html

`

#### allowedAttributes

Array of strings. Default: []

Customize the tag attributes that are allowed to be rendered:

`js
Vue.use(VueSafeHTML, {
allowedTags: ['a'],
allowedAttributes: ['title', 'class', 'href'],
});

$3

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