Vue Tel Input

Appearance

Vue 2 Support ​

vue-tel-input@legacy

Getting started ​

  • Install the plugin:

    sh
    npm install vue-tel-input@legacy

  • Add the plugin into your app:

    javascript
    import Vue from 'vue'; import VueTelInput from 'vue-tel-input'; import 'vue-tel-input/dist/vue-tel-input.css';  Vue.use(VueTelInput);

    More info on installation

  • Use the vue-tel-input component:

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

Installation ​

npm ​

bash
 npm install vue-tel-input@legacy

Install the plugin into Vue:

javascript
import Vue from 'vue'; import VueTelInput from 'vue-tel-input'; import 'vue-tel-input/dist/vue-tel-input.css';  Vue.use(VueTelInput, options); // Define default global options here (optional)

View all available options in Props.

Or use the component directly:

html
<!-- 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>  <style src="vue-tel-input/dist/vue-tel-input.css"></style>

Browser ​

html
<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 detected in the Page, the plugin is installed automatically.

** Otherwise, manually install the plugin into Vue:

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