Vue-e164 NPM | npm.io

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
        })
    }
}
...