Vue Country Code Selector

Common errors

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

  cause 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

  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.
  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')

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

Warnings

• breaking 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.
  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.
• gotcha 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.
  Fix: Consider disabling IP-based fetching using `:disabledFetchingCountry="true"` and manually setting a `:defaultCountry` or providing a list of `:preferredCountries` to ensure predictable behavior.
• gotcha 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.
  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.
• gotcha 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>`).
  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 } }`.

Install

• npm install vue-country-code npm
• yarn add vue-country-code yarn
• pnpm add vue-country-code pnpm

Imports

• VueCountryCode
  wrong:

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

  correct:

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

  For global registration of the component as a plugin in Vue 2 applications.
• VueCountryCode
  wrong:

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

  correct:

  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
  wrong:

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

  correct:

  import type { 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.

Quickstart

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.