Vue.js 3 Tutorial to Show Country Flag Icons Using vue-country-flag Library in TypeScript

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import CountryFlag from 'vue-country-flag-next'

const app = createApp(App)

// Registering the component globally
app.component('CountryFlag', CountryFlag)

// Mount the Vue app
app.mount('#app');

import { createApp } from 'vue';

import App from './App.vue';

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

const app = createApp(App)

// Registering the component globally

app.component('CountryFlag', CountryFlag)

// Mount the Vue app

app.mount('#app');

App.vue

<template>
  <div>
    <h2>Vue Country Flag Example</h2>

    <!-- Display flags with different sizes -->
    <CountryFlag country="us" size="big" />
    <CountryFlag country="fr" size="normal" />
    <CountryFlag country="de" size="small" />
    
    <!-- You can also use custom properties like rounded, shadow, and background -->
    <CountryFlag country="in" size="big" :rounded="true" :shadow="true" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
/* Add some custom styling if needed */
div {
  text-align: center;
  margin-top: 50px;
}
</style>

<div>

<h2>Vue Country Flag Example</h2>

</div>

</template>

export default {

name: 'App'

}

</script>

/* Add some custom styling if needed */

div {

text-align: center;

margin-top: 50px;

}

</style>

Vue.js 3 Tutorial to Show Country Flag Icons Using vue-country-flag Library in TypeScript

Comments

Leave a Reply Cancel reply

Archives