vue-tel-input

International Telephone Input with Vue.
Useful Links

Table of Contents

Getting started
Installation
Usage
- Props
- Events
- Slots
Typescript Support
Credits & Contributors

Getting started

Install the plugin:
```
npm install vue-tel-input
```

Add the plugin into your app:

	source-js
import Vue from 'vue'
import VueTelInput from 'vue-tel-input'

Vue.use(VueTelInput)

More info on installation

Use the vue-tel-input component:

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

Installation

npm

source-shell
npm install vue-tel-input

Install the plugin into Vue:

source-js
import Vue from 'vue'
import VueTelInput from 'vue-tel-input'

Vue.use(VueTelInput, [globalOptions = {}]) // Define default global options here (optional)

View all available options in Props.

Or use the component directly:

text-html-basic
<!-- 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,
  },
};
</script>

Browser

Include vue-tel-input in the page.

text-html-basic
<script src="https://unpkg.com/vue-tel-input"></script>

If Vue is detected in the Page, the plugin is installed automatically.

Manually install the plugin into Vue:

source-js
Vue.use(VueTelInput)

Or use the component directly:

source-js
Vue.component('vue-tel-input', VueTelInput.VueTelInput)

Use as a custom field of vue-form-generator

Check out the setup in CodeSandbox.

Add a component using vue-form-generator’s abstractField mixin

	text-html-basic
  <!-- 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>

	source-js
 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

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

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

Usage

Props

Test all props on CodeSandbox.

Typescript Support

If you work with typescript you will need declaration requirements.

source-shell
npm install --save-dev @types/vue-tel-input

Download Details:

GitHub: https://github.com/EducationLink/vue-tel-input

Download Link: https://github.com/EducationLink/vue-tel-input/archive/master.zip

#vuejs #javascript #vue-js

International Telephone Input with Vue.js