Easy Email Autocomplete Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-email-dropdown
$ npm install vue-email-dropdown --save


A tiny email autocomplete component that shows a suggestion list containing most email service providers when you type @ in an input field.

How to use it:

1. Import the email autocomplete component.

import EmailDropdown from "vue-email-dropdown";
import "vue-email-dropdown/dist/vue-email-dropdown.css";

2. Register the component and define an array of email service providers.

export default {
  components: {
  data() {
    return {
      domains: [
      defaultDomains: ["gmail.com", "hotmail.com", "msn.com", "outlook.com", "yahoo.com"]

3. Insert the component into your template.

  <EmailDropdown :domains="domains" :defaultDomains="defaultDomains" />

4. Default props.

// initial value
initialValue: "",
// an array of domains
domains: [],
// default domains
defaultDomains: [],
// max number of suggestions
maxSuggestions: 4
// close on click outside
closeOnClickOutside: true

Add Comment