Vue Telephone Input Plugin For Qasar Frameork

Install & Download:

# Yarn
$ yarn add vue3-q-tel-input
# NPM
$ npm i vue3-q-tel-input

Description:

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:

06/13/2023

  • v1.1.7

Add Comment