Vue Telephone Input Plugin For Qasar Frameork

A fast telephone input plugin for Qasar Framework, with support for auto country detection and live filtering.

How to use it:

1. Import the component and styles.

import Vue3QTelInput from 'vue3-q-tel-input'
import 'vue3-q-tel-input/dist/vue3-q-tel-input.esm.css'

2. Add the vue3-q-tel-input component to the template.

<vue3-q-tel-input v-model:tel="tel" />

3. Available component props.

tel: { type: [String, Number], default: () => '' },
required: { type: Boolean, default: () => false },
searchText: { type: String, default: () => 'Search' },
// Quasar Select options
dropdownOptions: { type: Object, default: () => ({}) },
defaultCountry: { type: String, default: () => 'us' },
eagerValidate: { type: Boolean, default: true },

4. Events.

  • @update:tel – Triggers when an update is made to the model value
  • @input – Triggers when the input value changes
  • @error – true when the input is invalid and false when valid

Preview:

Vue Telephone Input Plugin For Qasar Frameork

Changelog:

01/26/2023

  • v1.0.51

Download Details:

Author: CdTgr

Live Demo: https://codepen.io/CdTgr/full/OJEMZvG

Download Link: https://github.com/CdTgr/vue3-q-tel-input/archive/refs/heads/master.zip

Official Website: https://github.com/CdTgr/vue3-q-tel-input

Install & Download:

# Yarn
$ yarn add vue3-q-tel-input

# NPM
$ npm i vue3-q-tel-input

Add Comment