A vue 3 country select and a vue 3 region select component that is very easy to use and the region select will update automatically depending on your country selected. They can also be used stand alone. This repo is a fork of the original Vue-Country-Region-Select module for Vue 2.
Installations
npm install vue3-country-region-select-modDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
16.20.2
NPM Version
8.19.4
Score
54.3
Supply Chain
97.4
Quality
76.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (97.51%)
Vue (2.49%)
Developer
isvidler
Download Statistics
Total Downloads
223
Last Day
2
Last Week
5
Last Month
12
Last Year
223
GitHub Statistics
10 Stars
64 Commits
10 Forks
2 Watching
8 Branches
1 Contributors
Bundle Size
316.65 kB
Minified
96.87 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
1.0.4
Package Id
vue3-country-region-select-mod@1.0.4
Unpacked Size
208.85 kB
Size
54.52 kB
File Count
3
NPM Version
8.19.4
Node Version
16.20.2
Publised On
06 Jul 2024
Total Downloads
Cumulative downloads
Total Downloads
223
Last day
0%
2
Compared to previous day
Last week
150%
5
Compared to previous week
Last month
71.4%
12
Compared to previous month
Last year
0%
223
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Vue3-Country-Region-Select 
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 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.
Modified based on the pull request from Trouni and Jason Beggs this version changed
- Fix missing autocomplete prop
- Prevent accessing $i18n during render
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
1import { createApp } from "vue"; 2import App from "./App.vue"; 3import vueCountryRegionSelect from "vue3-country-region-select"; 4 5const app = createApp(App); 6app.use(vueCountryRegionSelect); 7app.mount("#app");
Inside component
1<template> 2 <country-select v-model="country" :country="country" topCountry="US" /> 3 <region-select v-model="region" :country="country" :region="region" /> 4</template>
1export default { 2 name: "MyComponent", 3 data: () => ({ 4 country: "", 5 region: "", 6 }), 7};
Options
Here are the available attributes that can be used with the provided components.
<country-select />
| Parameter | Required? | Default | Type | Description |
|---|---|---|---|---|
| v-model | yes | '' | string | The data binding for your component |
| country | yes | '' | string | Make this tied to the same piece of data as v-model |
| topCountry | no | '' | string | By 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'. |
| countryName | no | false | boolean | By 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. |
| whiteList | no | [] | array | Fill this array with capitalized short codes of the countries you want to appear in the dropdown list. ex: ['US', 'CA', 'MX'] |
| blackList | no | [] | array | Fill this array with capitalized short codes of the countries you want to remove from dropdown list. ex: ['US'] |
| className | no | '' | string | Class name ex: form-control |
| placeholder | no | 'Select Country' | string | The placeholder text for country select |
| autocomplete | no | false | boolean | Set to true to enable browser to automatically fill out the country. |
| shortCodeDropdown | no | false | boolean | Use this to have dropdown text display as short codes |
| usei18n | no | true | boolean | Set to false if using i18n and want to disable for this component |
| disablePlaceholder | no | false | boolean | Set to true to make placeholder non-selectable |
| removePlaceholder | no | false | boolean | Set to true to remove placeholder all together, this will autoselect first in list automatically |
<region-select />
| Parameter | Required? | Default | Type | Description |
|---|---|---|---|---|
| v-model | yes | '' | string | The data binding for your component |
| region | yes | '' | string | Make this tied to the same piece of data as v-model |
| country | no | '' | string | This 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. |
| defaultRegion | no | 'US' | string | This 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. |
| countryName | no | false | boolean | Set 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. |
| regionName | no | false | boolean | Set this to true if you want the v-model to output full region names instead of the default abbreviations. |
| whiteList | no | [] | array | Fill this array with capitalized short codes of the regions you want to appear in the dropdown list. ex: ['AL', 'AK', 'WA'] |
| blackList | no | [] | array | Fill this array with capitalized short codes of the regions you want to remove from dropdown list. ex: ['AZ'] |
| className | no | '' | string | Class name ex: form-control |
| placeholder | no | 'Select Region' | string | The placeholder text for region select |
| autocomplete | no | false | boolean | Set to true to enable browser to automatically fill out the region. |
| shortCodeDropdown | no | false | boolean | Use this to have dropdown text display as short codes |
| usei18n | no | true | boolean | Set to false if using i18n and want to disable for this component |
| disablePlaceholder | no | false | boolean | Set to true to make placeholder non-selectable, this will cause regions to set to first available when switching countries |
| removePlaceholder | no | false | boolean | Set 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
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
74 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.3
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More