Vue Tel Input

https://markminerov.github.io/vue-tel-num-input/
Admin
A customizable Vue 3 component for phone number input, featuring country selection, formatting,...
Tokens:10,283
Snippets:93
Trust Score:8.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Vue Tel Input and libphonenumber-js

Source: https://markminerov.github.io/vue-tel-num-input/getting-started

Installs the Vue Tel Input component and its peer dependency, libphonenumber-js, using npm. libphonenumber-js is used for formatting and validation.

```bash
npm i libphonenumber-js vue-tel-num-input
```

--------------------------------

### Toggle Animation in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example shows how to toggle the animation for the Vue Tel Num Input component. By using the `animation-name` prop, developers can specify different animation effects. The example sets the animation to 'fade'. Custom CSS transitions can also be registered.

```vue
<template>
  <VueTelNumInput v-model="model" animation-name="fade" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Custom Styling with Vue Tel Num Input (Disable Sizing)

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example demonstrates how to disable the component's built-in sizing and apply custom styles from scratch. By setting `:disable-sizing="true"`, developers can control the appearance of the input and its elements using CSS. The example shows overriding the border and background of the input head using scoped styles and the `:deep` selector.

```vue
<template>
  <div class="my-tel-wrap">
    <VueTelNumInput v-model="model" :disable-sizing="true" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>

<style scoped>
.my-tel-wrap :deep(.tel-num-input__head) {
  border: 1px solid #000;
  border-radius: 0;
  background: #fffbe6;
}
</style>
```

--------------------------------

### Styling Vue Tel Input via CSS Variables

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example demonstrates how to style the Vue Tel Input component using CSS variables. It shows how to override default styles for height, border-radius, font-size, prefix gap, and input width by defining these variables within a parent element's style attribute.

```vue
<template>
  <div
    style="
      --tel-input-height: 44px;
      --tel-input-border-radius: 10px;
      --tel-input-font-size: 15px;
      --tel-input-prefix-gap: 10px;
      --tel-input-input-width: 260px;
    "
  >
    <!-- VueTelNumInput component would be placed here -->
  </div>
</template>

<script setup lang="ts">
// Script setup would go here if there were dynamic logic
</script>
```

--------------------------------

### Customize Prefix Button via Slots in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example shows how to customize the prefix button in Vue Tel Input using slots. It demonstrates replacing the default flag, code, and chevron icons with custom elements like images and spans. The component relies on Vue.js and the vue-tel-num-input library.

```vue
<template>
  <VueTelNumInput v-model="model">
    <template #prefix:flag>
      <img
        :src="`/my-flags/${model.iso}.svg`"
        alt=""
        style="width: 16px; height: 12px"
      />
    </template>

    <template #prefix:code>
      <span class="text-muted">Dial {{ model.code }}</span>
    </template>

    <template #prefix:chevron>
      <svg width="12" height="12" viewBox="0 0 16 16">
        <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647..." />
      </svg>
    </template>
  </VueTelNumInput>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Programmatic Control of Vue Tel Num Input via Ref

Source: https://markminerov.github.io/vue-tel-num-input/examples

Demonstrates how to control the Vue Tel Num Input component programmatically using a template ref. It exposes methods to open the dropdown and format the number on demand.

```vue
<template>
  <VueTelNumInput ref="telRef" v-model="model" />
  <div class="mt-2">
    <button @click="open">Open dropdown</button>
    <button @click="format">Format now</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput,
  {
    type TelInputInitModel,
    type VueTelNumInputExpose,
  }
  from "vue-tel-num-input";

const model = ref<TelInputInitModel>({});
const telRef = ref<VueTelNumInputExpose | null>(null);

const open = () => telRef.value?.switchDropdown(true);
const format = () => telRef.value?.formatNow();
</script>
```

--------------------------------

