vue-phone-number-input

A beautiful text field to format phone numbers made with VueJS

Demo

Enjoy

Installation

Using yarn

yarn add vue-phone-number-input

Using npm

npm i --save vue-phone-number-input

Usage

ES6 Modules / CommonJS

import VuePhoneNumberInput from 'vue-phone-number-input'; import 'vue-phone-number-input/dist/vue-phone-number-input.css';  Vue.component('vue-phone-number-input', VuePhoneNumberInput);

<VuePhoneNumberInput v-model="yourValue" />

UMD

<VuePhoneNumberInput v-model="yourValue" />  <script src="https://unpkg.com/vue" charset="utf-8"></script> <script src="./dist/vue-phone-number-input.umd.min.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="./dist/vue-phone-number-input.css">  <script type="text/javascript">   Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default); </script>

Features List

• You can set preferred-countries, ignored-countries or have only-countries
• Validator State : input becomes green (you can modify this color with valid-color option) when the phone number is valid (can be disabled by no-validator-state attr)
• Use browser locale to set the country calling code (can be disabled & you can use default-country-code option)
• Phone number formatting while typing
• You can search your country in list (open countries list & type your country name)
• Keyboard accessibility (Arrow down, Arrow up : Countries list navigation - Escape : Close countries list)
• Phone number example for each country in placeholder/label
• Auto focus phone number input after selecting country
• You can disable the flags - no-flags props
• Set your translations

All options of VueInputUi are availables

• Differents size of input (sm or lg) size="sm|lg"
• Disabled option (disabled prop)
• Dark UI option (dark prop)
• Active a clear button by the prop clearable (cf: VueInputUi options)
• Active a loader progress bar by the prop loader (cf: VueInputUi options)
• And others `

Props API

(1) Ex : default-country-code="FR"

(2) Ex : preferred-countries="['FR', 'BE', 'DE']" This countries will be at the top of the list

(3) Loader progress bar has the input color (color props)

(4) translations comes to replace default texts - Ex :

translations="{   countrySelectorLabel: 'Code pays',   countrySelectorError: 'Choisir un pays',   phoneNumberLabel: 'Numéro de téléphone',   example: 'Exemple :' }"

Events API

Keyboard accessibility

Contribution

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Lints and fixes files

npm run lint

License

This project is licensed under MIT License