vue-phone-number-input

import Vue from 'vue'; // Ensure Vue 2 is installed import VuePhoneNumberInput from 'vue-phone-number-input'; import 'vue-phone-number-input/dist/vue-phone-number-input.css'; // Register the component globally (common in Vue 2 applications) Vue.component('VuePhoneNumberInput', VuePhoneNumberInput); // Example Vue 2 component where it would be used const App = Vue.extend({ name: 'PhoneNumberDemo', data() { return { userPhoneNumber: '+12025550100' as string, // Initial phone number value defaultCountry: 'US' as string, phoneDetails: null as Record<string, any> | null, // To store the output object }; }, methods: { onUpdate(payload: Record<string, any>) { console.log('Phone number data:', payload); this.phoneDetails = payload; }, }, template: ` <div id="app-container"> <h2>Phone Number Entry (Vue 2)</h2> <p>Current V-Model: <code>{{ userPhoneNumber }}</code></p> <VuePhoneNumberInput v-model="userPhoneNumber" :default-country-code="defaultCountry" :no-use-browser-locale="true" :preferred-countries="['US', 'CA', 'MX', 'DE']" @update="onUpdate" :translations="{ countrySelectorLabel: 'Select Country', phoneNumberLabel: 'Enter Phone' }" /> <div v-if="phoneDetails"> <h3>Parsed Phone Details:</h3> <pre>{{ JSON.stringify(phoneDetails, null, 2) }}</pre> </div> <p style="margin-top: 20px;"><em>Note: This component is unmaintained and for Vue 2 only.</em></p> </div> `, }); // Mount the app (in a typical Vue 2 setup) // new Vue({ // el: '#app', // render: h => h(App) // });