{"id":12543,"library":"vue-phone-number-input","title":"Vue Phone Number Input","description":"Vue-phone-number-input is a Vue 2 component designed to provide a comprehensive international phone number input field. It leverages the robust `libphonenumber-js` library for accurate parsing, formatting, and validation of phone numbers. While the current stable version is 1.12.13, the package is explicitly marked as unmaintained by its author. It offers features such as country code selection, automatic number formatting while typing, validator state indication, locale detection, and accessibility improvements. However, for ongoing support, compatibility with newer Vue versions, and continued development, developers are strongly advised to migrate to the `MazPhoneNumberInput` component, which is available within the `maz-ui` library (v2.x for Vue 2 projects and v3.x for Vue 3 projects), as this standalone package receives no further updates.","status":"abandoned","version":"1.12.13","language":"javascript","source_language":"en","source_url":"https://github.com/LouisMazel/vue-phone-number-input","tags":["javascript","vue","vuejs","input","phone","number","format","text","typescript"],"install":[{"cmd":"npm install vue-phone-number-input","lang":"bash","label":"npm"},{"cmd":"yarn add vue-phone-number-input","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-phone-number-input","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core peer dependency for Vue 2 component.","package":"vue","optional":false},{"reason":"Provides core phone number parsing, formatting, and validation logic.","package":"libphonenumber-js","optional":false}],"imports":[{"note":"Primarily designed for ES Modules in modern Vue 2 setups. CommonJS require syntax is generally incorrect.","wrong":"const VuePhoneNumberInput = require('vue-phone-number-input');","symbol":"VuePhoneNumberInput","correct":"import VuePhoneNumberInput from 'vue-phone-number-input';"},{"note":"Always import the pre-compiled CSS from `dist` for production. Directly importing SCSS requires a specific build pipeline.","wrong":"import 'vue-phone-number-input/src/scss/vue-phone-number-input.scss';","symbol":"CSS Styles","correct":"import 'vue-phone-number-input/dist/vue-phone-number-input.css';"},{"note":"When using ESM imports like `import VuePhoneNumberInput from '...'`, `VuePhoneNumberInput` directly references the component definition. `.default` is typically for UMD builds.","wrong":"Vue.component('vue-phone-number-input', VuePhoneNumberInput.default);","symbol":"Global Component Registration","correct":"Vue.component('VuePhoneNumberInput', VuePhoneNumberInput);"}],"quickstart":{"code":"import Vue from 'vue'; // Ensure Vue 2 is installed\nimport VuePhoneNumberInput from 'vue-phone-number-input';\nimport 'vue-phone-number-input/dist/vue-phone-number-input.css';\n\n// Register the component globally (common in Vue 2 applications)\nVue.component('VuePhoneNumberInput', VuePhoneNumberInput);\n\n// Example Vue 2 component where it would be used\nconst App = Vue.extend({\n name: 'PhoneNumberDemo',\n data() {\n return {\n userPhoneNumber: '+12025550100' as string, // Initial phone number value\n defaultCountry: 'US' as string,\n phoneDetails: null as Record | null, // To store the output object\n };\n },\n methods: {\n onUpdate(payload: Record) {\n console.log('Phone number data:', payload);\n this.phoneDetails = payload;\n },\n },\n template: `\n
\n

Phone Number Entry (Vue 2)

\n

Current V-Model: {{ userPhoneNumber }}

\n \n
\n

Parsed Phone Details:

\n 
{{ JSON.stringify(phoneDetails, null, 2) }}
\n
\n

Note: This component is unmaintained and for Vue 2 only.

\n
\n `,\n});\n\n// Mount the app (in a typical Vue 2 setup)\n// new Vue({\n// el: '#app',\n// render: h => h(App)\n// });","lang":"typescript","description":"Demonstrates global registration and basic usage of the `VuePhoneNumberInput` component within a Vue 2 application, including v-model binding, setting a default country, preferred countries, and handling the `update` event to access parsed phone number details."},"warnings":[{"fix":"Migrate to `MazPhoneNumberInput` from the `maz-ui` library. Use `maz-ui` v2.x for Vue 2 projects or `maz-ui` v3.x for Vue 3 projects.","message":"This package is explicitly marked as unmaintained by its author. No further updates, bug fixes, or security patches will be released for `vue-phone-number-input` (v1.x).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If working with Vue 3, use `MazPhoneNumberInput` from `maz-ui` v3.x which provides a compatible version of the component. Avoid trying to adapt this Vue 2 package to Vue 3.","message":"This component is built exclusively for Vue 2. Attempting to use `vue-phone-number-input` directly in a Vue 3 application will lead to component resolution failures and runtime errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Regularly monitor `libphonenumber-js` for updates. If using this unmaintained component, you may need to manually update `libphonenumber-js` and verify compatibility, or preferably, migrate to `maz-ui` which actively manages its dependencies.","message":"The component relies on `libphonenumber-js` for its core functionality. As this package is unmaintained, it will not receive updates to `libphonenumber-js`. This can result in outdated phone number data, incorrect validation for new country codes or formats, and potential security vulnerabilities if `libphonenumber-js` has critical updates.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use CSS preprocessors with scoping features (e.g., Sass, Less) to override conflicting styles, or increase CSS specificity in your custom stylesheets. Consider encapsulating the component within a shadow DOM if deeper isolation is required, though this adds complexity.","message":"The component requires a global CSS import (`import 'vue-phone-number-input/dist/vue-phone-number-input.css';`). This can lead to styling conflicts with other UI libraries or custom project styles due to its global nature and potentially generic class names.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This component is incompatible with Vue 3. Migrate to `MazPhoneNumberInput` from `maz-ui` v3.x.","cause":"Attempting to use the Vue 2 component in a Vue 3 application.","error":"[Vue warn]: Failed to resolve component: vue-phone-number-input"},{"fix":"Ensure `Vue` is imported and globally available (e.g., `import Vue from 'vue';`) and use `Vue.component('VuePhoneNumberInput', VuePhoneNumberInput);` without `.default` for ESM imports. If using UMD, refer to the documentation for correct `window.VuePhoneNumberInput.default` usage.","cause":"Incorrect global component registration or `Vue` is not globally available in a CommonJS or non-browser environment.","error":"TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Ensure `v-model` is bound to a string variable (e.g., `v-model=\"userPhoneNumber\"`). The component emits a detailed object on the `@update` event, which should be handled separately if you need the full data.","cause":"`v-model` is bound to an object instead of a string. `vue-phone-number-input` expects a string for the phone number.","error":"[Vue warn]: Invalid prop: type check failed for prop \"modelValue\". Expected String, got Object."},{"fix":"Verify that the country code (e.g., 'US', 'FR', 'DE') is a valid ISO 3166-1 alpha-2 code and is recognized by `libphonenumber-js`. Refer to a list of standard country codes.","cause":"An invalid or unsupported ISO 3166-1 alpha-2 country code was provided to a prop like `default-country-code` or implicitly via an initial `v-model` value.","error":"Error: Could not find country calling code for country 'XX'"}],"ecosystem":"npm"}