@tofandel/q-tel-input v1.0.7

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

Props

Events