vue-e164

Vue.js filter for phone formatting with E.164 support

Includes:

• Filter
• Global method
• Directive

Setup

NPM

npm install --save vue-e164

CDN

<script src="//unpkg.com/vue-e164/dist/vue-e164.js"></script>

import e164 from 'vue-164'

const options = {
  plus: true,
  brackets: false,
  space: false,
  dash: false,
  areaCode: true
}

Vue.use(e164, options)

Options

plus {Boolean} - add plus symbol before area code

brackets {Boolean} - add brackets

space {Boolean} - split number by space

dash {Boolean} - split number by dash

areaCode {Boolean} - set to false to exclude area code and plus

If you want to use E.164 standart, you need this options:

{
  plus: true,
  brackets: false,
  space: false,
  dash: false,
  areaCode: true
}

Examples

| plus | brackets | space | dash | areaCode | Result | |:-----:|:--------:|:-----:|:-----:|:--------:|:----------------------:| | true | true | true | false | true | +1 (495) 000 99 88 | | false | false | false | false | true | 14950009988 | | true | false | false | false | true | +14950009988 (E.164) | | true | true | false | false | true | +1(495)0009988 | | false | true | true | false | true | 1 (495) 000 99 88 | | false | false | true | false | true | 1 495 000 99 88 | | false | true | false | false | true | 1(495)0009988 | | true | false | true | false | true | +1 495 000 99 88 | | true | true | true | true | true |+1 (495) 000 - 99 - 88| | true | true | false | true | true | +1(495)000-99-88 | | true | false | true | true | true | +1 495 000 - 99 - 88 | | false | true | true | true | true |1 (495) 000 - 99 - 88 | | true | false | true | true | true | +1 495 000 - 99 - 88 | | true | true | true | true | false | (495) 000 - 99 - 88 | | true | true | false | true | false | (495)000-99-88 | | true | false | true | true | false | 495 000 - 99 - 88 | | false | true | true | true | false | (495) 000 - 99 - 88 | | true | false | true | true | false | 495 000 - 99 - 88 |

Usage

vue-e164 adds phone filter, and can be used as any other vue.js filter.

<template>
  <p>{{ string | phone }}</p>
</template>

If you need to use different options for each element, from v0.0.2 you can use directive v-phone:

<template>
  <p v-phone="{ plus: true, brackets: false, space: false, dash: false, areaCode: true }">{{ string }}</p>
</template>

From v1.2.0 you can use global function $filterPhone:

...
methods: {
    applyFilter (phoneInput) {
        return this.$filterPhone(phoneInput, {
              plus: true,
              brackets: false,
              space: false,
              dash: false,
              areaCode: true
        })
    } 
}
...
/* Or as computed property */
...
data () {
    return {
      phone: '70005555555'
    }
},
computed: {
    filteredPhone () {
        return this.$filterPhone(this.phone, {
          plus: true,
          brackets: false,
          space: false,
          dash: false,
          areaCode: true
        })
    }
}
...

Test

npm run build
npm run test

License

MIT

Copyright (c) 2018-2020 Stanislav Mihaylov