### Form Example with Required Input and Submit Guard in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example shows a basic form integration with Vue Tel Input, including making the input required and implementing a submit guard. The form uses `v-model` for data binding and prevents submission if the phone number is not valid, displaying an error message. The `model.value.valid` property is used for validation.

```vue
<template>
  <form @submit.prevent="submit">
    <VueTelNumInput v-model="model" :input="{ required: true }" />
    <button type="submit">Submit</button>
    <p v-if="error" style="color:crimson">{{ error }}</p>
  </form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";

const model = ref<TelInputInitModel>({});
const error = ref("");

function submit() {
  if (!model.value.valid) {
    error.value = "Please enter a valid phone number.";
    return;
  }
  error.value = "";
  // send: model.value.value (string), plus metadata: iso/code/name
}
</script>
```

--------------------------------

### Import CSS for Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Imports the necessary CSS files for the Vue Tel Num Input component and its flags. These imports are essential for the component's styling and functionality.

```typescript
import "vue-tel-num-input/css";
import "vue-tel-num-input/flags.css";
```

--------------------------------

### Custom Search Bar Slots in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example shows how to customize the search bar within Vue Tel Input using slots. It allows for replacing the search icon and the input field itself, providing flexibility in UI design. The `search` prop can be used to configure options like auto-focus.

```vue
<template>
  <VueTelNumInput v-model="model" :search="{ autoFocus: true }">
    <template #search:icon>
      <span style="margin-left:12px">🔎</span>
    </template>

    <template #search:input>
      <input
        v-if="!searchHidden"
        v-model="model.search"
        placeholder="Type a country or code…"
      />
    </template>
  </VueTelNumInput>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";

const model = ref<TelInputInitModel>({});
const searchHidden = computed(() => false);
</script>
```

--------------------------------

### Disable List and Prefix in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example demonstrates how to disable the dropdown list and the prefix section of the Vue Tel Input component. This is achieved by setting the `list.hidden` and `prefix.hidden` props to `true`. This is useful for embedding the input alone in custom forms or dialogs.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :list="{ hidden: true }"
    :prefix="{ hidden: true }"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Control Dropdown Size in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example shows how to control the size of the dropdown list in Vue Tel Input. It uses the `list.itemsPerView` prop to set the number of items visible at once and `item-height` for individual item height. The `size` prop can also be used to set the overall input size.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :list="{ itemsPerView: 8 }"
    :item-height="48"
    size="xl"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Customize List Rows via Slots in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example demonstrates customizing the appearance of list rows in Vue Tel Input using slots like `#item:before`, `#item:code`, and `#item:countryName`. It allows for adding custom elements before list items, modifying the display of country codes, and styling country names. Ensure context is forwarded if slots expect extra data.

```vue
<template>
  <VueTelNumInput v-model="model">
    <template #item:before>
      <span>•</span>
    </template>

    <template #item:code="{ model }">
      <span class="muted">{{ model.code }}</span>
    </template>

    <template #item:countryName="{ model }">
      <strong>{{ model.name }}</strong>
    </template>
  </VueTelNumInput>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Minimal Vue Tel Num Input Usage

Source: https://markminerov.github.io/vue-tel-num-input/examples

Demonstrates the most basic implementation of the Vue Tel Num Input component. It uses `v-model` to bind to a reactive object, which will be populated with phone number and metadata by the component.

```vue
<template>
  <VueTelNumInput v-model="model" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";

const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Detect Country on Demand with Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example shows how to use the exposed API of Vue Tel Num Input to detect the user's country on demand. It utilizes a ref to access the component's methods, specifically `requestUserCountry`, which returns the ISO country code. The detected country is then logged to the console.

```vue
<template>
  <VueTelNumInput ref="telRef" v-model="model" />
  <button @click="detect">Detect country</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput,
  {
    type TelInputInitModel,
    type VueTelNumInputExpose,
  } from "vue-tel-num-input";

const model = ref<TelInputInitModel>({});
const telRef = ref<VueTelNumInputExpose | null>(null);

const detect = async () => {
  const iso = await telRef.value?.requestUserCountry();
  console.log("Detected:", iso);
};
</script>
```

