# vue-sanitize

> HTML sanitizer plugin for Vue 3, powered by sanitize-html.

Latest version **0.3.0** (published 2026-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-sanitize
pnpm add vue-sanitize
yarn add vue-sanitize
bun add vue-sanitize
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2026-05-21 |
| First published | 2017-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 1 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 35 |
| Author | Daichi HIRATA |
| Maintainers | daichirata |
| Keywords | vue, vue3, vue-plugin, sanitize, sanitize-html, xss |

## Links

- npm: https://www.npmjs.com/package/vue-sanitize
- Repository: https://github.com/daichirata/vue-sanitize
- Issues: https://github.com/daichirata/vue-sanitize/issues
- npm.io page: https://npm.io/package/vue-sanitize

## Dependencies (1)

- [sanitize-html](https://npm.io/package/sanitize-html.md) ^2.17.4

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2026-05-21
- 0.2.3 — 2023-01-15
- 0.2.2 — 2022-05-08
- 0.2.1 — 2020-11-04
- 0.2.0 — 2018-04-13
- 0.1.0 — 2017-10-31

## README

# vue-sanitize

HTML sanitizer plugin for [Vue 3](https://vuejs.org/), powered by [sanitize-html](https://github.com/apostrophecms/sanitize-html).

<p align="center">
  <a href="LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="Software License" />
  </a>
  <a href="https://npmjs.org/package/vue-sanitize">
    <img src="https://img.shields.io/npm/v/vue-sanitize.svg?style=flat-square" alt="npm" />
  </a>
  <a href="https://github.com/daichirata/vue-sanitize/actions/workflows/ci.yml">
    <img src="https://img.shields.io/github/actions/workflow/status/daichirata/vue-sanitize/ci.yml?branch=master&style=flat-square" alt="CI" />
  </a>
  <a href="https://github.com/daichirata/vue-sanitize/issues">
    <img src="https://img.shields.io/github/issues/daichirata/vue-sanitize.svg?style=flat-square" alt="Issues" />
  </a>
</p>

> **Note**
> Always sanitize user input on the server. Use this plugin only when client-side sanitization is genuinely needed (e.g. live markdown previews).

## Install

```bash
npm install vue-sanitize
# or
yarn add vue-sanitize
# or
pnpm add vue-sanitize
```

## Usage

### Register the plugin

```ts
import { createApp } from "vue";
import VueSanitize from "vue-sanitize";
import App from "./App.vue";

createApp(App).use(VueSanitize).mount("#app");
```

You can pass default sanitize-html options:

```ts
import VueSanitize from "vue-sanitize";

const defaultOptions = {
  allowedTags: ["a", "b"],
  allowedAttributes: {
    a: ["href"],
  },
};

createApp(App).use(VueSanitize, defaultOptions).mount("#app");
```

### Options API (`this.$sanitize`)

```vue
<template>
  <div contenteditable="true" @paste="onPaste" />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  methods: {
    onPaste(event: ClipboardEvent) {
      event.preventDefault();
      const html = this.$sanitize(event.clipboardData?.getData("text/html") ?? "");
      document.execCommand("insertHTML", false, html);
    },
  },
});
</script>
```

### Composition API (`useSanitize`)

```vue
<script setup lang="ts">
import { useSanitize } from "vue-sanitize";

const sanitize = useSanitize();

function onPaste(event: ClipboardEvent) {
  event.preventDefault();
  const html = sanitize(event.clipboardData?.getData("text/html") ?? "", {
    allowedTags: ["b", "br"],
  });
  document.execCommand("insertHTML", false, html);
}
</script>

<template>
  <div contenteditable="true" @paste="onPaste" />
</template>
```

## API

### `app.use(VueSanitize, defaultOptions?)`

Registers the plugin. `defaultOptions` are forwarded to `sanitize-html` and used whenever a call site does not pass its own options. See the [sanitize-html docs](https://github.com/apostrophecms/sanitize-html#default-options) for the full option reference.

### `this.$sanitize(dirty, options?)` / `useSanitize()(dirty, options?)`

| arg       | type     | required | description                                                              |
| --------- | -------- | -------- | ------------------------------------------------------------------------ |
| `dirty`   | `string` | yes      | The untrusted HTML to sanitize.                                          |
| `options` | `object` | no       | Per-call sanitize-html options. Falls back to the plugin defaults.       |

Returns the sanitized HTML string.

### `defaults`

Re-exports `sanitizeHtml.defaults` for inspection or extension.

```ts
import { defaults } from "vue-sanitize";
console.log(defaults.allowedTags);
```

## Security

If you discover a security issue, please email daichirata@gmail.com instead of opening a public issue.

## Contributing

1. Fork the repository
2. Create a feature branch
3. `npm install && npm run typecheck && npm test`
4. Commit and open a pull request

## License

The MIT License (MIT). See [LICENSE](LICENSE) for details.

---
_Source: https://npm.io/package/vue-sanitize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._