vue-circle-flags v1.0.9

Vue Circle Flags

A Vue 3 component with 400+ circular SVG country flags 🚩 (base on circle-flags)

👉 Live demo

Features

📏 Custom size with CSS

🌎 Flag names (and custom name to allow internationalization)

✨ Circular border

Installation

npm install vue-circle-flags

Usage

Vue 3

In your main file:

import CircleFlags from "vue-circle-flags";
import "vue-circle-flags/dist/vue-circle-flags.css";

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.use(CircleFlags);

app.mount("#app");

Nuxt 3

Create a new plugin in plugins\vue-circle-flags.js:

import CircleFlags from "vue-circle-flags";

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(CircleFlags);
})

Add the styles to nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  css : [
  "vue-circle-flags/dist/vue-circle-flags.css"
  ]
  // ...
})

Example 📜

Once the plugin is registered in your app, in your template you can call it:

// Without border
<CircleFlags
   size="medium"
   country="br"
/>

// With border
<CircleFlags
   size="medium"
   strokeColor="#000"
   strokeWidth="4"
   country="br"
/>

API 💻

Mandatory properties

Optional properties

Custom size 📏

You can customize the size of the flags by setting a new height and width value for the selector:

div.circle-flags {
  height: 42px;
  width: 42px;
}

Available flags 🚩

Contributing 💙

Follow the guidelines.