- A directive developed with Vue.js that sanitizes the entered email address reactively.
Using npm:
npm i sanitize-email
Then, import and register the component:
main.js
import sanitizeEmail from "sanitize-email";
app.use(sanitizeEmail);
- 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>
- 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>