Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-tel-input with all npm packages installed. Try it out:

var vueTelInput = require("vue-tel-input")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-tel-input v4.1.0

International Telephone Input with Vue

vue-tel-input

International Telephone Input with Vue.

In-action GIF

Useful Links

Table of Contents

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'
    
    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'

Vue.use(VueTelInput, [globalOptions = {}]) // 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,
  },
};
</script>

Browser

Include vue-tel-input in the page.

<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:

Vue.use(VueTelInput)

Or use the component directly:

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

      <!-- 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

Usage

Props

Test all props on CodeSandbox.

PropertyTypeDefault valueDescription
autocompleteString'on'Native input 'autocomplete' attribute
autofocusBooleanfalseNative input 'autofocus' attribute
defaultCountryString''Default country, will override the country fetched from IP address of user
disabledBooleanfalseDisable input field
disabledFetchingCountryBooleanfalseDisable fetching current country based on IP address of user
disabledFormattingBooleanfalseDisable formatting the phone number in the input, the formatted result still be accessible by formattedNumber returned from onInput event
dropdownOptionsObject{ disabledDialCode: false, tabindex: 0 }Options for dropdown, supporting disabledDialCode and tabindex
dynamicPlaceholderBooleanfalsePlaceholder as a sample phone number in the current country, available from v3.1.1
enabledCountryCodeBooleanfalseEnable country code in the input
enabledFlagsBooleantrueEnable flags in the input
ignoredCountriesArray[]List of countries will NOT be shown on the dropdown. ie ['AU', 'BR']
inputClassesString | Array | Object''Custom classes for the input
inputIdString''Custom 'id' for the input
inputOptionsObject{ showDialCode: false, tabindex: 0 }Options for input, supporting showDialCode (always show dial code in the input) and tabindex
maxLenNumber25Native input 'maxlength' attribute
modeString''Format number to 'international' (with + dial code) or 'national' (with 0...), available from v3.1.1
nameString'telephone'Native input 'name' attribute
onlyCountriesArray[]List of countries will be shown on the dropdown. ie ['AU', 'BR']
placeholderString'Enter a phone number'Placeholder for the input
preferredCountriesArray[]Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR']
requiredBooleanfalseRequired property for HTML5 required attribute
validCharactersOnlyBooleanfalseOnly allow valid characters in a phone number (will also verify in mounted, so phone number with invalid characters will be shown as an empty string)
wrapperClassesString | Array | Object''Custom classes for the wrapper
customValidateBoolean | RegExpfalseCustom validation RegExp for input, available from v4.1.0

Events

EventArgumentsDescriptionNotes
inputString, ObjectFires when the input changes with the argument is the object includes { number, isValid, country }onInput deprecated
validateObjectFires when the correctness of the phone number changes (from true to false or vice-versa) and when the component is mounted { number, isValid, country }onValidate deprecated
blurFires on blur eventonBlur deprecated
spaceFires on keyup.space eventonSpace deprecated
enterFires on keyup.enter eventonEnter deprecated
openFires when the flags dropdown opens
closeFires when the flags dropdown closes
country-changedObjectFires when country changed (even for the first time)Available from v2.4.2

Slots

SlotDescriptionNotes
arrow-iconReplace the arrow next to the flag with a component of your choiceAvailable from v2.4.3

Typescript Support

If you work with typescript you will need declaration requirements.

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

Credits & Contributors

Credits

Contributors

...more

made with ❤ by Steven.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free