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 |