📞 Vue International Phone Input Component 📞

This is a Vue.js component that provides an international phone input with a country selector and mask.

1yarn add @diogoccoutinho/vue-international-phone

1npm install @diogoccoutinho/vue-international-phone

1import Vue from 'vue'
2import VueInputPhone from '@diogoccoutinho/vue-international-phone'
3import '@diogoccoutinho/vue-international-phone/dist/VueInternationalPhone.css'
4
5Vue.use(VueInputPhone)
6
7new Vue({
8  // ...
9}).$mount('#app')

1import VueInputPhone from '@diogoccoutinho/vue-international-phone'
2import '@diogoccoutinho/vue-international-phone/dist/VueInternationalPhone.css'
3
4export default {
5  // ...
6  components: {
7    VueInputPhone
8  }
9}

Usage

To use the Vue International Phone Input Component, import and register it in your Vue application:

1<VueInputPhone
2    :selectedItem="selectedCountry"
3    :phoneNumber="phoneNumber"
4    :placeholder="placeholder"
5    :custom-class="customClass"
6    @update:selectedItem="updateSelectedItem"
7    @update:phoneNumber="updatePhoneNumber"
8/>

Props

• selectedItem: Object defining the selected country (optional).

1{
2      "code": "55",
3      "name": "Brazil",
4      "flag": "br",
5      "COUNTRY_CODE": "BR",
6      "mask": "(##) #####-####",
7      "emoji": "🇧🇷"
8}

• phoneNumber: The default phone number.
• placeholder: Placeholder text for the phone number input. Default: "Phone Number" (optional).
• customClass: Custom class to style the component. It replaces the default class (optional).
• openIcon: Icon to open the country selector. Default: "▾" (optional).
• closeIcon: Icon to close the country selector. Default: "▴" (optional).
• showFlag: Boolean to control the visibility of the flags in the country selector. Default: true (optional).
• showCountryCode: Boolean to control the visibility of the country code in the country selector. Default: true (optional).
• showCode: Boolean to control the visibility of the country code in the phone number input. Default: true (optional).
• inputIconClass: Custom class to style the input icon. Default: "" (optional).

Events

• update:selectedItem: Emitted when the selected country is changed.
• update:phoneNumber: Emitted when the phone number is changed.

Examples

You can customize the appearance of the component by passing the customClass prop:

1<template>
2  <div>
3    <VueInputPhone
4        :selectedItem="selectedCountry"
5        :phoneNumber="phoneNumber"
6        :placeholder="placeholder"
7        :custom-class="customClass"
8        @update:selectedItem="updateSelectedItem"
9        @update:phoneNumber="updatePhoneNumber"
10    />
11  </div>
12</template>
13
14<script>
15  import VueInputPhone from '@diogoccoutinho/vue-international-phone';
16  import '@diogoccoutinho/vue-international-phone/dist/vueInternationalPhone.css';
17  export default {
18    components: {
19      VueInputPhone,
20    },
21    data() {
22      return {
23        selectedCountry: {},
24        phoneNumber: "", // Phone Number
25        placeholder: "Phone Number",
26        customClass: "my-custom-phone-input",
27      };
28    },
29    methods: {
30      updateSelectedItem(item) {
31        this.selectedCountry = item;
32      },
33      updatePhoneNumber(phoneNumber) {
34        this.phoneNumber = phoneNumber;
35      },
36    },
37  };
38</script>
39
40<style>
41  .my-custom-phone-input {
42    /* Your custom styles here */
43  }
44</style>

Notes

Be sure to add the provided CSS styles in the component to achieve the desired layout.

Contribution

Contributions are welcome! Feel free to submit pull requests or report issues.

Authors

• Diogo Coutinho - Initial work - diogoccoutinho

License

This project is licensed under the MIT License - see the LICENSE file for details.