International Telephone Input with Vue
npm install vue3-tel-input 
![]()
```
npm install vue3-tel-input
- Add the plugin into your app:
`javascript
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");
`
- Use the vue-tel-input component:
`html`
bash
npm install vue3-tel-input
`Install the plugin into Vue:
`javascript
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:
`html
`$3
`html
` 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']);
`$3
- Add a component using
vue-form-generator's abstractField mixin
`html
`- Register the new field as a global component
`js
import Vue from 'vue';
import TelInput from '/tel-input.vue'; Vue.component('field-tel-input', TelInput);
`- Now it can be used as
tel-input in schema of vue-form-generator
`js
var schema: {
fields: [{
type: "tel-input",
label: "Awesome (tel input)",
model: "telephone"
}]
};
`
Read more on vue-form-generator`'s instruction pageCopyright (c) 2018 EducationLink.
Released under the MIT License.
made with ❤ by Victory Osayi initial source forked from Steven.