--------------------------------

### Replace Input Field in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

This example demonstrates how to completely replace the default input field in Vue Tel Input with a custom one. It utilizes the `#input` slot and manually synchronizes the model value with the custom input's value and events. This allows for custom input masks and behaviors.

```vue
<template>
  <VueTelNumInput v-model="model">
    <template #input>
      <input
        :value="model.value"
        @input="onInput"
        :placeholder="`Number for ${model.name} (${model.code})`"
      />
    </template>
  </VueTelNumInput>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";

const model = ref<TelInputInitModel>({});

// Keep model in sync when replacing the input
function onInput(e: Event) {
  const v = (e.target as HTMLInputElement).value;
  model.value = { ...model.value, value: v };
}
</script>
```

--------------------------------

### Search UI Localization in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Localizes the search input UI within the Vue Tel Num Input component. The `search` prop allows customization of the placeholder text and locale for the search functionality.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :search="{ placeholder: { en: 'Search…', sk: 'Hľadať…' }, locale: 'sk' }"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Placeholders by Locale in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Sets locale-specific placeholders for the Vue Tel Num Input component. The `placeholder` prop accepts an object mapping locales to placeholder text, and `locale` sets the active locale.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :placeholder="{ en: 'Phone number', sk: 'Telefónne číslo' }"
    locale="sk"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Auto-Detect User Country in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Enables the auto-detection of the user's country for the Vue Tel Num Input component. It includes a `default-country-code` as a fallback in case auto-detection fails.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :auto-detect-country="true"
    default-country-code="US"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Native Country Names and CDN Flags in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Configures the Vue Tel Num Input component to display native country names and use flags from a CDN. The `flag.baseUrl` should point to a CORS-safe CDN hosting flag images.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    display-name="native"
    :flag="{ strategy: 'cdn', baseUrl: 'https://your-cdn.example/flags' }"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Full Search Area Override in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/slots

Demonstrates how to completely replace the search area in Vue Tel Input using the `body:search` slot. This example shows a custom search input and a clear button.

```vue
<VueTelNumInput v-model="model">
  <template #body:search>
    <div class="my-search">
      <input v-model="model.search" placeholder="Find country…" />
      <button @click="model.search = ''">Clear</button>
    </div>
  </template>
</VueTelNumInput>
```

--------------------------------

### Customize List Item Slots in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/slots

Provides examples of customizing individual list item rows in Vue Tel Input using slots like `item:before`, `item:flag`, and `item:code`. This allows for adding embellishments or replacing default elements in the country list.

```vue
<VueTelNumInput v-model="model">
  <template #item:before>
    <span>•</span>
  </template>

    <template #item:flag>
        <span class="flag-placeholder" />
    </template>

    <template #item:code>
        <span class="muted">(code)</span>
    </template>
</VueTelNumInput>
```

--------------------------------

### Validate Field and Show State in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Implements validation for the Vue Tel Num Input component, marking the field as required. It displays the validity status of the entered phone number based on the `model.valid` property.

