Vue 3 Support

vue-tel-input@next

Getting started

• Install the plugin:

  npm install vue-tel-input@next
  

• Add the plugin into your app:

  import { createApp } from 'vue';
  import App from './App.vue';
  import VueTelInput from 'vue-tel-input';
  import 'vue-tel-input/dist/vue-tel-input.css';
  
  const app = createApp(App);
  app.use(VueTelInput);
  app.mount('#app');
  

More info on installation

• Use the vue-tel-input component:

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

Installation

npm

  npm install vue-tel-input@next

Install the plugin into Vue:

import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/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');

View all available options in Props (opens new window).

Or use the component directly:

<!-- your-component.vue-->
<template>
  <vue-tel-input v-model="phone" mode="international"></vue-tel-input>
</template>
<script>
  import { ref } from 'vue';
  import { VueTelInput } from 'vue-tel-input';
  import 'vue-tel-input/dist/vue-tel-input.css';

  export default {
    components: {
      VueTelInput,
    },

    setup() {
      const phone = ref(null);

      return {
        value,
      };
    },
  };
</script>

Browser

<script src="https://unpkg.com/vue-tel-input@6.0.0-beta.0"></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:

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