Sanitize Email Directive

• A directive developed with Vue.js that sanitizes the entered email address reactively.

Installing

Package manager

Using npm:

npm i sanitize-email

Then, import and register the component:

Global Registration

main.js

import sanitizeEmail from "sanitize-email";
app.use(sanitizeEmail);

Local Registration

• Composition API

<script setup>
import { sanitizeEmail as vSanitizeEmail } from "sanitize-email";
</script>

• Options API

<script>
import { sanitizeEmail } from "sanitize-email";

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

Usage

• Example 1

<script>
import { sanitizeEmail } from "sanitize-email";

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

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

• Example 2

<script setup>
import { sanitizeEmail as vSanitizeEmail } from "sanitize-email";
import { ref } from "vue";
const email = ref("");
</script>

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

• Example 3

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

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

• Example 4

<script>
export default {
  data() {
    return {
      email: ""
    }
  }
}
</script>

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

Demo

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

License