Laravel 12 - Blade Flags Integration
Laravel 12 - Blade Flags Integration
In this tutorial, we will learn how to integrate the Blade Flags package in Laravel 12 to display country flags in Blade views with dynamic rendering and responsive styling.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through the process of integrating country flags into a Laravel project using the Blade Flags package. It begins with setting up a Laravel application, installing the necessary package, and publishing its configuration for customization. Next, the view file is updated to display flags in a table using Blade components. The guide also explains different ways to style the flags, using Tailwind CSS classes, inline styles, or dynamic rendering based on country codes. Finally, the Laravel development server is started, and the implementation is tested in the browser to ensure the flags display accurately and consistently.
Step # 1 : Setting Up Your Laravel 12 Project.
To get started, we first need a Laravel 12 application. You can create a new project from scratch or work within an existing one. If the Laravel CLI isn’t installed on your system yet, install it globally using.
composer global require laravel/installer
This gives you access to the Laravel CLI, which simplifies creating and managing projects. Once installed, you can scaffold a new Laravel 12 project with.
laravel new flags
During the setup, choose the following options for a smooth configuration.
- Starter Kit: Select None to keep the project minimal.
- Testing Framework: Choose Pest for a modern testing experience.
- Database: Pick MySQL for stability and wide compatibility.
- Run Migrations: Type yes to apply the default database tables immediately.
- Frontend Dependencies: Confirm yes to run npm install and npm run build.
This sets up a clean Laravel 12 environment with MySQL configured, Pest ready for testing, and the default database migrations applied, without any extra starter kits.
Step # 2 : Move Into Your Laravel Project.
Open your terminal (Git Bash, Command Prompt, or your preferred terminal) and navigate to the root folder of your Laravel project.
cd c:xampp/htdocs/flags
Once inside, you’re ready to run Artisan commands, install packages, or perform any other setup steps for your Laravel 12 application.
Step # 3 : Install The Blade Flags Package.
To show country flags easily in your Blade templates, we’ll use the Blade Flags package. Install it with.
composer require outhebox/blade-flags
This command installs the outhebox/blade-flags package, giving you a simple and intuitive way to render country flags in your Blade templates. The package comes with a collection of SVG-based flags that can be used via Blade components, ensuring both lightweight performance and high-quality visuals. It supports dynamic flag rendering based on country codes, which makes it ideal for multilingual applications, e-commerce platforms, or any project that requires international representation. On top of that, Blade Flags integrates seamlessly with Tailwind CSS and other styling approaches, allowing you to fully customize the appearance of the flags while keeping them responsive and consistent across different screen sizes.
Step # 4 : Publish The Blade Flags Configuration.
Next, we need to publish the package configuration so you can customize it for your project. Run the following command.
php artisan vendor:publish --tag=blade-flags-config
This command publishes the blade-flags.php configuration file, giving you the ability to adjust the package settings according to your application’s specific needs. By editing this file, you can control multiple aspects of how flags are rendered, including default flag styles, the available sets of flags, and even caching options to enhance performance. This level of flexibility ensures that Blade Flags can be tailored to fit a wide range of design requirements, whether you are developing a multilingual website, an admin dashboard, or a user profile system that dynamically displays country flags.
Step # 5 : Update The Welcome Blade View to Display Flags.
Next, we’ll modify the welcome.blade.php file to show a country flag. Replace or update your HTML with the following.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Country Flags - Code Shotcut</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-gray-100">
<div class="max-w-6xl mx-auto py-12 px-6">
<h2 class="text-3xl font-bold mb-4 text-center text-white">Country Flag Example - Code Shotcut</h2>
<p class="text-center text-gray-300 mb-8">
Let’s take a look at how country flags can be displayed neatly in a table, keeping their default size and making the layout simple and easy on the eyes.
</p>
<div class="overflow-x-auto">
<table class="min-w-full border border-gray-700 bg-gray-800 rounded-lg">
<thead>
<tr class="bg-gray-700 text-gray-200">
<th class="border px-4 py-2 text-left">Image</th>
<th class="border px-4 py-2 text-left">Name</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-700 transition-colors">
<td class="border px-4 py-2"><x-flag-country-ae/></td>
<td class="border px-4 py-2">United Arab Emirates</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This update allows the welcome.blade.php view to display country flags using the Blade Flags package. The table layout, styled with Tailwind CSS, includes one column for the flag image and another for the country name. The <x-flag-country-ae/> Blade component renders the UAE flag dynamically, and you can easily switch it by using a different country code. You can also enhance this setup by fetching country codes from a database, enabling users to select a country and display its flag automatically. Using Tailwind CSS classes ensures proper styling, spacing, and alignment, making your application more visually appealing and well-prepared for internationalization or region-specific content.
Step # 6 : Test The Country Flags Package.
Now it’s time to see everything in action. Start the Laravel development server by running.
php artisan serve
Once the server is running, open your browser and visit: http://127.0.0.1:8000.
You can control the size of your flags using CSS classes, which helps maintain a consistent appearance throughout your application. For example, update the table body like this.
<tbody>
<tr>
<td class="border px-4 py-2 w-6"><x-flag-country-ae/></td>
<td class="border px-4 py-2">United Arab Emirates</td>
</tr>
</tbody>
For more precise control, you can also use inline styles to define the flag’s dimensions and positioning.
<tbody>
<tr>
<td class="border px-4 py-2" style="width: 200px;"><x-flag-country-ae/></td>
<td class="border px-4 py-2">United Arab Emirates</td>
</tr>
</tbody>
To render flags dynamically based on the country’s ISO2 code, update the table body like this.
<tbody>
<tr>
<!-- Replace {{ 'DE' }} with the dynamic country iso2_code -->
<td class="border px-4 py-2"><x-icon name="flag-country-{{ 'DE' }}" /></td>
<td class="border px-4 py-2">Germany</td>
</tr>
</tbody>
You can take your flag display a step further by combining Tailwind CSS classes with conditional logic to make the UI adapt dynamically to different situations. Whether you use predefined sizes, inline styles, or dynamically generated country codes, the Blade Flags package provides a robust and scalable solution for adding country flags to your Laravel application. This makes it especially useful for projects that require multilingual support, region-specific content, or location-aware features. By using this approach, you can create a visually consistent and efficient way to represent flags throughout your website, enhancing both functionality and user experience.
Conclusion
By following this guide, you've successfully integrated country flags into your Laravel application using the Blade Flags package. You now have the ability to display flags dynamically in your views, apply styling with Tailwind CSS or inline styles, and render them based on country codes for maximum flexibility. This setup improves the user interface by visually representing countries within tables or other components. Additionally, you can further enhance the flag display by fine-tuning styles, incorporating flags into various parts of your application, or leveraging more advanced features offered by the Blade Flags package.
For more details, refer to the Blade Flags package 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