A Vue.js filter that formats a phone number.

index.html

<input type="text"
       name="home_phone"
       class="form-control"
       v-model="homePhone | phone"
       lazy>

vuejs-filters-phone.js

/**
 * Formats a phone number.
 * Example: 123-456-7890 => (123) 456-7890
 *
 * @param {String} phone
 * @return {Void}
 */
Vue.filter('phone', function (phone) {
    return phone.replace(/[^0-9]/g, '')
                .replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
});

Or there is vue-cleave

Wait, does this work? I didn't know v-model allows you to add filter like that in Vue2

@pxwee5 yup, they brought back filters for Vue 2.

How would this work for two-way binding since that's been removed in 2.0?

I receive the following error and won't compile: SyntaxError: Assigning to rvalue

filters don't work on v-model any more.

Hi, is there any library support this kind of format?

Just use vue-the-mask. v-mask="['(###) ###-###']"