International Telephone Input with Vuetify

vue-tel-input-vuetify

International Telephone Input with Vuetify.

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-tel-input-vuetify to newly created vue project

  npm install vue-tel-input-vuetify

Install the plugin into Vue:

With vuetify loader:

  // src/plugins/vuetify.js

  import Vue from 'vue';
  import Vuetify from 'vuetify/lib';

  Vue.use(Vuetify);

  export default new Vuetify({
  });

// src/VueComponent.js

import VueTelInputVuetify from "vue-tel-input-vuetify/lib/vue-tel-input-vuetify.vue"

<template>
  <vue-tel-input-vuetify></vue-tel-input-vuetify>
</template>

export default {
  components: {
    VueTelInputVuetify,
  },
};

// src/main.js

import Vue from 'vue';
import vuetify from "@/plugins/vuetify";

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Without vuetify loader:

  // 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 VueTelInputVuetify from "vue-tel-input-vuetify";
import vuetify from "./plugins/vuetify";

Vue.use(VueTelInputVuetify, {
  vuetify,
});

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

View all available options in Props.

Use the vue-tel-input-vuetify component:

<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
<template>

<script>
export default {
  data() {
    return {
      phone: null
    }
  }
};
</script>

Usage

Props

Events

GitHub