vue3-tel-input
v1.0.4
International Telephone Input with Vue
7.0K/weekUpdated 3 years agoMITUnpacked: 2.9 MB
Published by Victory Osayi
npm install vue3-tel-inputvue3-tel-input
International Telephone Input with Vue.
 
Documentation and live demo
Getting started
- Install the plugin:
``
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`
Installation
$3
`
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
'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
in schema of vue-form-generator
js
var schema: {
fields: [{
type: "tel-input",
label: "Awesome (tel input)",
model: "telephone"
}]
};
`
Read more on 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.