Vue3 Quasar Telephone Input

VUE3-Q-TEL-INPUT

The plugin was made over Vue3 with considering the Qasar Frameork v2.X. The plugin provides auto country detection on user inputs as well as dropdown for country which supports search by name, country code and country phone code.

Live preview for the code is avaialble in CodePen

Contributers are welcome.

Embed the Gist as

<script src="https://gist.github.com/CdTgr/a85f5548f08db62861091c7f85566026.js"></script>

---

Installation

Package manager

npm

npm i vue3-quasar-tel

Import the component as

import Vue3QTelInput from 'vue3-quasar-tel'

Import the styles as

import 'vue3-quasar-tel/dist/vue3-quasar-tel.esm.css'

CDN

UNPKG

http://unpkg.com/vue3-quasar-tel@latest/dist/vue3-quasar-tel.min.js
http://unpkg.com/vue3-quasar-tel@latest/dist/vue3-quasar-tel.esm.css

JSDELIVR

https://cdn.jsdelivr.net/npm/vue3-quasar-tel@latest/dist/vue3-quasar-tel.min.js
https://cdn.jsdelivr.net/npm/vue3-quasar-tel@latest/dist/vue3-quasar-tel.esm.css

Usage

<vue3-quasar-tel v-model:tel="tel" />

All the props that are supported in quasr input field are available in the plugin as well. example

<vue3-quasar-tel v-model:tel="tel" dense outlined />

Model

Prop	Type	Description	Usage
tel	string or number	The telephone value	v-model:tel="telephone_number"

Props

Prop	Type	Required	Description
required	Boolean	No	Shows error validation when the field is empty
search-text	String	No	The label for the search field inside the country dropdown
default-country	String	No	The default country to load. eg: us, ae, de, in etc.
dropdown-options	Obejct	No	The props availalbe for the Quasar Select
eager-validate	Boolean	No	Set to true if the validation needs not be run on loading
use-icon	Boolean	No	Set to use the emoji icon instead of the default flag images

Events

Emitter	Type	Description
update:tel	string	Triggers when an update is made to the model value
input	string	Triggers when the input value changes
error	boolean	true when the input is invalid and false when valid