Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

anq-phone-number-input

AymaneNahji164MIT0.0.19TypeScript support: included

A powerful, customizable phone number input component for Quasar Framework and Vue 3 applications. Features include international phone number formatting, validation, and seamless integration with Quasar's design system.

anq-phone-number-input, phone number, quasar phone input, vue phone input, quasar framework, vue 3, phone number validation, international phone, phone input component, quasar components, vue components, responsive phone input, customizable phone input, typescript phone input

readme

An-Quasar Phone Number Input

A Vue 3 component for phone number input with country selection, built with Quasar Framework.

Features

  • Country selection with flag icons
  • Phone number formatting
  • Customizable labels
  • Country exclusion support
  • Built-in validation
  • TypeScript support
  • Quasar Framework integration

Installation

npm install anq-phone-number-input

Basic Usage

<template>
  <AnqPhoneNumberInput
    v-model="phoneNumber"
    @selectCountry="onCountrySelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AnqPhoneNumberInput from 'anq-phone-number-input'
import type { ICountryData } from 'countries-list'

const phoneNumber = ref('')

const onCountrySelect = (country: ICountryData) => {
  console.log('Selected country:', country.name)
}
</script>

Props

Prop Type Description
modelValue string The phone number value (v-model)
label string Label for the phone number input field
countryProps object Configuration for country selection
rules array Validation rules (compatible with Quasar's validation)

CountryProps Options

Option Type Description
label string Label for the country select field
defaultCountry string Default country code (e.g., 'US')
excludeCountries string[] Array of country codes to exclude

Events

Event Parameters Description
selectCountry ICountryData Emitted when a country is selected

Examples

Basic Usage

<AnqPhoneNumberInput
  v-model="phoneNumber"
  @selectCountry="onCountrySelect"
/>

With Custom Labels

<AnqPhoneNumberInput
  v-model="phoneNumber"
  :countryProps="{
    label: 'Select Country',
    defaultCountry: 'US'
  }"
  label="Enter Phone Number"
/>

With Excluded Countries

<AnqPhoneNumberInput
  v-model="phoneNumber"
  :countryProps="{
    excludeCountries: ['RU', 'CN'],
    defaultCountry: 'US'
  }"
/>

With Validation

<AnqPhoneNumberInput
  v-model="phoneNumber"
  :rules="[val => !!val || 'Phone number is required']"
/>

Dependencies

  • Vue 3
  • Quasar Framework
  • countries-list

License

MIT