vue3-tel-input
v1.0.4
Published
International Telephone Input with Vue
Downloads
15,933
Maintainers
Readme
vue3-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:
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:<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
'sabstractField
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 ofvue-form-generator
var schema: { fields: [{ type: "tel-input", label: "Awesome (tel input)", model: "telephone" }] };
Read more on vue-form-generator
's instruction page
Changelog
License
Copyright (c) 2018 EducationLink. Released under the MIT License.
made with ❤ by Victory Osayi initial source forked from Steven.