# vue3-quasar-tel
> Vue 3 telephone input implemented over Quasar framework
Latest version **1.0.9** (published 2022-12-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue3-quasar-tel
pnpm add vue3-quasar-tel
yarn add vue3-quasar-tel
bun add vue3-quasar-tel
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-12-26 |
| First published | 2022-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | itsnouejm |
| Keywords | vue3, vue-3, vue 3, vue3-tel-input, phone input, telephone input, international phone, quasar, quasar v2, quasar framework, quasar framweork v3, country, input, country input, telephone, tel input, telephon input, international number, international, phone number, phone, q-tel, q-tel-input, q tel, q tel input, quasar telephone, quasar telephone input, quasar phone number, quasar phone, quasar phone number input, vue phone number, vue phone input, vue phone international |
## Links
- npm: https://www.npmjs.com/package/vue3-quasar-tel
- Repository: https://github.com/itsnou/vue3-quasar-tel
- Homepage: https://github.com/itsnou/vue3-quasar-tel/blob/master/readme.md
- Issues: https://github.com/itsnou/vue3-quasar-tel/issues
- npm.io page: https://npm.io/package/vue3-quasar-tel
## Dependencies (1)
- [google-libphonenumber](https://npm.io/package/google-libphonenumber.md) ^3.2.21
## Alternatives
- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads
## Recent versions
- 1.0.9 (latest) — 2022-12-26
- 1.0.8 — 2022-12-23
- 1.0.7 — 2022-12-23
- 1.0.6 — 2022-12-23
- 1.0.50 — 2022-12-23
## README
### Vue3 Quasar Telephone Input
##   [](https://www.jsdelivr.com/package/npm/vue3-q-tel-input) [](https://github.com/CdTgr/vue3-q-tel-input) [](https://www.npmjs.com/package/vue3-q-tel-input)
##### VUE3-Q-TEL-INPUT
The plugin was made over Vue3 with considering the [Qasar Frameork v2.X](https://quasar.dev/). 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 avaialble in [CodePen](https://codepen.io/CdTgr/full/OJEMZvG)
Contributers are [welcome]().
Embed the Gist as
```
```
---
#### Installation
##### Package manager
npm
```
npm i vue3-quasar-tel
```
Import the component as
```
import Vue3QTelInput from 'vue3-quasar-tel'
```
Import the styles as
```
import 'vue3-quasar-tel/dist/vue3-quasar-tel.esm.css'
```
##### CDN
###### UNPKG
```
http://unpkg.com/vue3-quasar-tel@latest/dist/vue3-quasar-tel.min.js
http://unpkg.com/vue3-quasar-tel@latest/dist/vue3-quasar-tel.esm.css
```
###### JSDELIVR
```
https://cdn.jsdelivr.net/npm/vue3-quasar-tel@latest/dist/vue3-quasar-tel.min.js
https://cdn.jsdelivr.net/npm/vue3-quasar-tel@latest/dist/vue3-quasar-tel.esm.css
```
#### Usage
```
```
All the props that are supported in [quasr input](https://quasar.dev/vue-components/input) field are available in the plugin as well.
_example_
```
```
#### Model
| Prop | Type | Description | Usage |
| ---- | ---------------- | ------------------- | -------------------------------- |
| tel | string or number | The telephone value | `v-model:tel="telephone_number"` |
#### Props
| Prop | Type | Required | Description |
| ---------------- | ------- | -------- | ------------------------------------------------------------------------------------- |
| required | Boolean | No | Shows error validation when the field is empty |
| search-text | String | No | The label for the search field inside the country dropdown |
| default-country | String | No | The default country to load. eg: us, ae, de, in etc. |
| dropdown-options | Obejct | No | The props availalbe for the [Quasar Select](https://quasar.dev/vue-components/select) |
| eager-validate | Boolean | No | Set to true if the validation needs not be run on loading |
| use-icon | Boolean | No | Set to use the emoji icon instead of the default flag images |
#### Events
| Emitter | Type | Description |
| ---------- | ------- | --------------------------------------------------- |
| update:tel | string | Triggers when an update is made to the model value |
| input | string | Triggers when the input value changes |
| error | boolean | true when the input is invalid and false when valid |
---
_Source: https://npm.io/package/vue3-quasar-tel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._