internetguru / blade-components
Installs: 686
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Language:Blade
README
This package provides a set of reusable Blade components for your Laravel applications.
Installation
Step 1: Install the Package
Require the package via Composer:
composer require internetguru/blade-components
Step 2: Install Bootstrap
Install or verify Bootstrap via npm in your Laravel project:
npm install bootstrap
Step 3: Publish the SASS Assets
To publish the SASS assets to your Laravel project's resources directory, run:
php artisan vendor:publish --tag=sass
This will copy the SASS files from the package to resources/sass/vendor/internetguru/blade-components
.
Step 5: Compile the SASS
Update your build process to include the new SASS file and compile it. You can use Vite or Laravel Mix for this purpose.
Vite (vite.config.js
)
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import path from 'path'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', 'resources/sass/vendor/internetguru/blade-components/app.scss', ], refresh: true, }), ], });
Laravel Mix (webpack.mix.js
)
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sass('resources/sass/vendor/internetguru/blade-components/app.scss', 'public/css');
Step 6: Run the Build Process
Compile your SASS files to include Bootstrap styles:
npm install && npm run dev
Usage
Using Blade Components
The package registers Blade components under the ig
namespace. You can use these components in your views as follows:
<x-ig::btn> Click Me! </x-ig::btn>