vue-tel-input-vuetify v1.5.3

vue-tel-input-vuetify

International Telephone Input with Vuetify.

Table of Contents

• Getting started
• Installation
  • vue-cli
  • vuetify
  • npm
• Usage
  • Props
  • Events
• Credits & Contributors

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:

  // vue.config.js

  "transpileDependencies": [
    "vuetify",
    "vue-tel-input-vuetify"
  ]

  // src/plugins/vuetify.js

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

  Vue.use(Vuetify);

  export default new Vuetify({
  });

// src/main.js

import Vue from 'vue';
import vuetify from "@/plugins/vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';

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

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

Without vuetify loader:

  // vue.config.js

  "transpileDependencies": [
    "vuetify",
    "vue-tel-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 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

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.

made with ❤ by Yoga.