vue-telephone-input-vuetify
v1.0.4
Published
International Telephone Input with Vuetify.
Downloads
23
Readme
vue-telephone-input-vuetify
International Telephone Input with Vuetify.
Table of Contents
Installation
Example Repository
You might want to follow and use the basic example usage of this library in this repository Example
OR try from scratch with below steps
vue-cli
- create new vue project using
vue-cli
:
vue create my-app
cd my-app
vuetify
- install
vuetify
to newly created vue project
vue add vuetify
npm
- install
vue-telephone-input-vuetify
to newly created vue project
npm i vue-telephone-input-vuetify
Install the plugin into Vue:
With vuetify loader:
// vue.config.js
"transpileDependencies": [
"vuetify",
"vue-telephone-input-vuetify"
]
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
});
Without vuetify loader:
// vue.config.js
"transpileDependencies": [
"vuetify",
"vue-telephone-input-vuetify"
]
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
export default new Vuetify({
});
// src/main.js
import Vue from 'vue';
import VueTelephoneInputVuetify from 'vue-telephone-input-vuetify/lib';
import vuetify from "./plugins/vuetify";
Vue.use(VueTelephoneInputVuetify, {
vuetify,
});
new Vue({
vuetify,
render: (h) => h(App),
}).$mount("#app");
View all available options in Props.
Use the vue-telephone-input-vuetify
component:
<template>
<vue-telephone-input-vuetify v-model="phone"></vue-telephone-input-vuetify>
<template>
<script>
export default {
data() {
return {
phone: null
}
}
};
</script>
Credits & Contributors
Credits
- Telephone Number parsing, validation by awesome-phonenumber.
- Country Codes data from intl-tel-input.
- User's country by ip2c.org, request using Fetch API.
Adapted based on (https://github.com/yogakurniawan/vue-tel-input-vuetify).