Skip to content

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

License

Notifications You must be signed in to change notification settings

mustafadalga/sanitize-email

Repository files navigation

Sanitize Email Directive

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

vue version vue version

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

License

License