Repository files navigation

International Telephone Input with Vue.

Visit the website

• Install the plugin:

  npm install vue3-tel-input

• Add the plugin into your app:

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

  More info on installation

• Use thevue-tel-input component:

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

  npm install vue3-tel-input

Install the plugin into Vue:

import{createApp}from'vue'importAppfrom'./App.vue'importVueTelInputfrom'vue3-tel-input'import'vue3-tel-input/dist/vue3-tel-input.css'constVueTelInputOptions={mode:"international",onlyCountries:['NG','GH',"GB","US","CA"]}constapp=createApp(App);app.use(VueTelInput,VueTelInputOptions);// Define default global options here (optional)app.mount("#app");

View all available options inProps.

Or use the component directly:

<!-- your-component.vue--><template><vue-tel-inputv-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'exportdefault{components:{    VueTelInput,},setup(){constphone=ref(null);return{      value}}};</script>

<scriptsrc="https://unpkg.com/vue3-tel-input"></script><linkrel="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']);

• Add a component usingvue-form-generator'sabstractField mixin

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

• Register the new field as a global component

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

• Now it can be used astel-input in schema ofvue-form-generator

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

Read more onvue-form-generator'sinstruction page

Go to Github Releases

Copyright (c) 2018 EducationLink.Released under theMIT License.

made with ❤ byVictory Osayi initial source forked fromSteven.