Package Exports

vue-tel-input
vue-tel-input/dist/vue-tel-input.css
vue-tel-input/dist/vue-tel-input.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-tel-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

  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

made with ❤ by Steven.