List of countries and cities made for Vue.js
✨ Live Demo -> vue-countries-cities
These instructions will get you a copy of the component up and running on your local machine.
You can install vue-countries-cities component by npm
npm install --save vue-countries-cities
After download vue-country-cities package will be ready to use in your vue.js applications
- Export to main.js to define the vue-country-cities component globally.
import vueCountriesCities from "vue-countries-cities";
- Register vue-country-cities component with any name you want
Vue.component("countriesCities", vueCountriesCities);
After this step, it can be used by all registered components in your project by tag name.
- To save as a singular By coming to the page you want to use
import vueCountriesCities from "vue-countries-cities";
After importing the package, you can add and use it like a regular component.
components: { vueCountriesCities }
- The city and country you select is sent to you every time a change is made. You can keep the country and city of your choice in a variable you specify.
<template>
<vueCountriesCities @country='selectedCountry = $event' @city='selectedCity = $event' />
</template>
<script>
import vueCountriesCities from "vue-countries-cities";
export default{
data () {
return {
selectedCountry: '',
selectedCity: ''
}
},
components: { vueCountriesCities }
}
</script>
- To list countries only
<vueCountriesCities @country='selectedCountry = $event' :city='false' />
- For the forming process
Main template structure
<template>
<div class="countries-cities">
<div class="select-box">
<select class="countries">
<option><option>
</select>
<svg></svg>
</div>
<div class="select-box">
<select class="cities">
<option><option>
</select>
<svg></svg>
</div>
</div>
</template>
Default css codes
.countries-cities {
display: flex;
justify-content: space-around;
box-sizing: border-box;
.select-box {
height: 40px;
min-width: 300px;
background: #fff;
border: 1px solid #e9e9e9;
position: relative;
select {
background: none;
border: none;
outline: none;s
padding-left: 7px;
padding-right: 65px;
appearance: none;
width: 100%;
height: 100%;
}
svg {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: darken(#fff, 3%);
pointer-events: none;
box-sizing: border-box;
padding: 5px;
path {
fill: rgba(black, .7);
}
}
}
}
You can visit vercel.com for details.
We use GitHub for versioning.
Licensed under the MIT license, see LICENSE for details.