vue-dompurify-html

# vue-dompurify-html `vue-dompurify-html` is a Vue.js directive that provides a safe alternative to the built-in `v-html` directive. It leverages the DOMPurify library to sanitize HTML content before it is rendered, helping to prevent cross-site scripting (XSS) vulnerabilities. ## Features - **Safe HTML rendering**: Automatically cleans HTML strings with DOMPurify before insertion into the DOM. - **Drop-in replacement**: Can be used as a direct substitute for `v-html` in Vue 2 and Vue 3 projects. - **Configurable**: Supports custom DOMPurify configuration options to tailor sanitization rules. - **TypeScript support**: Includes TypeScript definitions for better developer experience. ## Installation Install the package via npm or yarn: ```bash npm install vue-dompurify-html # or yarn add vue-dompurify-html ``` ## Usage ### Vue 3 Register the directive globally in your application entry file: ```javascript import { createApp } from 'vue' import App from './App.vue' import VueDOMPurifyHTML from 'vue-dompurify-html' const app = createApp(App) app.use(VueDOMPurifyHTML) app.mount('#app') ``` Then use it in your templates: ```html <template> <div v-dompurify-html="htmlContent"></div> </template> ``` ### Vue 2 For Vue 2, import the package and register it as a plugin: ```javascript import Vue from 'vue' import VueDOMPurifyHTML from 'vue-dompurify-html' Vue.use(VueDOMPurifyHTML) ``` ## Configuration You can pass DOMPurify configuration options directly to the directive: ```html <div v-dompurify-html="{ content: htmlContent, options: { USE_PROFILES: { html: true } } }"></div> ``` Alternatively, you can set global defaults when registering the plugin: ```javascript app.use(VueDOMPurifyHTML, { default: { USE_PROFILES: { html: true } } }) ``` ## License This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. ## Contributing Contributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) before submitting a pull request. ## Acknowledgements This package is inspired by the need for a safer way to render HTML in Vue applications and builds upon the excellent work of the DOMPurify team.