BladewindUI: Getting Started

https://bladewindui.com/ • Jun 3, 2022 21:21

Extracto

Super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. All for free!

Contenido

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

Prerequisites

Bladewind components are purely Laravel blade components with some tailwindcss sweetness. This means you absolutely need to be using Bladewind in a Laravel project. The package has the following dependencies:

Install

At the root of your Laravel project, type the following composer command in your terminal to pull in the package.

composer require mkocansey/bladewind

Next you need to publish the package assets by running this command, still at the root of your Laravel project. You always need to publish assets when you update to a new version of BladewindUI. See Update Notes at the bottom of this page.

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=assets --force

Now include the BladewindUI css file and initialize a few javascript variables in the <head> of your pages. This should ideally be done in the layouts file your app's pages extend from.

        
            // this is required for the animation of notifications and slide out panels
            // you can ignore this if you already have animate.css (https://animate.style/) in your project
            
            <link href="{{ asset('bladewind/css/animate.min.css') }}" rel="stylesheet" />

            <link href="{{ asset('bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />

            <script src="{{ asset('bladewind/js/helpers.js') }}"></script>

            
                // The Datepicker and Timepicker components require AlpineJs 3.x to work. 
                // Include this in your <head>. You can ignore this final step if 
                // you are already using AlpineJs in your project

                <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

You are now ready to start using any of the BladewindUI components in your application

            
                <x-bladewind.button>Save User</x-bladewind.button>

BladewindUI components have been designed to be non destructive, meaning, they coexist with any other components you may already have in your project. The following happened when you run the vendor:publish command earlier on:

1. The blade components now exist in resources > views > components > bladewind

2. The supporting CSS and JS files have been placed in public > bladewind

3. The language files for the Datepicker component have been placed in lang > bladewind. The default languages shipped with the Datepicker are English, French and Italian. You can add more languages.

If you intend to use bladewindUI in a Laravel 8.x project, please do well to read this.

Update

When you update the Bladewind package via composer update it is important to always run the command below to republish the library's assets, as component updates are sometimes made to the CSS and JS files as well. Composer prevents packages from automatically running scripts after installing for obvious security reasons.

composer update

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=assets --force