A 2021 guide about structuring your Blade components

There are a few recommended ways to organize your layouts, templates, and partials in Laravel. But after many iterations, I ended up with this directory tree.

views/
├── Layouts
│   ├── app.blade.php
│   └── guest.blade.php
├── components
├── SECTION
│   ├── ...blade.php
│   └── ....blade.php
└─── SECTION.blade.ph

I organize the Views directory with a simple but powerful principe from nextjs routing system. It's a file-system based approach where views are grouped by section (or collection), along with their own partials and pages files.

When I define a base route like /docs on my views, I added a file with the same name docs.blade.php and the docs directory. The files inside the docs directory can be used to define most common CRUD operations, pages and features.

I start by one or two views, on the web.php router. I declare my views for every directory like that :

/docs → /docs.blade.php
/docs/guide → /docs/guide.blade.php

As the logic or sections inside my views grow, I add layouts, partials and blade components inside the views folders like that:

views/
├── Layouts
│   ├── app.blade.php
│   └── guest.blade.php
├── components
│   ├── navbar.blade.php
│   ├── aside.blade.php
│   ├── image.blade.php
│   └── .....NO Folders here only file
├── docs
│   ├── guide.blade.php
│   ├── components.blade.php
│   └── customization.blade.php

Finally if for large sites, I add Controller or a livewire component to handle :

Manipulate and get data into the views,
Have a search component , tables view with filters, live status pages, and things like forms with live validation...
Fetch data from laravel or do other more programmery-things

Here is an example of my actual project views directory :

views/
├── Layouts
│   ├── app.blade.php
│   └── guest.blade.php
├── components
│   ├── navbar.blade.php
│   ├── user-card.blade.php
│   ├── login.blade.php
│   ├── image.blade.php
│   └── .....NO Folders here only file
├── docs
│   ├── article.blade.php
│   ├── components.blade.php
│   └── about.blade.php
├── profile
│   ├── login.blade.php
│   ├── show.blade.php
│   ├── security.blade.php
│   └── preferences.blade.php
├── dashboard
│   ├── pages.blade.php
│   ├── show.blade.php
│   └── edit.blade.php
├── SECTION
│   ├── ...blade.php
│   ├── ...blade.php
│   └── ....blade.php
├── docs.blade.php
├── profile.blade.php
├── dashboard.blade.php
├── ....
└── SECTION.blade.ph

Having the same name system for routes and views makes locating and editing code a breeze since you don’t have to guess where your views are and where they are used.

As my site scale, I can choose to move from this file-system to more complicated structure. Deferring this decision prevents premature optimization and technical debt.

Our Amazing Sponsors