{"id":15029,"library":"vue-country-code","title":"Vue Country Code Selector","description":"vue-country-code is a Vue 2 component designed for selecting country codes, typically integrated into forms for phone number inputs. It provides a customizable dropdown list of countries, their flags, and international dial codes. Developers can configure default selections, specify preferred or excluded countries, and enable/disable features like flag display or automatic country detection based on the user's IP address. Currently at version 1.1.3, the package appears to be in a maintenance state, leveraging established external libraries such as libphonenumber-js for robust telephone number parsing and validation, and ipinfo.io for initial country detection. Its core functionality is based on a fork of vue-tel-input, offering a stable but not actively feature-developing solution primarily for Vue 2 applications.","status":"maintenance","version":"1.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/hantrongbinh/vue-country-code","tags":["javascript","vue","telephone","phone","country","vue-country-code","phone code","country code"],"install":[{"cmd":"npm install vue-country-code","lang":"bash","label":"npm"},{"cmd":"yarn add vue-country-code","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-country-code","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it's a Vue 2 component.","package":"vue","optional":false},{"reason":"Used for telephone number parsing and validation.","package":"libphonenumber-js","optional":false},{"reason":"Used to fetch user's location data from ipinfo.io.","package":"get-json","optional":false}],"imports":[{"note":"For global registration of the component as a plugin in Vue 2 applications.","wrong":"const VueCountryCode = require('vue-country-code');\nVue.use(VueCountryCode);","symbol":"VueCountryCode","correct":"import Vue from 'vue';\nimport VueCountryCode from 'vue-country-code';\n\nVue.use(VueCountryCode);"},{"note":"For importing the component directly into a Vue 2 Single File Component's script section for local registration.","wrong":"import { VueCountryCode } from 'vue-country-code';","symbol":"VueCountryCode","correct":"import VueCountryCode from 'vue-country-code';"},{"note":"Assumed type import for TypeScript users to define the shape of the `onSelect` event payload (e.g., `{ name: string, iso2: string, dialCode: string }`). Not explicitly documented in README, but a common pattern for typed libraries.","wrong":"import { CountryData } from 'vue-country-code';","symbol":"CountryData","correct":"import type { CountryData } from 'vue-country-code';"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueCountryCode from 'vue-country-code';\n\n// Register the component globally for easy use across your app\nVue.use(VueCountryCode);\n\n// Define a root Vue instance to demonstrate the component\nnew Vue({\n  el: '#app',\n  template: `\n    <div id=\"app\">\n      <h1>Select Your Country Code</h1>\n      <p>This component allows users to pick a country, displaying its flag and dial code.</p>\n      <vue-country-code\n        @onSelect=\"handleCountrySelect\"\n        :preferredCountries=\"['us', 'gb', 'de']\"\n        :defaultCountry=\"'us'\"\n        :enabledFlags=\"true\"\n        :dropdownOptions=\"{ disabledDialCode: false }\"\n      ></vue-country-code>\n      <div v-if=\"selectedCountry\" style=\"margin-top: 20px;\">\n        <h2>Selected Country Details:</h2>\n        <p><strong>Name:</strong> {{ selectedCountry.name }}</p>\n        <p><strong>ISO2:</strong> {{ selectedCountry.iso2 }}</p>\n        <p><strong>Dial Code:</strong> +{{ selectedCountry.dialCode }}</p>\n      </div>\n    </div>\n  `,\n  data() {\n    return {\n      selectedCountry: null\n    };\n  },\n  methods: {\n    handleCountrySelect({ name, iso2, dialCode }) {\n      this.selectedCountry = { name, iso2, dialCode };\n      console.log('Country Selected:', { name, iso2, dialCode });\n    }\n  }\n});\n\n// To run this code, ensure you have an HTML file with `<div id=\"app\"></div>` and Vue 2 loaded.","lang":"javascript","description":"This quickstart demonstrates how to globally register and use the `vue-country-code` component within a Vue 2 application, including handling the `onSelect` event to capture country details and displaying them."},"warnings":[{"fix":"For Vue 3 projects, seek out a Vue 3-compatible country code picker component. If this component is essential, your application must remain on Vue 2.","message":"This package is a Vue 2 component and is not compatible with Vue 3. Attempting to use it in a Vue 3 application will result in runtime errors related to component registration and lifecycle hooks.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Consider disabling IP-based fetching using `:disabledFetchingCountry=\"true\"` and manually setting a `:defaultCountry` or providing a list of `:preferredCountries` to ensure predictable behavior.","message":"The component relies on `ipinfo.io` via `get-json` for IP-based country detection. This external service dependency introduces potential privacy implications, rate limiting, and may be blocked by ad-blockers, VPNs, or corporate network policies, leading to incorrect or failed default country detection.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Evaluate if the current feature set meets all your project's long-term requirements. For applications needing active development or cutting-edge features, consider the original `vue-tel-input` or other more actively maintained alternatives.","message":"As a fork of `vue-tel-input` and with limited recent development activity, this package appears to be in a maintenance state. This implies that new features, performance improvements, or prompt bug fixes may not be actively implemented.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For better control and to avoid global conflicts, import the component locally into the specific Vue Single File Components (SFCs) where it is used, e.g., `import VueCountryCode from 'vue-country-code'; export default { components: { VueCountryCode } }`.","message":"Using `Vue.use(VueCountryCode)` registers the component globally. In larger applications, this can lead to potential naming conflicts if another component uses the same tag name (`<vue-country-code>`).","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":"Ensure `Vue.use(VueCountryCode)` is called in your application's entry point (e.g., `main.js`) for global registration, or explicitly include `VueCountryCode` in the `components` option of the Vue component where it's being used.","cause":"The `vue-country-code` component was used in a template but not properly registered with Vue, either globally or locally.","error":"[Vue warn]: Unknown custom element: <vue-country-code> - did you register the component correctly?"},{"fix":"This package is a Vue 2 component and not compatible with Vue 3. You must either use this component in a Vue 2 project or find a Vue 3 compatible alternative.","cause":"This error occurs when attempting to call `Vue.use()` in a Vue 3 application. The global API `Vue.use` was removed in Vue 3 in favor of `app.use()` on an application instance.","error":"Vue.use is not a function"},{"fix":"Ensure the component with `ref=\"vcc\"` is rendered and mounted before attempting to access its methods. Access `this.$refs.vcc` within a `mounted()` lifecycle hook or after a user interaction guarantees the component instance is available.","cause":"Attempting to call the `manualDropdown` method on a `$ref` that has not yet been resolved or the component containing the ref has not been mounted.","error":"TypeError: Cannot read properties of undefined (reading 'manualDropdown')"}],"ecosystem":"npm"}