Create telephone input with country code for Vue.js – vue-tel-input

Category: Vue.js Vue.js Form | August 5, 2021
Author: iamstevendao
Official Page: Go to website
Last Update: August 5, 2021
License: MIT

vue tel input

Description:

Are you creating a form in Vue.js, where you will need to created a telephone input with country code? If your answer is yes then, you are at the right place. By using vue-tel-input component, you will get the full list of country in your input box with country flag.

You might be interested in:

How can I use it?

1. You will need to install the component with npm, like this:

npm install vue-tel-input

2. Then, import the component in your file.

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

3. Register the component.

Vue.use(VueTelInput);

4. Now, use the vue-tel-input component in your template file show the telephone input with country code.

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

And, you are done. 🙂