@timbouc/vuetify-country-region-input

vuetify-country-region-input

This package provides a pair of Vuetify components for countries/region select inputs. Components may be used together or standalone. Vue-i18n is also supported.

Installation

npm i --save @timbouc/vuetify-country-region-input
# or yarn add @timbouc/vuetify-country-region-input

Usage

import Vue from 'vue'
import VCountryRegionSelect from '@timbouc/vuetify-country-region-input'
Vue.use(VCountryRegionSelect)

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

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

<template>
    <v-country-select v-model="country" :country-name="countryName" />
    <v-region-select v-model="region" :country="country" :country-name="countryName" />
</template>

Use standalone

<script>
import { VCountrySelect } from '@timbouc/vuetify-country-region-input'

export default {
  name: 'App',
  components: { VCountrySelect },
  data: () => ({
    country: 'AU',
    countryName: true
  })
};
</script>

<template>
    <v-country-select v-model="country" />
</template>

Options

In addition to Vuetify VSelect props, here are the available attributes that can be used with the provided components.

VCountrySelect

VRegionSelect

Contributing

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

Credits

• Augustus Okoye
• vue-country-region-select
• https://www.npmjs.com/package/country-region-data

License

MIT