Easy Email Autocomplete Component For Vue.js

Install & Download:

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

Description:

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: {
    EmailDropdown
  },
  data() {
    return {
      domains: [
        "yourcompany.com",
        "gmx.de",
        "googlemail.com",
        "hotmail.fr",
        "hotmail.it",
        "web.de",
        "yahoo.co.in",
        "yahoo.com",
        "yahoo.in"
      ],
      defaultDomains: ["gmail.com", "hotmail.com", "msn.com", "outlook.com", "yahoo.com"]
    };
  }
};

3. Insert the component into your template.

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

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