```vue
<template>
  <div>
    <VueTelNumInput v-model="model" :input="{ required: true }" />
    <p :style="{ color: model.valid ? 'green' : 'crimson' }">
      {{ model.valid ? "Valid number" : "Invalid or empty" }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Restrict Visible Countries in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Limits the selectable countries in the Vue Tel Num Input component to a specified list ('US', 'CA', 'GB', 'SK', 'PL') using the `country-codes` prop. This provides a curated list for the user.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :country-codes="['US', 'CA', 'GB', 'SK', 'PL']"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Handle Toggle Event in Vue

Source: https://markminerov.github.io/vue-tel-num-input/events

This example shows how to capture the 'toggle' event from the Vue Tel Input component. This event is emitted when the country selection dropdown is opened or closed, with a boolean payload indicating the state. It's useful for tracking user interactions or synchronizing UI elements.

```vue
<VueTelNumInput @toggle="(open) => console.log('Dropdown:', open)" />
```

--------------------------------

### Input Behavior Customization in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Customizes the input behavior of the Vue Tel Num Input component, enabling features like clearing on country select, focusing after country select, locking country code, enabling formatting, and setting a maximum length.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :input="{
      clearOnCountrySelect: true,
      focusAfterCountrySelect: true,
      lockCountryCode: true,
      formatterEnabled: true,
      maxLength: 18,
    }"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### National Format (No Leading +XX) in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Sets the Vue Tel Num Input component to display phone numbers in a national format, omitting the international country code prefix. It also sets a default country code ('GB').

```vue
<template>
  <VueTelNumInput
    v-model="model"
    :international="false"
    default-country-code="GB"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Set Default Country and International Format in Vue Tel Num Input

Source: https://markminerov.github.io/vue-tel-num-input/examples

Configures the Vue Tel Num Input component to use a default country code ('US') and display phone numbers in an international format. The `v-model` binds to a reactive object for data management.

```vue
<template>
  <VueTelNumInput
    v-model="model"
    default-country-code="US"
    :international="true"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput, { type TelInputInitModel } from "vue-tel-num-input";
const model = ref<TelInputInitModel>({});
</script>
```

--------------------------------

### Basic Vue Tel Input Usage

Source: https://markminerov.github.io/vue-tel-num-input/getting-started

Demonstrates the basic usage of the Vue Tel Input component in a Vue 3 application. It shows how to import the component, use a ref for the phone number model, and render the input with a default country code.

```vue
<script setup lang="ts">
import { ref } from "vue";
import VueTelNumInput from "vue-tel-num-input";

const phone = ref("");
</script>

<template>
  <VueTelNumInput v-model="phone" default-country-code="US" />
</template>
```

--------------------------------

### Import Vue Tel Input Component and Styles

Source: https://markminerov.github.io/vue-tel-num-input/getting-started

Imports the Vue Tel Input component and its minimal styles into a Vue 3 project. This is a necessary step before using the component in your application.

```typescript
import VueTelNumInput from "vue-tel-num-input";
import "vue-tel-num-input/css";
```

--------------------------------

### Handle Focus and Blur Events in Vue

Source: https://markminerov.github.io/vue-tel-num-input/events

This code illustrates how to handle the 'focus' and 'blur' events emitted by the Vue Tel Input component. These events mirror the native input's focus and blur behavior, making them valuable for form validation triggers and UI state management.

```vue
<VueTelNumInput
  @focus="() => console.log('Focused!')"
  @blur="() => console.log('Blurred!')"
/>
```

--------------------------------

### Vue Tel Input Events

Source: https://markminerov.github.io/vue-tel-num-input/events

This section details the events emitted by the Vue Tel Input component and their payloads.

```APIDOC
## Vue Tel Input Events

### Description
The `<VueTelNumInput>` component emits several events to facilitate integration with forms, validation processes, and custom UI logic.

### Events

#### `update:modelValue`
- **Description**: Emitted continuously on every input change, formatting update, or when the selected country changes. It always passes the full model object, not just the string value.
- **Payload**: `TelInputModel` object containing:
  - `iso` (string): Selected country ISO2 code (e.g., "US").
  - `name` (string): Country name (native/English based on `displayName`).
  - `code` (string): Dialing code (e.g., "+1").
  - `value` (string): The raw input string.
  - `search` (string): The current search query in the country dropdown.
  - `expanded` (boolean): The state of the country dropdown (true if open, false if closed).
  - `valid` (boolean): Indicates whether the entered phone number is considered valid.

- **Example Usage**:
```vue
<VueTelNumInput v-model="model" @update:modelValue="onChange" />

