Registry / web-framework / vue-country-code

vue-country-code

library1.1.3jsnpmunverified

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.

web-framework serialization http-networking

npm install vue-country-code

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-COUNTRY-CODE

vue-country-code

web-frameworkjavascriptv1.1.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueCountryCode

✓ import Vue from 'vue'; import VueCountryCode from 'vue-country-code'; Vue.use(VueCountryCode);

✗ const VueCountryCode = require('vue-country-code'); Vue.use(VueCountryCode);

For global registration of the component as a plugin in Vue 2 applications.

VueCountryCode

✓ import VueCountryCode from 'vue-country-code';

✗ import { VueCountryCode } from 'vue-country-code';

For importing the component directly into a Vue 2 Single File Component's script section for local registration.

CountryData

✓ import type { CountryData } from 'vue-country-code';

✗ import { CountryData } from 'vue-country-code';

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.

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.

import Vue from 'vue'; import VueCountryCode from 'vue-country-code'; // Register the component globally for easy use across your app Vue.use(VueCountryCode); // Define a root Vue instance to demonstrate the component new Vue({ el: '#app', template: ` <div id="app"> <h1>Select Your Country Code</h1> <p>This component allows users to pick a country, displaying its flag and dial code.</p> <vue-country-code @onSelect="handleCountrySelect" :preferredCountries="['us', 'gb', 'de']" :defaultCountry="'us'" :enabledFlags="true" :dropdownOptions="{ disabledDialCode: false }" ></vue-country-code> <div v-if="selectedCountry" style="margin-top: 20px;"> <h2>Selected Country Details:</h2> <p><strong>Name:</strong> {{ selectedCountry.name }}</p> <p><strong>ISO2:</strong> {{ selectedCountry.iso2 }}</p> <p><strong>Dial Code:</strong> +{{ selectedCountry.dialCode }}</p> </div> </div> `, data() { return { selectedCountry: null }; }, methods: { handleCountrySelect({ name, iso2, dialCode }) { this.selectedCountry = { name, iso2, dialCode }; console.log('Country Selected:', { name, iso2, dialCode }); } } }); // To run this code, ensure you have an HTML file with `<div id="app"></div>` and Vue 2 loaded.

Debug

Known issues

breakingThis 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.

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.

affects: >=1.0.0

gotchaThe 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.

fix

Consider disabling IP-based fetching using `:disabledFetchingCountry="true"` and manually setting a `:defaultCountry` or providing a list of `:preferredCountries` to ensure predictable behavior.

affects: >=1.0.0

gotchaAs 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.

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.

affects: >=1.0.0

gotchaUsing `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>`).

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 } }`.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-country-code> - did you register the component correctly?

The `vue-country-code` component was used in a template but not properly registered with Vue, either globally or locally.

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.

Vue.use is not a function

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.

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.

TypeError: Cannot read properties of undefined (reading 'manualDropdown')

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.

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.

Upgrade

Version history

1.1.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency as it's a Vue 2 component.

libphonenumber-jsrequiredUsed for telephone number parsing and validation.

get-jsonrequiredUsed to fetch user's location data from ipinfo.io.

Agent activity

23 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

githubhttps://github.com/hantrongbinh/vue-country-code ↗

packagehttps://www.npmjs.com/package/vue-country-code ↗

homepagehttps://hantrongbinh.github.io/vue-country-code/ ↗