DEV Community

Er Amit Gupta
Er Amit Gupta

Posted on

Advanced Layout Setup for Laravel Applications 🔥

#webdev #laravel #php #opensource

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
Enter fullscreen mode Exit fullscreen mode

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 ];
Enter fullscreen mode Exit fullscreen mode

Laravel 10.x

Add the service provider to config/app.php:

'providers' => [ // ... LaravelSetupLayout\LaravelSetupLayoutServiceProvider::class, ];
Enter fullscreen mode Exit fullscreen mode

Step 2: Publish Configuration

Publish the configuration file with the following command:

php artisan vendor:publish --tag=LaravelSetupLayout --force
Enter fullscreen mode Exit fullscreen mode

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 ], ];
Enter fullscreen mode Exit fullscreen mode

Step 4: Usage

Create a Controller

Generate a basic controller:

php artisan make:controller HomeController
Enter fullscreen mode Exit fullscreen mode

Create a View

Generate a view:

php artisan make:view home
Enter fullscreen mode Exit fullscreen mode

This will create home.blade.php in resources/views.

Subdirectory Controller

To create a controller in a subfolder:

php artisan make:controller Dashboard/HomeController
Enter fullscreen mode Exit fullscreen mode

Subdirectory View

For views in subdirectories:

php artisan make:view dashboard.home
Enter fullscreen mode Exit fullscreen mode

Step 5: Define Routes

Define your routes in routes/web.php:

Home Route: 

Route::get('/', [App\Http\Controllers\HomeController::class, 'index']);
Enter fullscreen mode Exit fullscreen mode

Dashboard Route: 

Route::get('/dashboard', [App\Http\Controllers\Dashboard\HomeController::class, 'dashboard']);
Enter fullscreen mode Exit fullscreen mode

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'); } }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Dashboard Layout 

<!-- resources/views/dashboard/home.blade.php --> <x-app-layout> <h1>Welcome to the Dashboard 👋</h1> </x-app-layout>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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); }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

For more information and contributions, visit us on GitHub @eramitgupta or LinkedIn @eramitgupta.

Top comments (0)