Vue 3 headless tel input docs

Installation

With npm

npm install vue3-headless-tel-input

With yarn

yarn add vue3-headless-tel-input

Official documentation

Usage

Import composable and give returned ref to the input

1import { useTelInput } from "vue3-headless-tel-input"
2
3const {
4  inputRef, 
5  countries, selectedCountry, selectedCountryObject, 
6  value, unmaskedValue 
7} = useTelInput(input)

Template part

1<template>
2  <div>
3    <select v-model="selectedCountry">
4      <option v-for="country in countries" :key="country.code" :value="country.code">
5        {{ country.callingCode }}
6      </option>
7    </select>
8    <input ref="inputRef" />
9  </div>
10</template>

Vue component example with v-model

1<script setup>
2import { toRef, watch } from "vue"
3import { useTelInput } from "vue3-headless-tel-input"
4
5const props = defineProps({
6  modelValue: String,
7  default: undefined
8});
9const emit = defineEmit(["update:model-value"])
10
11const value = toRef(props, "modelValue");
12
13const { inputRef, selectedCountry, selectedCountryObject, unmaskedValue } = useTelInput(value);
14
15watch(unmaskedValue, () => {
16  emit("update:model-value", unmaskedValue.value);
17});
18</script>

1<template>
2  <div>
3    <select v-for="country in countries" :key="country.code" v-model="selectedCountry">
4      <option :value="country.code">
5        {{ country.name.common }} {{ country.callingCode }}
6      </option>
7    </select>
8    <input ref="inputRef" />
9  </div>
10</template>