WireUI is a robust library that offers a comprehensive range of components and resources, designed to
supercharge your application development when working with Laravel and Livewire. Launching a new project with
Livewire can often entail a time-consuming process, especially when you need to build all the necessary
components from the ground up. However, WireUI streamlines this initial phase, allowing you to dive straight
into development.
By incorporating WireUI into your project, you'll enjoy the following benefits:
- All Heroicons
- Form and UI components
- Dialogs and Notifications
- Confirmation notifications
- Advanced Customization
1. Execute the following command to seamlessly integrate WireUI into your project:
1composer require wireui/wireui2. Insert the WireUI tag above the Alpine.js script tag in your page layout:
1<html>2 3<head>4 ...5 <wireui:scripts />6 <script src="//unpkg.com/alpinejs" defer></script>7</head>8 9</html>For an alternative approach, you can utilize the equivalent Blade directive:
1...2@wireUiScripts3<script src="//unpkg.com/alpinejs" defer></script>4...5 6Sometimes you need to pass extra html attributes to script tag, like the nonce attribute7@wireUiScripts(['nonce': 'csp-token'])8@wireUiScripts(['nonce': 'csp-token', 'foo' => true])3. Incorporate the following configurations into your Tailwind CSS setup, located in the tailwind.config.js file:
1module.exports = { 2 ... 3 presets: [ 4 ... 5 require("./vendor/wireui/wireui/tailwind.config.js") 6 ], 7 content: [ 8 ... 9 "./vendor/wireui/wireui/src/*.php",10 "./vendor/wireui/wireui/ts/**/*.ts",11 "./vendor/wireui/wireui/src/WireUi/**/*.php",12 "./vendor/wireui/wireui/src/Components/**/*.php",13 ],14 ...15}WireUI requires no extra configuration; however, you have the flexibility to publish the files and tailor them to your preferences.
1php artisan vendor:publish --tag="wireui.lang"2php artisan vendor:publish --tag="wireui.config"