Laravel 10 - Display Country Flags
Laravel 10 - Display Country Flags
In this tutorial, we will explore how to display country flags in Laravel 10, which enhances user experience by visually representing geographic data in your application
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we walk you through how to display country flags in a Laravel application using the outhebox/blade-flags package. You'll begin by creating or using an existing Laravel project and setting up the development environment with Vite. Then, you’ll install the Blade Flags package, publish its configuration, and customize the flag display using Blade components. You'll update your view file to render flags using ISO country codes and test everything by running the Laravel development server. The guide also shows how to dynamically render flags and adjust their size, making this setup ideal for language selectors, user profiles, or country-based data visualization.
Step # 1 : Create a Fresh Laravel Project or Use an Existing One.
To get started, you can either use an existing Laravel project or spin up a new one. If you have Laravel globally installed use the following command.
laravel new flags
Alternatively, if you want to use Composer. Use the following command.
composer create-project laravel/laravel --prefer-dist flags
This will generate a standard Laravel application structure, including essential files and directories such as routes/web.php, the .env environment file, resources/views for Blade templates, and app/Http/Controllers for controller logic. Whether you're starting fresh or adding this to an existing project, the structure ensures you're ready to begin integrating Blade Flags and building out your UI features efficiently.
Step # 2 : Access the Project and Run Vite Server.
To begin, open your terminal application (like Git Bash) and navigate to your Laravel project directory. For example, if you're using XAMPP, you can use the following command to access the project folder.
cd c:xampp/htdocs/flags
Once you're in the project directory, the next step is to install the necessary frontend dependencies. This is done by running the npm install command, which will download all the packages listed in the package.json file. These dependencies are essential for compiling and serving frontend assets, such as JavaScript and CSS, using Laravel Vite.
npm install && npm run dev
The npm run dev command starts the Vite development server, which watches for changes in your assets (e.g., JavaScript or CSS) and auto-reloads the browser with updates. Keep this terminal open to maintain the server, and open a new terminal for any additional Laravel commands or tasks.
Step # 3 : Install the Blade Flags Package.
To enable the flag-rendering functionality, we need to install the outhebox/blade-flags package. This package provides a simple and elegant way to display country flags using Blade components based on ISO country codes. Inside your Laravel project root directory, run the following command.
composer require outhebox/blade-flags
Once the installation is complete, Laravel will automatically register the package’s service provider, making the custom flag components available for use in your views. This approach helps you avoid manually managing SVG files or external flag libraries, keeping everything neatly integrated within your Laravel application.
Step # 4 : Publish the Configuration.
After installing the package, the next step is to publish its configuration file so you can customize settings like default size or supported countries. To do that, run the following Artisan command.
php artisan vendor:publish --tag=blade-flags-config
This command will generate a blade-flags.php file inside your project’s config directory. Although the default settings work well for most use cases, this file gives you full control over how flags are rendered, allowing you to tweak display options or limit the number of countries based on your app’s requirements.
Step # 5 : Update the View File.
With the Blade Flags package installed and configured, it’s time to render a flag on the frontend. Open the resources/views/welcome.blade.php file, this is Laravel’s default welcome view. We’ll replace its contents with a simple HTML layout that uses Bootstrap for basic styling and a Blade flag component to display a country flag. Replace the existing content with the following.
<!DOCTYPE html>
<html>
<head>
<title>Laravel Country Flags</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Country Flag Example - All About Laravel</h2>
<table class="table table-bordered">
<tr>
<th>Image</th>
<th>Name</th>
</tr>
<tr>
<td><x-flag-country-uk/></td>
<td>United Kingdom</td>
</tr>
</table>
</div>
</body>
</html>
This markup uses the <x-flag-country-uk /> component, which is part of the Blade Flags package. It dynamically renders the UK flag using the country’s ISO code. The component is lightweight, SVG-based, and scales well on all screen sizes, making it ideal for displaying flag icons in tables, lists, or UI dropdowns.
Step # 6 : Test the Flag Output.
With everything in place, it’s time to test the Blade Flags integration in your Laravel app. Start the Laravel development server by running the following command in your terminal.
php artisan serve
Once the server is running, open your browser and navigate to http://127.0.0.1:8000. You should see a basic table with the flag of the United Kingdom rendered next to its name, confirming that the flag component is working properly.
Customizing Flag Size and Using Dynamic Values.
You’re not limited to displaying default-sized static flags. Blade Flags allows you to customize the size of any flag component by using inline styles or utility classes. For example.
<td><x-flag-country-uk style="width: 100px; height: 100px;" /></td>
<td>United Kingdom</td>
This makes the flag appear larger, which can be useful in layouts that require more visual emphasis, like dashboards or headers.
In addition to static rendering, you can also display flags dynamically using ISO2 country codes. This is particularly helpful when working with user data or content coming from a database or API. For example.
<!-- Replace 'DE' with a dynamic ISO code value -->
<td><x-icon name="flag-country-{{ 'DE' }}" style="width: 30px; height: 30px;" /></td>
<td>Germany</td>
By replacing DE with a variable, you can dynamically render flags for different countries without hardcoding them, perfect for user profiles, language selectors, or location-based content.
Conclusion
By following this guide, you’ve successfully integrated Blade Flags into your Laravel project. Your application is now capable of rendering country flags using lightweight, scalable Blade components based on ISO codes. Whether you're displaying static flags or generating them dynamically from user or API data, this setup gives you a flexible and visually consistent way to represent countries in your UI. With the foundation in place, you can further enhance the integration by customizing styles, combining flags with dropdowns, or extending it to support internationalization features.
For more details, refer to the official Blade Flags and Laravel documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments