Skip to content
πŸ‘©β€βœˆοΈπŸ‘¨β€βœˆοΈ One easy-to-use flag component for Vue.js with 230+ countries.
CSS JavaScript Vue
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/flags
build feat(package): add initial files Dec 7, 2019
src feat(flags): use fallback flag Dec 8, 2019
.csscomb.json
.editorconfig feat(package): add initial files Dec 7, 2019
.eslintrc.js feat(package): add initial files Dec 7, 2019
.gitignore feat(package): add initial files Dec 7, 2019
.prettierrc.json feat(package): add initial files Dec 7, 2019
.stylelintrc.json feat(package): add initial files Dec 7, 2019
CHANGELOG.md feat(package): add initial files Dec 7, 2019
CONTRIBUTING.md feat(package): add initial files Dec 7, 2019
LICENSE feat(package): add initial files Dec 7, 2019
README.md fix(readme): update jsdelivr link Feb 2, 2020
package-lock.json feat(package): add code prop and remove theme mixin Dec 7, 2019
package.json
vueflags_dark.jpg

README.md

npm npm Average time to resolve an issue Percentage of issues still open GitHub license Netlify Status

Documentation

You can browse the documentation for Vue Flags on the website.

Installation

npm install @growthbunker/vueflags

# Or if you prefer using yarn
yarn add @growthbunker/vueflags

Vue.js

In your main.js file:

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

Vue.use(VueFlags)

Nuxt.js

Create a new plugin in plugins/vueflags.js:

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

Vue.use(VueFlags)

Add this new plugin to 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 Flags's version when using 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. Please refer to jsdelivr.com for more information.

Icons

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.

Example

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

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

Contributing

You are more than welcome to contribute to Vue Flags. Just submit changes via pull request and I will review them before merging.

  1. Fork it! πŸ€™

  2. Create your feature branch: git checkout -b my-new-feature

  3. Commit your changes: git commit -am "Add some feature"

  4. Push to the branch: git push origin my-new-feature

  5. Submit a pull request πŸ‘

The documentation is available in the docs folder. The Vue Flags components are available in the lib folder.

License

Vue Flags is MIT licensed.

You can’t perform that action at this time.