Vue3 Quasar Telephone Input

@tofandel/q-tel-input

The plugin was made for Vue 3 using the Quasar Framework 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 available in CodePen

---

Installation

Package manager

npm

npm i @tofandel/q-tel-input

yarn

yarn add @tofandel/q-tel-input

Import the component as

import {QTelInput} from '@tofandel/q-tel-input'

Import the styles as

import '@tofandel/q-tel-input/dist/@tofandel/style.css'

Usage

<QTelInput v-model="tel" v-model:country-code="countryCode" />

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

<QTelInput v-model="tel" dense outlined />

All the slots that are supported in quasar input field are available in the plugin as input slots. Country selection element uses #append slot

example

<QTelInput>
    <template v-slot:append>
        <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">
        </q-avatar>
    </template>
</QTelInput>

All the slots that are supported in quasar select field are available in the plugin as country select control slots with prefix cs-.

example

<QTelInput>
    <template #cs-before-options>
        <q-item>
            <q-item-section>
                This renders as before-options q-select slot in country list
            </q-item-section>
        </q-item>
    </template>
</QTelInput>

Model

Prop	Type	Description	Usage
model-value	string or number	The international phone number value	v-model="telephone_number"
country	string	The iso2 country code of the selected country	v-model:country="country"
dial-code	string	The dial code of the phone number (without plus)	v-model:dial-code="dialCode"
valid	boolean	Whether the phone number is valid or not	v-model:valid="valid"

Props

Prop	Type	Required	Description
invalid-message	String or false	No	Show this message when the phone number is not valid (set to false to disable validation)
search-label	String	No	The label for the search field inside the country dropdown
search-icon	String	No	Set the icon for the search field to something else
dropdown-options	Object	No	The props to pass to the country select
use-emoji	Boolean	No	Set to use the emoji icon instead of the default flag images
no-results-text	String	No	Set a string when the search results nothing, default: 'No results found'
output-formatted	Boolean	No	Set to true if you want the pretty formatting to be emitted in the model-value, by default no space will be present

Events

Event name	Type	Description
country	Country	Gets back the object information of a country when it changes
update:valid	Boolean	Gets back information about the validity of the phone number