[QUESTION] WHERE SHOULD I DIRECT LAYOUT LIVEWIRE

[marwandhiaurrahman]

I would like to ask when I use livewire where should I point my layout when using this package

Item	Version
Laravel	10
Livewire	3

[dfsmania]

Hi @marwandhiaurrahman , I suggest you to add more details about your question, with code or examples that gives a better idea of what you want to achieve.

[marwandhiaurrahman]

when i use Larave-AdminLTE with Livewire i have error like this

after that i try change in config/livewire.php 'layout' => 'components.layouts.app', to 'layout' => 'vendor.adminlte.master',

and now i have this error , a blank page

it's my livewire component ProfilIndex.blade.php

<?php

namespace App\Livewire\Profil;

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;

class ProfilIndex extends Component
{
    public $user;
    public $id, $name, $email, $phone, $username;
    public function save()
    {
        $user = Auth::user();
        $user->name = $this->name;
        $user->username = $this->username;
        $user->phone = $this->phone;
        $user->email = $this->email;
        $user->save();
        flash('User updated successfully!', 'success');
    }
    public function resetForm()
    {
        $this->name = null;
        $this->email = null;
        $this->phone = null;
        $this->username = null;
    }
    public function render()
    {
        $user = Auth::user();
        $this->user = $user;
        $this->id = $user->id;
        $this->name = $user->name;
        $this->email = $user->email;
        $this->phone = $user->phone;
        $this->username = $user->username;
        return view('livewire.profil.profil-index')
            ->title('Profil');
    }
}

it's my livewire view profile-index.blade.php

<div class="row">
    @if (flash()->message)
        <div class="col-md-12">
            <x-adminlte-alert theme="{{ flash()->class }}" title="{{ flash()->class }} !" dismissable>
                {{ flash()->message }}
            </x-adminlte-alert>
        </div>
    @endif
    <div class="col-md-4">
        <x-adminlte-profile-widget name="{{ $user->name }}" desc="{{ $user->email }}" theme="primary"
            img="{{ $user->adminlte_image() }}">
            <ul class="nav flex-column col-md-12">
                <li class="nav-item">
                    <b class="nav-link">Nama <b class="float-right ">{{ $user->name }}</b></b>
                </li>
                <li class="nav-item">
                    <b class="nav-link">Username <b class="float-right ">{{ $user->username }}</b></b>
                </li>
                <li class="nav-item">
                    <b class="nav-link">No HP <b class="float-right ">{{ $user->phone }}</b></b>
                </li>
                <li class="nav-item">
                    <b class="nav-link">Email <b class="float-right ">{{ $user->email }}</b></b>
                </li>
            </ul>
        </x-adminlte-profile-widget>
    </div>
    <div class="col-md-8">
        <x-adminlte-card title="Identitas User" theme="primary">
            <form>
                <x-adminlte-input wire:model="name" fgroup-class="row" label-class="text-left col-3"
                    igroup-class="col-9" igroup-size="sm" name="name" label="Nama" />
                <x-adminlte-input wire:model="username" fgroup-class="row" label-class="text-left col-3"
                    igroup-class="col-9" igroup-size="sm" name="username" label="Username" />
                <x-adminlte-input wire:model="phone" fgroup-class="row" label-class="text-left col-3"
                    igroup-class="col-9" igroup-size="sm" name="phone" label="Phone" />
                <x-adminlte-input wire:model="email" fgroup-class="row" label-class="text-left col-3"
                    igroup-class="col-9" igroup-size="sm" name="email" type="email" label="Email" />
            </form>
            <x-slot name="footerSlot">
                <x-adminlte-button label="Simpan" wire:click="save"
                    wire:confirm="Apakah anda ingin menyimpan data profil {{ $user->name }} ?" form="formUpdate"
                    theme="warning" icon="fas fa-save" />
            </x-slot>
        </x-adminlte-card>
    </div>
</div>

i think i sholud change my layout livewire to the correct file, but i dont know how to do that

[dfsmania]

From the Livewire configuration file you can read:

    /*
    |---------------------------------------------------------------------------
    | Layout
    |---------------------------------------------------------------------------
    | The view that will be used as the layout when rendering a single component
    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
    | In this case, the view returned by CreatePost will render into $slot.
    |
    */

    'layout' => 'components.layouts.app',

So, this configuration is expecting you to setup a blade view path where your application layout component is defined. By default, it expects you to have a resources/views/components/layouts/app.blade.php file defined in your project that provides a $slot variable, this way your controllers returning a Livewire component will be rendered using that layout, inside the $slot section. You should read the Livewire documentation about Layout Files to initially setup that view. Note it provides a $slot variable.

Now, assuming that you want to use the Admin panel layout provided by this package. You should define an application layout that extends from the provided package layout, see how to use this package here. I will start trying with:

resources/views/components/layout/app.blade.php

@extends('adminlte::page')

@section('title' )
    {{ $title }}
@stop

@section('content_header')
    <h1>My dashboard</h1>
@stop

@section('content')
    {{ $slot }}
@stop

@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script> console.log("Hi, I'm using the Laravel-AdminLTE package!"); </script>
@stop

[!IMPORTANT] If your project was working previously, check if you don't already had an application layout inside resources/views/layouts/ folder.

[marwandhiaurrahman]

oke thanks a lot , now livewire with this package its work