The WireUI is a library of components and resources to empower your application development with Laravel and Livewire. Starting a new project with Livewire can be time-consuming when you have to create all the components from scratch. Wire UI helps to skip this step and get you straight to the development phase.
Installing WireUI enriches your project with:
- Form and UI components
- Notifications
- Confirmation notifications
- All Heroicons
1. Run the following command to add WireUI to your project:
composer require wireui/wireui2. Add the WireUI
tag on the page head tag
1<html>2 <head>3 ...4 <wireui:scripts />5 </head>6</html>Alternatively, you can use the equivalent Blade directive:
1...2@wireUiScripts3...4 5Sometimes you need to pass extra html attributes to script tag, like the nonce attribute6@wireUiScripts(['nonce': 'csp-token'])7@wireUiScripts(['nonce': 'csp-token', 'foo' => true])3. Add the following settings to your Tailwindcss config file, tailwind.config.js:
1module.exports = { 2 presets: [ 3 require('./vendor/wireui/wireui/tailwind.config.js') 4 ], 5 content: [ 6 './vendor/wireui/wireui/resources/**/*.blade.php', 7 './vendor/wireui/wireui/ts/**/*.ts', 8 './vendor/wireui/wireui/src/View/**/*.php' 9 ],10}WireUI does not need any additional configuration, but you can publish the files and customize them to your preference.
php artisan vendor:publish --tag='wireui.config'php artisan vendor:publish --tag='wireui.resources'php artisan vendor:publish --tag='wireui.lang'