Vue-telephone-input-vuetify NPM

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>