Skip to content

Chernavskikh/vue-tel-input

 
 

Repository files navigation

vue-tel-input

International Telephone Input with Vue.

In-action GIF

Documentation and live demo

Visit the website

Getting started

  • Install the plugin:

    npm install vue-tel-input
    
  • Add the plugin into your app:

    import Vue from 'vue'
    import VueTelInput from 'vue-tel-input'
    import 'vue-tel-input/dist/vue-tel-input.css'
    
    Vue.use(VueTelInput)

    More info on installation

  • Use the vue-tel-input component:

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

Installation

npm

  npm install vue-tel-input

Install the plugin into Vue:

import Vue from 'vue'
import VueTelInput from 'vue-tel-input'
import 'vue-tel-input/dist/vue-tel-input.css'

Vue.use(VueTelInput, options) // Define default global options here (optional)

View all available options in Props.

Or use the component directly:

<!-- your-component.vue-->
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>
<script>
import { VueTelInput } from 'vue-tel-input'

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

<style src="vue-tel-input/dist/vue-tel-input.css"></style>
</script>

Browser

<script src="https://unpkg.com/vue-tel-input"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-tel-input/dist/vue-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's abstractField 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 of vue-form-generator

    var schema: {
      fields: [{
          type: "tel-input",
          label: "Awesome (tel input)",
          model: "telephone"
      }]
    };

Read more on vue-form-generator's instruction page

Changelog

Go to Github Releases

License

Copyright (c) 2018 Steven Dao. Released under the MIT License.

made with ❤ by Steven.

Packages

No packages published

Languages

  • CSS 68.1%
  • JavaScript 20.2%
  • Vue 11.4%
  • Shell 0.3%