You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

vue3-country-region-select

Package Overview
Dependencies
2
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-country-region-select

A Country select component and Region select component for Vue 3, forked from the original "vue-country-region-select" project (Vue 2). Work together and standalone.


Version published
Maintainers
1
Created

Readme

Source

Vue3-Country-Region-Select CI status

Vue3-Country-Region-Select provides a pair of Vue 3 components that will allow you to easily put a country and region dropdown in your project that will work together or standalone. Supports vue-i18n.

This project is a fork of the original Vue-Country-Region-Select for Vue 2 by Justin Gehr. If you are looking for Vue 2 support, that is where you want to look.

Credit for goes to Justin Gehr and the other contributors for the creation of the original Vue-Country-Region-Select. This fork just provides compatibility with Vue 3.

Installation

npm install vue3-country-region-select --save

Dependencies

Being that these are Vue components you will need to use them inside of Vue.

The Data for the countries and regions are originally taken from: https://www.npmjs.com/package/country-region-data However the data set is now located in this project and is available to be edited to suit more countries and regions as you need.

Usage

Here is a sample use case of how you would use vue3-country-region-select in your vue project. You can alternatively store the data in a store somewhere. Country and Region values will be returned in their short code values by default.

Ex. country: 'US' and region: 'IL'

There is a prop that will allow for country to be returned in full instead of in short code version.

The library registers the components globally so only need to import the library once in order to make the components be available throughout your project.

main.js
import { createApp } from 'vue'
import App from './App.vue'
import vueCountryRegionSelect from 'vue3-country-region-select'

const app = createApp(App);
app.use(vueCountryRegionSelect);
app.mount('#app');

Inside component

<template>
  <country-select v-model="country" :country="country" topCountry="US" />
  <region-select v-model="region" :country="country" :region="region" />
</template>

export default {
  name: 'MyComponent',
  data: () => ({
    country: '',
    region: ''
  })
}

Options

Here are the available attributes that can be used with the provided components.

<country-select />

ParameterRequired?DefaultTypeDescription
v-modelyes''stringThe data binding for your component
countryyes''stringMake this tied to the same piece of data as v-model
topCountryno''stringBy providing this value you will tell component what country to put at the top of the dropdown list for easy selection. Make sure to use country short code. So for United states you would provide 'US'. However, if you set countryName to true make sure to also write out full country name when setting a topCountry. In this scenerio United States would be 'United States'.
countryNamenofalsebooleanBy setting this value to true, country names will be output in full instead of using the abbreviated short codes. Make sure to set this true for both country and region if you are using.
whiteListno[]arrayFill this array with capitalized short codes of the countries you want to appear in the dropdown list. ex: ['US', 'CA', 'MX']
blackListno[]arrayFill this array with capitalized short codes of the countries you want to remove from dropdown list. ex: ['US']
classNameno''stringClass name ex: form-control
placeholderno'Select Country'stringThe placeholder text for country select
autocompletenofalsebooleanSet to true to enable browser to automatically fill out the country.
shortCodeDropdownnofalsebooleanUse this to have dropdown text display as short codes
usei18nnotruebooleanSet to false if using i18n and want to disable for this component
disablePlaceholdernofalsebooleanSet to true to make placeholder non-selectable
removePlaceholdernofalsebooleanSet to true to remove placeholder all together, this will autoselect first in list automatically

<region-select />

ParameterRequired?DefaultTypeDescription
v-modelyes''stringThe data binding for your component
regionyes''stringMake this tied to the same piece of data as v-model
countryno''stringThis tells the component what country to grab the list of displayed regions from. To have it work in tandem with country component provide it the variable that is tied to the v-model of the country-select component.
defaultRegionno'US'stringThis allows you to set a default region when choosing not to use the country attribute. It will be set to regions of the United States if not provided.
countryNamenofalsebooleanSet this to true if you are setting it to true while using Country Select. This is just to help keep the data values in sync.
regionNamenofalsebooleanSet this to true if you want the v-model to output full region names instead of the default abbreviations.
whiteListno[]arrayFill this array with capitalized short codes of the regions you want to appear in the dropdown list. ex: ['AL', 'AK', 'WA']
blackListno[]arrayFill this array with capitalized short codes of the regions you want to remove from dropdown list. ex: ['AZ']
classNameno''stringClass name ex: form-control
placeholderno'Select Region'stringThe placeholder text for region select
autocompletenofalsebooleanSet to true to enable browser to automatically fill out the region.
shortCodeDropdownnofalsebooleanUse this to have dropdown text display as short codes
usei18nnotruebooleanSet to false if using i18n and want to disable for this component
disablePlaceholdernofalsebooleanSet to true to make placeholder non-selectable, this will cause regions to set to first available when switching countries
removePlaceholdernofalsebooleanSet to true to remove placeholder all together, this will autoselect first in list automatically

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Keywords

FAQs

Package last updated on 03 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc