vue3-country-select

Vue 3 Country Select

A Vue 3 component for country selection with TypeScript support. This component allows you to easily add a country selector to your Vue 3 applications with full TypeScript support.

Features

• 🚀 Built for Vue 3
• 📘 Full TypeScript support
• 🎨 Customizable styling
• 🌍 All countries included
• 🔍 Search functionality
• ⭐ Preferred countries option
• 📱 Mobile friendly
• 🔄 Auto-detection of user's country

Preview

Installation

npm install vue3-country-select

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import { VueCountryCode } from 'vue3-country-select'
import "vue3-country-select/style.css"

interface Country {
  iso2: string
  name: string
  dialCode: string
  preferred?: boolean
}

const selectedCountry = ref<Country | null>(null)

const onSelect = (data: Country) => {
  selectedCountry.value = data
}
</script>

<template>
  <VueCountryCode
    @onSelect="onSelect"
    :preferredCountries="['vn', 'us', 'gb']"
  />
</template>

Props

Events

Types

interface Country {
  iso2: string
  name: string
  dialCode: string
  preferred?: boolean
}

Styling

The component comes with default styling that you can import:

import "vue3-country-select/style.css"

Auto-detection

The component includes built-in country auto-detection functionality. It will attempt to detect the user's country based on their IP address using a reliable geolocation service.

Credits

This package is inspired by vue-country-code-select but built specifically for Vue 3 with TypeScript support.