Vue component

This project includes an official Vue component alongside the original JavaScript plugin. It supports all of the same features, including the country picker, formatting, and validation, and comes with TypeScript type definitions included. View all of the supported props in the Vue component docs.

Below is a live demo and example code demonstrating form integration, validation, and error messaging. For more patterns and use cases, explore the Vue demos.

JavaScript

<script setup>
  import IntlTelInput from "intl-tel-input/vue";
  import "intl-tel-input/styles";

  const isValid = ref(null);
  const number = ref(null);
  const errorCode = ref(null);
  const notice = ref(null);

  const errorMap = [
    "Invalid number",
    "Invalid country code",
    "Too short",
    "Too long",
    "Invalid number",
  ];

  const handleSubmit = () => {
    if (isValid.value) {
      notice.value = `Valid number: ${number.value}`;
    } else {
      const errorMessage = errorMap[errorCode.value || 0];
      notice.value = `Error: ${errorMessage}`;
    }
  };
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <IntlTelInput
      @changeNumber="number = $event"
      @changeValidity="isValid = $event"
      @changeErrorCode="errorCode = $event"
      :options="{
        initialCountry: 'us',
        loadUtils: () => import('intl-tel-input/utils'),
      }"
    />
    <button type="submit">Validate</button>
    <div v-if="notice" class="notice">{{ notice }}</div>
  </form>
</template>