vue3-tel-input

vue3-tel-input

International Telephone Input with Vue.

Documentation and live demo

Visit the website

Getting started

• Install the plugin:

  npm install vue3-tel-input
  

• Add the plugin into your app:

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

Installation

npm

  npm install vue3-tel-input

Install the plugin into Vue:

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

  const VueTelInputOptions = {
    mode: "international",
    onlyCountries: ['NG', 'GH', "GB", "US", "CA"]
  }

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

View all available options in Props.

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 'vue3-tel-input'
import 'vue3-tel-input/dist/vue3-tel-input.css'

export default {
  components: {
    VueTelInput,
  },

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

    return {
      value
    }
  }
};
</script>

Browser

<script src="https://unpkg.com/vue3-tel-input"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-tel-input/dist/vue3-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']);

Use as a custom field of vue-form-generator

• Add a component using vue-form-generator's abstractField mixin

    <!-- tel-input.vue -->
    <template>
      <vue-tel-input v-model="value"></vue-tel-input>
    </template>
  
    <script>
    import { abstractField } from 'vue-form-generator';
  
    export default {
      name: 'TelephoneInput',
      mixins: [abstractField],
    };
    </script>
  

• Register the new field as a global component

    import Vue from 'vue';
    import TelInput from '<path>/tel-input.vue';
  
    Vue.component('field-tel-input', TelInput);
  

• Now it can be used as tel-input in schema of vue-form-generator

  var schema: {
    fields: [{
        type: "tel-input",
        label: "Awesome (tel input)",
        model: "telephone"
    }]
  };
  

Read more on vue-form-generator's instruction page

Changelog

Go to Github Releases

License

Copyright (c) 2018 EducationLink. Released under the MIT License.

made with ❤ by Victory Osayi initial source forked from Steven.