Vue-countries-cities NPM

VueJS Countries Cities

List of countries and cities made for Vue.js

Getting Started

These instructions will get you a copy of the component up and running on your local machine.

Installing

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

Usage

Export to main.js to define the vue-country-cities component globally.

import vueCountriesCities from "vue-countries-cities";

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 :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);
      }
    }
  }
}