Vue Flags

One easy-to-use flag component with all ISO 3166-1 countries.

Preview

Here is the kind of flags you can get in a few seconds. 🎉

Available sizes

With a backup flag (for unknown codes)

Available country codes (ISO 3166-1)

Installation

Install it on Vue, Nuxt or use the CDN link! 👻

npm install @growthbunker/vueflags

# Or if you prefer to use yarn
yarn add @growthbunker/vueflags

Vue.js

In your main.js file:

// src/main.js

import Vue from "vue";
import VueFlags from "@growthbunker/vueflags";

Vue.use(VueFlags);

Nuxt.js

Create a plugin for Vue Social and load the library like in a regular Vue application:

// plugins/vueflags.js

import Vue from "vue";
import VueFlags from "@growthbunker/vueflags";

Vue.use(VueFlags);

Load this plugin in your nuxt configuration file.

// nuxt.config.js

module.exports = {
  plugins: [
    { src: "@/plugins/vueflags.js" }
  ]
}

CDN

Get the latest version from jsdelivr, and import the JavaScript file in your page.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/vueflags@latest/dist/vueflags.min.js"></script>

We recommend our users to lock Vue Social's version when using a CDN. Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing.

The icons for the flags

Where to get them? 🎨

All the flags are available here Copy them somewhere in your somewhere in your "public" or "static" folder. You will also have to set the icon path for the component to be able to find them (see package options and component props).

A huge thank you to the author for designing these flags.

Package Options

Some options you can set to customize the component. 📦

import VueFlags from "@growthbunker/vueflags";

Vue.use(VueFlags, {
  // Specify the path of the folder where the flags are stored.
  iconPath: '/images/vueflags/flags/',
});

Documentation

All you need to know about the props and events. 🧠

<!-- Insert this component in your code -->
<!-- Customize it with props (see table below) -->
<gb-flag/>
Prop NameTypeDetails
codeStringRequired: trueSpecify the ISO alpha-2 code of the country.
heightStringDefault: nullSpecify a custom height for the flag.
iconPathStringDefault: nullSet the path of the folder where the flags are stored.
sizeStringDefault: "default"Set the button size."nano" | "micro" | "mini" | "small" | "default" | "medium" | "large" | "huge"
widthStringDefault: nullSpecify a custom width for the flag.
Event NameParametersDetails
clicknetwork, eventFires on a mouse click on the element.

Example

Once the plugin is installed, you can use the component like this. 🤓

<template>
  <gb-flag
    code="fr"
    size="small"
  />
</template>