# vue-countries-cities

> List of countries and cities made for Vue.js

Latest version **1.0.0** (published 2021-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-countries-cities
pnpm add vue-countries-cities
yarn add vue-countries-cities
bun add vue-countries-cities
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-04-04 |
| First published | 2021-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 462 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Mehmet Sağır |
| Maintainers | mehmetsagir |
| Keywords | vuejs, vue, countries, cities, countries-cities-list, vue-countries-cities |

## Links

- npm: https://www.npmjs.com/package/vue-countries-cities
- Repository: https://github.com/mehmetsagir/vue-countries-cities
- Homepage: https://github.com/mehmetsagir/vue-countries-cities/blob/master/README.md/
- Issues: https://github.com/mehmetsagir/vue-countries-cities/issues
- npm.io page: https://npm.io/package/vue-countries-cities

## Recent versions

- 1.0.0 (latest) — 2021-04-04
- 0.0.9 — 2021-02-14
- 0.0.8 — 2021-02-14
- 0.0.7 — 2021-02-12
- 0.0.6 — 2021-02-12
- 0.0.5 — 2021-02-12
- 0.0.4 — 2021-02-11
- 0.0.3 — 2021-02-11
- 0.0.2 — 2021-02-11
- 0.0.1 — 2021-02-11

## README

# VueJS Countries Cities

List of countries and cities made for Vue.js <br>

<p>
  <a href="https://www.npmjs.com/package/vue-countries-cities"><img src="https://img.shields.io/npm/dm/vue-countries-cities.svg?sanitize=true" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/vue-countries-cities"><img src="https://img.shields.io/npm/v/vue-countries-cities.svg?sanitize=true" alt="Version"></a>
  <a href="https://www.npmjs.com/package/vue-countries-cities"><img src="https://img.shields.io/npm/l/vue-countries-cities.svg?sanitize=true" alt="License"></a>
</p>

✨ **Live Demo ->** [vue-countries-cities](https://vue-countries-cities.vercel.app/)

## 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

```shell
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.

```js
import vueCountriesCities from "vue-countries-cities";
```

- Register vue-country-cities component with any name you want

```js
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
```js
import vueCountriesCities from "vue-countries-cities";
``` 
After importing the package, you can add and use it like a regular component.
```vue
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.
```vue
<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
```vue
<vueCountriesCities :city='false' />
```

- For the forming process <br/>
Main template structure 
```vue
<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
```scss
.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);
      }
    }
  }
}
```

## Deploy on Vercel
You can visit [vercel.com](https://vercel.com/) for details.

## Versioning

We use [GitHub](https://github.com/mehmetsagir/vue-countries-cities) for versioning.

## Authors

- **[Mehmet Sağır](https://github.com/mehmetsagir)**

## License

Licensed under the MIT license, see [LICENSE](https://github.com/mehmetsagir/vue-countries-cities/blob/master/LICENSE) for details.

---
_Source: https://npm.io/package/vue-countries-cities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._