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! 👻

Vue.js

In your main.js file:

Nuxt.js

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

Load this plugin in your nuxt configuration file.

CDN

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

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. 📦

Documentation

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

Example

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