v-sanitize-directive

Vue 3 Sanitize Input Plugin

• This is a Vue 3 directive for sanitizing input fields using DOMPurify.

Installing

Package manager

Using npm:

npm i v-sanitize-directive

Then, import and register the component:

Global Registration

In your main.js or main.ts file, globally register the plugin:

main.js

import { sanitizePlugin } from "v-sanitize-directive";
app.use(sanitizePlugin);

Local Registration

• Composition API

<script lang="ts"  setup>
import { sanitize as vSanitize } from "v-sanitize-directive";
</script>

• Options API

<script>
import { sanitize } from "v-sanitize-directive";

export default {
  directives: {
    "sanitize": sanitize
  },
}
</script>

Usage

• Example 1: Options API - In your component.

<script>
import { sanitize } from "v-sanitize-directive";

export default {
  directives: {
    "sanitize": sanitize
  },
  data () {
    return {
       text: ""
    }
  }
}
</script>

<template>
      <input v-sanitize="text"
             v-model="text"
              type="text" />
</template>

• Example 2: Composition API - In your component.

<script setup>
import { sanitize as vSanitize } from "v-sanitize-directive";
import { ref } from "vue";
const text = ref("");
</script>

<template>
      <input v-sanitize="text"
             v-model="text"
              type="text" />
</template>

• Example 3: Global Registration with Composition API.After globally registering the plugin, in your component.

<script lang="ts"  setup>
import { ref } from "vue";
const text = ref("");
</script>

<template>
      <input v-sanitize="text"
             v-model="text"
              type="text" />
</template>

• Example 4: Global Registration with Options API.After globally registering the plugin, in your component.

<script lang="ts" >
export default {
  data() {
    return {
      text: ""
    }
  }
}
</script>

<template>
      <input v-sanitize="text"
             v-model="text"
              type="text" />
</template>

Demo

• https://sanitize-input.netlify.app/

License