vue-tel-input

If you are using TypeScript in your project, you must install the type declaration files to ensure proper type checking and autocompletion for the vue-tel-input component. Install the @types/vue-tel-input package as a development dependency.

npm install --save-dev @types/vue-tel-input

You can replace the default arrow icon located next to the country flag by using the arrow-icon slot. This allows you to provide your own Vue component or HTML element to customize the appearance of the dropdown trigger.

<vue-tel-input>
  <template #arrow-icon>
    <!-- Your custom component or icon here -->
    <i class="custom-arrow-class"></i>
  </template>
</vue-tel-input>

To use vue-tel-input in a Vue 2 project, you must install the @legacy version of the package via npm.

npm install vue-tel-input@legacy

Install the package using npm:

npm install vue-tel-input

Global Installation

To install the plugin globally with optional default settings, use Vue.use():

import Vue from 'vue'
import VueTelInput from 'vue-tel-input'

// Define default global options here (optional)
Vue.use(VueTelInput, [globalOptions = {}])

Local Component Usage

To use the component directly in a specific Vue component:

<!-- your-component.vue-->
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>

<script>
import { VueTelInput } from 'vue-tel-input'

export default {
  components: {
    VueTelInput,
  },
};
</script>

After installation, import the VueTelInput component and its required CSS file, then register it as a plugin in your Vue application instance.

import Vue from 'vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');

To reduce initial bundle size, you can asynchronously import the component and its CSS. This is useful for large libraries (approx. 200kb JS and 100kb CSS) that are only needed on specific routes. Use a dynamic import that returns a Promise resolving to the component.

<!-- your-component.vue-->
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>

<script>
  const VueTelInput = () =>
    Promise.all([
      import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input'),
      import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input/vue-tel-input.css'),
    ]).then(([{ VueTelInput }]) => VueTelInput);

  export default {
    components: {
      VueTelInput,
    },
  };
</script>

To use vue-tel-input in a Vue 2 project, you must first import the default CSS and then register the component in your Vue instance. Use v-model to bind the phone number value.

1. Import the CSS: import 'vue-tel-input/dist/vue-tel-input.css';

2. Import and register the component in your Vue component.

<template>
  <vue-tel-input v-model="phone"></vue-tel-input>
</template>

<script>
import VueTelInput from 'vue-tel-input';

export default {
  components: {
    VueTelInput,
  },
  data() {
    return {
      phone: '',
    };
  },
}
</script>

The icon-right slot allows you to add an icon or element to the right side of the input field. This is commonly used for displaying validation status icons (e.g., a checkmark or error icon) or other decorative elements.

<vue-tel-input>
  <template #icon-right>
    <!-- Your validation icon or other element -->
    <span class="validation-icon">✔</span>
  </template>
</vue-tel-input>

To use the component globally, import VueTelInput and its associated CSS, then use app.use() in your main entry file. You can optionally pass a globalOptions object to define default settings for all instances of the component.

import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const globalOptions = {
  mode: 'auto',
};

const app = createApp(App);
app.use(VueTelInput, globalOptions); // Define default global options here (optional)
app.mount('#app');

To use the plugin globally with default options, import VueTelInput and its CSS, then use app.use(). You can pass a globalOptions object to app.use() to define default settings for all instances of the component.

import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const globalOptions = {
  mode: 'auto',
};

const app = createApp(App);
app.use(VueTelInput, globalOptions); // Define default global options here (optional)
app.mount('#app');

For projects using Vue via a script tag in the browser, include the following files:

<script src="https://unpkg.com/vue-tel-input@5"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-tel-input/dist/vue-tel-input.css" />

If Vue is already detected on the page, the plugin is installed automatically. Otherwise, manually install it using:

Vue.use(window['vue-tel-input']);