Easy Email Autocomplete Component For Vue.js


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

Download Details:

Author: DannyFeliz

Live Demo: https://codesandbox.io/s/vue-template-lrkul

Download Link: https://github.com/DannyFeliz/vue-email-dropdown/archive/master.zip

Official Website: https://github.com/DannyFeliz/vue-email-dropdown

Install & Download:

# Yarn
$ yarn add vue-email-dropdown

$ npm install vue-email-dropdown --save

You Might Be Interested In:

Add Comment