A Lightweight And Customizable Email Autocomplete For Vue.js

Category: Vue.js Vue.js Form | June 28, 2021
Author: jameswylie
Official Page: Go to website
Last Update: June 28, 2021
License: MIT

Description:

A lightweight, easy to use and customizable email autocomplete for Vue.js, which enables your user out of the box email autocomplete.

Features:

  • It supports wrapper component.
  • Fully customizable.
  • Navigate the suggestions list by using up/down keys.

How can I use it?

First, install the component using NPM.

npm install vue-email-autocomplete --save

Or, you may install it with Yarn.

yarn add vue-email-autocomplete

HTML.

<template>

  <email-autocomplete ref="EmailAutoComplete" :onCompletion='(val) => emailAddress = val'>
    <input type="text" v-model='emailAddress' @keydown.native='$refs.EmailAutoComplete.check($event)' />
  </email-auto-complete>

</template>

Then, import the component and write the code as following.

<script>
/* Import Package and Styles */
import EmailAutoComplete from "vue-email-autocomplete";
import "vue-email-autocomplete/dist/vue-email-autocomplete.css";
export default {
  /* Import Component */
  components: {
    EmailAutoComplete
  },
  /* Prime Model as Standard */
  data() {
    return {
      emailAddress: ''
    }
  }
}
</script>