vue-dompurify-html

vue-dompurify-html installs as a Vue 3 plugin and exposes a v-dompurify-html directive that behaves like the built-in v-html directive, except every value is passed through DOMPurify before being written into the DOM via innerHTML. This closes the well-known XSS hole that comes from binding untrusted or user-generated HTML directly with v-html.

The directive supports named sanitization configurations (different rulesets selected via the directive argument, e.g. v-dompurify-html:comments="content"), DOMPurify hook pass-through for custom sanitization behavior, and optional SSR support via getSSRProps. It ships as a small single-package repository with active CI, TypeScript types, and mutation testing (Stryker) alongside its unit test suite.

What You Get

• v-dompurify-html directive that sanitizes bound content via DOMPurify before setting innerHTML
• Vue plugin installer (app.use(vueDompurifyHTMLPlugin, config)) with global default sanitization config
• Named configuration support so different bindings on the same page can use different sanitization rules
• DOMPurify hook pass-through (uponSanitizeElement, uponSanitizeAttribute, etc.) for custom sanitization logic
• Optional SSR prop support via enableSSRPropsSupport for server-rendered Vue apps

Common Use Cases

• Rendering user-generated or CMS-sourced HTML content (comments, rich-text fields, markdown-to-HTML output) safely in a Vue app
• Replacing existing v-html usage in an app that needs to pass a security audit or satisfy an XSS-prevention requirement
• Rendering HTML fetched from third-party APIs where the content cannot be fully trusted
• Applying different sanitization policies (strict vs. permissive) to different sections of a page via named configurations

Under The Hood

Architecture - The package lives at packages/vue-dompurify-html in a Turborepo/pnpm-workspace monorepo containing just this one publishable package. src/dompurify-html.ts (171 lines) builds a Vue ObjectDirective whose mounted/updated hooks call dompurifyInstance.sanitize() on the bound value and assign the result to el.innerHTML; src/index.ts wraps that directive builder into a Vue Plugin object that registers it globally as v-dompurify-html via app.directive(...).

Tech Stack - TypeScript, built with Vite (library mode) plus tsc for declaration files, targeting Vue 3 (peerDependencies: vue ^3.4.36) and depending on dompurify ^3.4.x. Tooling includes ESLint (flat config), Vitest for unit tests, @stryker-mutator for mutation testing, and Turborepo for monorepo task orchestration.

Code Quality - test/vue-dompurify-html.spec.ts (459 lines) and test/index.spec.ts (91 lines) cover directive mounting/updating, named configurations, hook registration, and the plugin installer, using @vue/test-utils and jsdom; mutation testing via Stryker adds an extra layer of test-quality verification beyond line coverage. Types are hand-written and exported (types/index.d.ts, types/dompurify-html.d.ts) rather than solely tsc-emitted.

API Design - The directive mirrors Vue’s native v-html usage pattern almost exactly (v-dompurify-html="content"), so adoption requires changing one directive name; the plugin’s install() config (default sanitize options, named configs, hooks, SSR flag) is a single object, keeping the public surface small and consistent with Vue’s own plugin conventions.