Documentation

dreams-core/
└── laravellivewire/
    ├── app/
    │   ├── Http/
    │   │   └── Controllers/
    │   ├── Models/
    │   └── Providers/
    │
    ├── bootstrap/
    │   └── cache/
    │
    ├── config/
    │   ├── app.php
    │   ├── database.php
    │   └── livewire.php            # Livewire config (layout, namespaces, navigate options)
    │
    ├── database/
    │   ├── migrations/
    │   └── seeders/
    │
    ├── public/
    │   ├── index.php
    │   └── build/                  # Compiled assets (npm run build)
    │       ├── css/
    │       ├── img/
    │       ├── js/
    │       └── libs/
    │
    ├── resources/
    │   ├── css/                    # style.css (Tailwind 4) and plugin themes
    │   ├── js/                     # script.js, chart-data.js, livewire-bridge.js ...
    │   ├── img/
    │   └── views/
    │       ├── layouts/            # app.blade.php, auth.blade.php   (layouts::app, layouts::auth)
    │       ├── partials/           # sidebar, topbar, breadcrumb, footer, vendor-scripts ...
    │       ├── components/         # modal-popup.blade.php
    │       └── pages/              # one Livewire single-file component per page (pages::name)
    │
    ├── routes/
    │   └── web.php                 # Route::livewire('/uri', 'pages::name')
    │
    ├── storage/
    ├── tests/
    │
    ├── artisan
    ├── composer.json               # laravel/framework ^13 + livewire/livewire ^4
    ├── package.json
    └── vite.config.js

1. Links

Add wire:navigate to any link that should navigate without a reload:

<a wire:navigate href="{{ url('accounts') }}">Accounts</a>

2. Persisted Sidebar

The sidebar is wrapped in @persist('sidebar') in layouts/app.blade.php. The same DOM node survives every navigation, so the scroll position and the open sub-menus stay exactly where you left them; only the active menu highlight changes.

3. Page Scripts (Script Bridge)

The template scripts (script.js, charts, date pickers ...) were written for full page loads. Because a Livewire navigation does not reload the document, resources/js/livewire-bridge.js loads them: libraries once, page modules again on every visit, and it removes the previous visit's event listeners so handlers are never bound twice. Scripts are declared in partials/vendor-scripts.blade.php as meta tags:

<meta name="lw-script" content="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}">
<meta name="lw-module" content="{{ Vite::asset('resources/js/chart-data.js') }}">

• lw-script: a classic library, loaded once for the whole session.
• lw-module: an app module from resources/js, re-run after every navigation.

4. Page-Level CSS

A page that needs its own CSS (for example the error pages) keeps a <style> block inside the component's root element. @push does not reach the layout from a Livewire page component.

5. Opting Out

Remove wire:navigate from a link to make it a normal full page load.

Adding a page takes three steps.

1. Generate the component

php artisan make:livewire pages::my-page --sfc --emoji=false

This creates resources/views/pages/my-page.blade.php. Add the layout and title, and put your markup below the PHP block:

<?php

use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;

new #[Layout('layouts::app', ['breadcrumb' => 'My Page'])]
#[Title('My Page')] class extends Component
{
    //
};
?>

<main class="p-4 lg:p-6 space-y-5 w-full mx-auto max-w-full">
    <h1 class="font-display font-bold text-[19px]">My Page</h1>
</main>

2. Register the route

// routes/web.php
Route::livewire('/my-page', 'pages::my-page')->name('my-page');

3. Link to it

Add the page to resources/views/partials/sidebar.blade.php (or any link) with wire:navigate:

<a wire:navigate href="{{ url('my-page') }}">My Page</a>

Adding Livewire behaviour

The template pages are static markup. To make a page dynamic, give its component state and actions and bind the markup with wire:model and wire:submit:

<?php

use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;

new #[Layout('layouts::app', ['breadcrumb' => 'Add Category'])]
#[Title('Add Category')] class extends Component
{
    public string $name = '';

    public function save(): void
    {
        $data = $this->validate(['name' => 'required|min:3']);

        // Category::create($data);

        $this->reset('name');
    }
};
?>

<main class="p-4 lg:p-6">
    <form wire:submit="save" class="space-y-4">
        <input type="text" wire:model="name" class="w-full field-control">
        @error('name') <p class="text-danger-500">{{ $message }}</p> @enderror
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</main>

The default vertical layout with a left sidebar, topbar, and center content area.

• Sidebar: Navigation menu, logo, profile details, and collapsible dropdowns.
• Topbar: Search input, user alerts, settings, and profile toggle actions.
• Responsive: Collapses into an overlay sidebar on tablets and mobile screens automatically.

A screen-saving option that collapses the sidebar to show icons only. Add class mini-sidebar to the <body> to activate.

• Icon View: Collapses to 56px to maximize the main work area.
• Hover Expand: Hovering expands the sidebar to reveal module text labels.
• Toggle: Switch between default and mini sidebar using the toggle button in the topbar.

Dreams Core comes with 24+ pre-styled UI components. You can find these page components in your resources/views/pages/ directory (e.g. ui-accordion.blade.php) or click below to view their live layouts: