cube-vue-phone-number-input v0.3.0

cube-vue-phone-number-input

A super simple phone number input component for Vue built on top of the libphonenumber-js library.

Key features

• Easy to use
• Country selector and country detection
• Phone number formatting as you type
• Simple HTML structure
• Built on top of the libphonenumber-js library
• Comes with SCSS themes

Demo

Let's play with the demo.

Install

yarn add cube-vue-phone-number-input

Exemple

<template>
  <div id="App">
    <fieldset>
      <InputPhoneNumber
        class="cube-phone-number-input-inline"
        :country="country"
        v-model="phoneNumber"
        required
      />
    </fieldset>
  </div>
</template>

<script>
import InputPhoneNumber from 'cube-vue-phone-number-input'
import 'cube-vue-phone-number-input/src/scss/cube-phone-number-input-inline.scss'

export default {
  components: {
    InputPhoneNumber
  },
  data () {
    return {
      country: 'CA',
      phoneNumber: null
    }
  }
}
</script>

Props

Events

Objects

PhoneNumber

See the libphonenumber-js#phonenumber documentation.

{
  "country": "CA",
  "countryCallingCode": "1",
  "number": "+15062345678",
  "numberFormatted": "+1 506 234 5678",
  "nationalNumber": "5062345678",
  "nationalNumberFormatted": "+(506) 234-5678",
  "uri": "tel:+15062345678",
  "possible": true,
  "valid": true,
  "type": "FIXED_LINE_OR_MOBILE"
}

Country

If you want to provide your own countries prop, make sure to build an Array (or a json file) with the following structure:

[
  { "code": "US", "name": "United States" },
  { "code": "CA", "name": "Canada" },
  { "code": "FR", "name": "France" },
  …
]

countries are automatically sorted by name in the country selector.

HTML 5 Constraint Validation API

This component relies on the Constraint Validation API. Any HTML validation attribute is accepted for your own HTML validation (required, pattern…).

Also the custom validity message is set with the validityErrorMessage prop value when the phone number is not valid.