coozzy-vue-country-region-select v2.0.164

Vue-Country-Region-Select

Vue-Country-Region-Select provides a pair of Vue 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.

Installation

npm install vue-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 vue-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.

// too be added before mounting app
import Vue from 'vue'
import vueCountryRegionSelect from 'vue-country-region-select'
Vue.use(vueCountryRegionSelect)

new Vue({}).$mount('#app')
// end mounting app

// then inside your vue components
export default Vue.extend({
  data: () => ({
    country: '',
    region: ''
  })
})

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

Options

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

<country-select />

<region-select />

Contributing

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

License

MIT