@nanogiants/vue3-sanitize-html
v1.0.5
Published
This package contains a Vue 3 directive which adds v-sanitize-html to an element.
Downloads
877
Readme
vue3-sanitize-html
This package contains a Vue 3 directive which adds v-sanitize-html to an element.
Installation
npm i sanitize-html
npm i @nanogiants/vue3-sanitize-html
#optional
npm i @types/sanitize-html -D
# or
yarn add sanitize-html
yarn add @nanogiants/vue3-sanitize-html
# optional
yarn add @types/sanitize-html -D
Usage
main.ts
import { vSanitizeHtml } from '@nanogiants/vue3-sanitize-html';
import App from './App.vue';
const app = createApp(App);
app.directive('sanitize-html', vSanitizeHtml);
component.vue
<template>
<div v-sanitize-html="{ html }">test</div>
</template>
<script setup lang="ts">
const html = '<div><span>Test</span><img src="X" onerror="alert(document.domain)"></div>';
</script>
component.vue
with options
<template>
<div v-sanitize-html="{ html, options }">test</div>
</template>
<script setup lang="ts">
import sanitize from 'sanitize-html';
const html = '<div><span>Test</span><img src="X" onerror="alert(document.domain)"></div>';
const options: sanitize.IOptions = {
allowedTags: [],
};
</script>
args
| arg | type | | ----------- | --------------------------------------------- | | value | { html: string, options?: sanitize.IOptions } |
import sanitize from 'sanitize-html';
const html = '<div>Hello World</div>';
const options: sanitize.IOptions = {
allowedTags: [],
};
<div v-sanitize-html="{ html, options}"></div>