Awesome

vue-country-flag

Country flags as a Vue Component

Vue 3 support

Since version 2.0.3, this component supports both Vue2 and Vue3 support.

In order to use it with Vue 3, please install the vue-country-flag-next package as follows:

npm install vue-country-flag-next

Vue 2 support

How to install

Get the package from NPM:

npm install vue-country-flag

How to use the component

Register CountryFlag component in your app. You can use two approaches:

• in main.js you can mount it as a global Vue component:

import Vue from 'vue'
import CountryFlag from 'vue-country-flag'

Vue.component('country-flag', CountryFlag)

• in a specific component (e.g.: Component.vue):

import CountryFlag from 'vue-country-flag'

new Vue({
    components: {
        CountryFlag
    }
})

Then, after the proper mounting, in your template you can call it like this:

    <country-flag country='it' size='big'/>
    <country-flag country='hr' size='normal'/>
    <country-flag country='fr' size='small'/>
    <country-flag country='rus'/>

API

Mandatory properties

Optional properties

by default, the flag is displayed at normal size.

Available Flags

The flags are identified using the ISO 3166-1 standard.
This component currently supports both alpha-2 and alpha-3 alternatives.

Extra flags

Credits

The flags used for this Vue components are provided by Flag Icons CSS.

Contributing

Please follow the guidelines here.

Building the packages

During development of the project, you might want to build the packages. This project uses Lerna to manage the two packages.

To build either or both packages, you first need to bootstrap Lerna. From the project root, run:

$ npm run bootstrap

After Lerna has been bootstrapped, you can use the build and build:next scripts defined in package.json:

$ npm run build

$ npm run build:next

See package.json for a full overview of the different build targets.