Advanced Layout Setup for Laravel Applications 🔥

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.

Blog