Configuration

In order to use and customize the Laravel Livewire Basic Components library, you need to configure it properly.

Step 1: Configure Vite

The Laravel Livewire Basic Components library uses Vite to compile the assets. You need to configure Vite to compile the assets properly.

Install SaSS

This library uses .scss files for styling. You need to install the scss-preprocessor to compile the styles:

1npm install -D sass-embedded

Now simply add the alias @basic-components to your vite.config.js file and import the variables file in your scss preprocessor options. This will automatically load the scss variables file in all your scss files.

 1import { defineConfig } from 'vite';
 2import laravel from 'laravel-vite-plugin';
 3import path from 'path';
 4 
 5export default defineConfig({
 6    ...
 7    plugins: [...],
 8    resolve: {
 9        alias: {
10            '@basic-components': path.resolve(__dirname, 'vendor/maskowlabs/basic-components/resources/assets'),
11        },
12    },
13    css: {
14        preprocessorOptions: {
15            scss: {
16                additionalData: `@import "@basic-components/scss/utilities/variables";`,
17            },
18        },
19    },
20    ...
21});

Step 2: Import styles

You need to import the styles of this package in your main scss file. You can do this by either importing the @basic-components/scss/basic-components.scss file or by importing the individual files.

Option 1: Import all styles

Open your main scss file (e. G. app.scss) and import the basic-components.scss file at the top. This file contains all the styles of this package.

1@import '@basic-components/scss/basic-components';
2 
3// Your custom styles

Option 2: Import individual files

If you don't use all the components of this package, you can import the individual files in your main scss file. This will reduce the size of the compiled css file and improve the performance.

 1@import '@basic-components/scss/utilities/fonts';
 2@import '@basic-components/scss/utilities/color-utils';
 3@import '@basic-components/scss/utilities/helper';
 4@import '@basic-components/scss/utilities/bootstrap';
 5@import '@basic-components/scss/utilities/grid';
 6 
 7@import '@basic-components/scss/components/heading';
 8@import '@basic-components/scss/components/badges';
 9@import '@basic-components/scss/components/button';
10@import '@basic-components/scss/components/button-group';
11@import '@basic-components/scss/components/dropdown';
12@import '@basic-components/scss/components/input-fields';
13@import '@basic-components/scss/components/input-field-groups';
14@import '@basic-components/scss/components/inputs-text';
15@import '@basic-components/scss/components/inputs-textarea';
16@import '@basic-components/scss/components/inputs-checks';
17@import '@basic-components/scss/components/inputs-checkboxes';
18@import '@basic-components/scss/components/inputs-radios';
19@import '@basic-components/scss/components/inputs-select';
20@import '@basic-components/scss/components/inputs-file';
21@import '@basic-components/scss/components/code';
22@import '@basic-components/scss/components/alerts';
23@import '@basic-components/scss/components/nav';
24@import '@basic-components/scss/components/breadcrumb';
25@import '@basic-components/scss/components/page-header';
26@import '@basic-components/scss/components/card';
27@import '@basic-components/scss/components/tabs';
28@import '@basic-components/scss/components/tooltip';
29@import '@basic-components/scss/components/toasts';
30@import '@basic-components/scss/components/pagination';
31@import '@basic-components/scss/components/divider';
32@import '@basic-components/scss/components/modals';
33@import '@basic-components/scss/components/tables';
34@import '@basic-components/scss/components/list';
35 
36// Your custom styles

Step 3: Import scripts

This package contains some javascript files that are required for some components to work properly. You need to import the basic-components.js file in your main javascript file (e. G. app.js).

1import '@basic-components/js/basic-components';
2 
3// Your custom scripts

How it should look like

When you've successfully configured the Laravel Livewire Basic Components library, your files should look like this:

1@import '@basic-components/scss/basic-components';
2// Your custom styles

1import '@basic-components/js/basic-components';
2// Your custom scripts

1<!DOCTYPE html>
2<html>
3    <head>
4        @‎vite(['resources/app.js', 'resources/app.scss'])
5    </head>
6    <body>
7        <!-- Your content -->
8    </body>
9</html>

Laravel Boost Ready

This package is Laravel Boost Ready, which means it seamlessly integrates with AI-powered development tools like Laravel Boost to enhance your development experience.

What is Laravel Boost Ready?

Laravel Boost Ready packages automatically provide their functionality to AI agents, making them "smarter" and more capable when working with your codebase. Instead of having to manually explain component APIs and features, the AI automatically knows how to use this package effectively.

Getting Started with Laravel Boost

To enable AI-enhanced development with this package, first install Laravel Boost as a development dependency:

1composer require laravel/boost --dev

Then run the interactive installer:

1php artisan boost:install

Laravel Boost will automatically detect this package and make all its components, features, and best practices available to your AI assistant.

Benefits of Laravel Boost Integration

When Laravel Boost is installed, your AI assistant gains enhanced capabilities including intelligent code generation with correct component syntax, instant access to all documentation and examples, smart troubleshooting with package-specific knowledge, and significantly faster development without manual documentation reference.

Example AI Capabilities

Once Laravel Boost is installed, your AI assistant can help with:

• Creating complete forms with validation using the correct input components
• Building responsive data tables with sorting, filtering, and pagination
• Implementing modal dialogs with proper structure and behavior
• Designing dashboard layouts using statistics and card components
• Setting up navigation structures with breadcrumbs and menus
• Applying consistent styling and following package conventions

Package Recognition

Laravel Boost automatically recognizes this package through its configuration and provides comprehensive information about: