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

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>

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');