<script setup lang="ts">
function onChange(val) {
  console.log("Current model:", val);
}
</script>
```

#### `toggle`
- **Description**: Fires whenever the country list (dropdown) is opened or closed.
- **Payload**: `boolean` - `true` if the dropdown is opened, `false` if closed.

- **Example Usage**:
```vue
<VueTelNumInput @toggle="(open) => console.log('Dropdown:', open)" />
```

#### `focus`
- **Description**: Emitted when the text input within the component receives focus. Mirrors the native input's focus event.
- **Payload**: `void`

- **Example Usage**:
```vue
<VueTelNumInput @focus="() => console.log('Focused!')" />
```

#### `blur`
- **Description**: Emitted when the text input within the component loses focus. Mirrors the native input's blur event.
- **Payload**: `void`

- **Example Usage**:
```vue
<VueTelNumInput @blur="() => console.log('Blurred!')" />
```

### Notes
- For simple value binding, `v-model` is the recommended approach, and manual listening to `update:modelValue` is rarely necessary.
- The `focus` and `blur` events are forwarded from the internal `<input>`. If you override the `#input` slot, you must emit these events yourself.
- The `toggle` event is useful for analytics tracking or synchronizing the dropdown state with other UI elements programmatically.
```

--------------------------------

### Configure Input Options for Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/props

This snippet demonstrates how to configure various input options for the Vue Tel Input component. It allows setting properties like 'required', 'lockCountryCode', and 'maxLength' to control the input's behavior and validation.

```vue
<VueTelNumInput
  :input="{ required: true, lockCountryCode: true, maxLength: 18 }"
/>
```

--------------------------------

### Customize Prefix Button Slots in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/slots

Demonstrates how to use slots like `prefix:flag`, `prefix:code`, and `prefix:chevron` to customize the appearance of the prefix button in Vue Tel Input. This allows for custom flags, dialing codes, and chevron icons.

```vue
<VueTelNumInput v-model="model">
  <template #prefix:flag>
    <img :src="`/flags/${model.iso}.svg`" alt="" width="16" height="12" />
  </template>

  <template #prefix:code>
    <span class="muted">{{ model.code }}</span>
  </template>

  <template #prefix:chevron>
    <svg width="12" height="12" viewBox="0 0 16 16"><path d="..." /></svg>
  </template>
</VueTelNumInput>
```

--------------------------------

### Customize Search Area Slots in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/slots

Illustrates how to customize the search input and icon within the search area of Vue Tel Input using `search:icon` and `search:input` slots. This allows for custom search icons and input field behavior.

```vue
<VueTelNumInput v-model="model">
  <template #search:icon>
    <span style="margin-left:12px">🔎</span>
  </template>

  <template #search:input>
    <input
      v-model="model.search"
      placeholder="Type a country or code…"
    />
  </template>
</VueTelNumInput>
```

--------------------------------

### Replace Input Field with Custom Logic in Vue Tel Input

Source: https://markminerov.github.io/vue-tel-num-input/slots

Shows how to replace the default input field in Vue Tel Input using the `input` slot. This requires manually syncing the `v-model` and forwarding focus/blur events to maintain component functionality.

```vue
<VueTelNumInput v-model="model">
  <template #input>
    <input
      :value="model.value"
      @input="e => model.value = { ...model.value, value: (e.target as HTMLInputElement).value }"
      @focus="$emit('focus')"
      @blur="$emit('blur')"
      :placeholder="`Number for ${model.name} (${model.code})`"
    />
  </template>
</VueTelNumInput>
```

--------------------------------

### Handle update:modelValue Event in Vue

Source: https://markminerov.github.io/vue-tel-num-input/events

This snippet demonstrates how to listen for the 'update:modelValue' event from the Vue Tel Input component. This event fires on input changes or country selection, providing the full model object as a payload. It's useful for real-time data updates and form handling.

```vue
<VueTelNumInput v-model="model" @update:modelValue="onChange" />

<script setup lang="ts">
function onChange(val) {
  console.log("Current model:", val);
}
</script>
```
Tokens:
Raw