Introduction
Managing layouts in Laravel can be a cumbersome task, especially as your application grows. To streamline this process, we’ve created a versatile and easy-to-use package that simplifies layout creation and management. This package, erag/laravel-setup-layout, is designed to enhance your Laravel applications with customizable configurations and improved organization.
Features
- Simplified Layout Management: Easily manage and configure your layouts.
- Customizable Configurations: Tailor the package to fit your application's needs.
- Improved Structure and Organization: Keep your Laravel projects well-structured and efficient.
Installation
To get started, install the package via Composer:
composer require erag/laravel-setup-layout
Step 1: Register Service Provider
Depending on your Laravel version, you need to register the service provider.
Laravel 11.x
Add the service provider in /bootstrap/providers.php:
return [
// ...
LaravelSetupLayoutServiceProvider::class
];
Laravel 10.x
Add the service provider to config/app.php:
'providers' => [
// ...
LaravelSetupLayout\LaravelSetupLayoutServiceProvider::class,
];
Step 2: Publish Configuration
Publish the configuration file with the following command:
php artisan vendor:publish --tag=LaravelSetupLayout --force
Step 3: Configure Assets
Edit the config/layout-assets.php file to define your assets:
<?php
return [
# THEME_WEB_ASSETS <x-web-app-layout> Define web assets for different pages
'THEME_WEB_ASSETS' => [
'home' => [
'css' => ['assets/css/demo.css'],
'js' => ['assets/js/demo.js'],
],
// Add more as needed
],
# THEME_ASSETS <x-app-layout> Define global assets used across all pages
'THEME_ASSETS' => [
'global' => [
'css' => [
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',
// Add more global CSS files here
],
'js' => [
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js',
// Add more global JavaScript files here
],
],
],
# THEME_VENDORS <x-app-layout> Define vendor assets specific to certain pages or components
'THEME_VENDORS' => [
'demo' => [
'css' => ['assets/css/demo.css'],
'js' => ['assets/js/demo.js'],
],
// Add more as needed
],
];
Step 4: Usage
Create a Controller
Generate a basic controller:
php artisan make:controller HomeController
Create a View
Generate a view:
php artisan make:view home
This will create home.blade.php in resources/views.
Subdirectory Controller
To create a controller in a subfolder:
php artisan make:controller Dashboard/HomeController
Subdirectory View
For views in subdirectories:
php artisan make:view dashboard.home
Step 5: Define Routes
Define your routes in routes/web.php:
Home Route:
Route::get('/', [App\Http\Controllers\HomeController::class, 'index']);
Dashboard Route:
Route::get('/dashboard', [App\Http\Controllers\Dashboard\HomeController::class, 'dashboard']);
Ensure your controllers have the necessary methods:
// HomeController.php
namespace App\Http\Controllers;
class HomeController extends Controller
{
public function index()
{
addWebAsset(['home']);
return view('home');
}
}
// Dashboard/HomeController.php
namespace App\Http\Controllers\Dashboard;
class HomeController extends Controller
{
public function dashboard()
{
addVendors(['demo']);
return view('dashboard.home');
}
}
Step 6: Use Layout Components
Integrate layout components in your Blade files:
Home Layout (Front-End)
<!-- resources/views/home.blade.php -->
<x-web-app-layout>
<h1>Welcome to the Front-End 👋</h1>
</x-web-app-layout>
Dashboard Layout
<!-- resources/views/dashboard/home.blade.php -->
<x-app-layout>
<h1>Welcome to the Dashboard 👋</h1>
</x-app-layout>
Blade Directives for Scripts and Styles
Include page-specific styles and scripts using Blade directives:
<!-- resources/views/home.blade.php -->
@push('page_styles')
<link rel="stylesheet" href="path/to/home-styles.css">
@endpush
@push('page_scripts')
<script src="path/to/home-scripts.js"></script>
@endpush
Page Title Setup
Set the page title dynamically in your controller:
// HomeController.php
public function index()
{
addWebAsset(['home', 'jq']);
$data['title'] = 'Home Page';
return view('home', $data);
}
And in your view:
<!-- resources/views/home.blade.php -->
<x-web-app-layout>
@section('title', $title)
<h1>Welcome to the Home Page 👋</h1>
</x-web-app-layout>
For more information and contributions, visit us on GitHub @eramitgupta or LinkedIn @eramitgupta.
Top comments (0)