purrrify

🙀 Purrrify

A Nuxt module that integrates sanitize-html for sanitizing HTML content. Protects your application from XSS attacks by sanitizing any potentially dangerous HTML inputs.

Inspired by @radya/nuxt-dompurify by Pringgo Radianto (Radya). This project is a complete rewrite using a different sanitization engine (sanitize-html instead of DOMPurify) with native SSR support and typed directives.

• ✨  Release Notes

Features

• 🛡️  Sanitize HTML content using sanitize-html
• 🎯  v-sanitize-html directive for templates with full TypeScript support
• 📦  Support for multiple sanitization profiles
• 🖥️  Native SSR support — no jsdom or browser APIs required

Quick Setup

Install the module to your Nuxt application:

npx nuxt module add purrrify

Or manually:

bun add -D purrrify

Then add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['purrrify']
})

Usage

Use the v-sanitize-html directive to sanitize HTML content in your templates:

<template>
  <div v-sanitize-html="dirtyHtml" />
</template>

<script setup>
const dirtyHtml = `
<div>
  <h1>Welcome to My Website</h1>
  <p>This is a <strong>safe</strong> paragraph.</p>
  <img src="https://raw.githubusercontent.com/yanuaraditia/purrrify/HEAD/image.jpg" onerror="alert('Hacked!')" />
  <a href="https://example.com" onclick="stealCookies()">Click me!</a>
  <script>alert('XSS!')<\/script>
</div>`
</script>

Profiles

Define different sanitization configurations for specific use cases using sanitize-html options:

export default defineNuxtConfig({
  modules: ['purrrify'],
  purrrify: {
    profiles: {
      headingsOnly: {
        allowedTags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
      },
      plainText: {
        allowedTags: [],
        allowedAttributes: {}
      }
    }
  }
})

Using Profiles

Pass the profile name as an argument to the directive:

<template>
  <div v-sanitize-html:headingsOnly="dirtyHtml" />
</template>

Migrating from @radya/nuxt-dompurify

If you're switching from @radya/nuxt-dompurify, follow these steps:

1. Swap the dependency

# Remove the old module
bun remove @radya/nuxt-dompurify

# Install purrrify
bun add purrrify

2. Update nuxt.config.ts

Replace the module name and config key:

export default defineNuxtConfig({
-  modules: ['@radya/nuxt-dompurify'],
+  modules: ['purrrify'],
-  dompurify: {
+  purrrify: {
    profiles: {
      // ...
    }
  }
})

3. Update profile options

Profile options now use sanitize-html syntax instead of DOMPurify:

Example:

profiles: {
  headingsOnly: {
-   ALLOWED_TAGS: ['h1', 'h2', 'h3'],
+   allowedTags: ['h1', 'h2', 'h3'],
  }
}

For the full list of options, see the sanitize-html documentation.

4. No more SSR workarounds

Purrrify uses sanitize-html which works natively on both server and client. You can remove any jsdom-related workarounds or build configurations you had for SSR.

Acknowledgements

This module was inspired by @radya/nuxt-dompurify by Pringgo Radianto (Radya). The original module used DOMPurify with jsdom for SSR, which caused build issues in production. Purrrify is a complete rewrite using sanitize-html, which works natively on both server and client without requiring a DOM implementation.

Contribution

# Install dependencies
bun install

# Generate type stubs
bun run dev:prepare

# Develop with the playground
bun run dev

# Build the playground
bun run dev:build

# Run ESLint
bun run lint

# Run Vitest
bun run test
bun run test:watch

# Release new version
bun run release

License

MIT — Copyright (c) 2026 Yanuar Aditia.