vue-sanitize

library0.3.0jsnpmunverified

A Vue 3 plugin for client-side HTML sanitization, wrapping the popular sanitize-html library. Current stable version is 0.3.0 (released 2023-09-07, semver patch). Ships TypeScript types, requires Node >=18 and Vue ^3.0. Allows both Options API (this.$sanitize) and Composition API (useSanitize) usage. Supports per-call and default configuration options. Useful for scenarios like live markdown previews or rich text pasting where server-side sanitization must be complemented.

security

npm install vue-sanitize

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-SANITIZE

vue-sanitize

securityjavascriptv0.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (VueSanitize)

✓ import VueSanitize from 'vue-sanitize'

✗ const VueSanitize = require('vue-sanitize')

Package is ESM-only since version 0.2.0; CommonJS require will fail. Use ES import syntax.

useSanitize

✓ import { useSanitize } from 'vue-sanitize'

✗ import useSanitize from 'vue-sanitize/useSanitize'

useSanitize is a named export, not a default export. Avoid incorrect subpath imports.

defaults

✓ import { defaults } from 'vue-sanitize'

✗ const { defaults } = require('vue-sanitize')

Named export; also ESM-only. Re-exports sanitize-html defaults.

this.$sanitize

✓ this.$sanitize(dirty, options?) // inside Options API component

✗ this.$sanitize(dirty, options) // outside of component context

Only available after plugin registration with app.use(). Not accessible before mount.

VueSanitize (type for plugin)

✓ import type { VueSanitizePlugin } from 'vue-sanitize'

TypeScript users can import the plugin type if needed, though not commonly used.

Registers the plugin with custom sanitize-html options and demonstrates sanitizing untrusted HTML in both Options and Composition API.

import { createApp } from 'vue'; import VueSanitize from 'vue-sanitize'; import App from './App.vue'; const app = createApp(App); app.use(VueSanitize, { allowedTags: ['b', 'i', 'em', 'strong', 'a'], allowedAttributes: { a: ['href'] }, }); app.mount('#app'); // In a component (Options API): // this.$sanitize('<script>alert(1)</script>') // Returns: '' // In a component (Composition API): // const sanitize = useSanitize(); // sanitize('<img src=x onerror=alert(1)>') // Returns: ''

Debug

Known issues

deprecatedVue 2 is not supported; this plugin is Vue 3 only.

fix

Use vue-sanitize@0.2.0 for Vue 2 (unsupported) or migrate to Vue 3.

affects: >=0.0.0

gotchaClient-side sanitization is not a substitute for server-side sanitization. This plugin should only be used for immediate UI feedback.

fix

Always sanitize on the server; use this plugin only for live previews or paste handling.

affects: >=0.0.0

breakingDropped CommonJS support; package is ESM-only since version 0.2.0.

fix

Use ES import syntax. If you need CommonJS, pin to version 0.1.0 (Vue 3) but it's deprecated.

affects: >=0.2.0

gotchaThe plugin defaults are overridden per-call only if you pass options; otherwise fallback to defaults. Options merging is not deep; sanitize-html's default options are applied first.

fix

If you need to extend defaults per call, you must re-specify all desired options or merge manually.

affects: >=0.0.0

deprecatedThe 'defaults' export is a re-export of sanitize-html's defaults; do not rely on it as stable API across major sanitize-html versions.

fix

Pin sanitize-html version via package.json resolutions if you depend on specific defaults.

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'vue-sanitize' or its corresponding type declarations.

Missing TypeScript types or ESM import issue.

fix

Ensure your project has 'moduleResolution': 'node' (or 'node16') in tsconfig.json. The package ships types, so no @types/vue-sanitize needed.

Uncaught TypeError: this.$sanitize is not a function

Plugin not installed via app.use() or called before mount.

fix

Call `app.use(VueSanitize)` before mounting the app. Ensure component is a Vue 3 component.

Must use import to load ES Module: /path/to/node_modules/vue-sanitize/dist/index.mjs

Using CommonJS require() to load an ESM-only package.

fix

Use `import` syntax instead of `require()`. If your project is CommonJS, upgrade to ESM or downgrade to vue-sanitize@0.1.0.

TypeError: sanitize is not a function

In Composition API, forgetting to call useSanitize() to get the function.

fix

const sanitize = useSanitize(); // returns the sanitize function, then sanitize(dirty)

Upgrade

Version history

0.3.0latest on npm

Audit

Dependencies

vuerequiredpeer dependency: Vue 3 required for plugin and composable injection

sanitize-htmlrequiredruntime dependency: core sanitization logic

Agent activity

36 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/daichirata/vue-sanitize ↗

packagevue-sanitize ↗

homepagehttps://github.com/daichirata/vue-sanitize ↗