Respect's avatar

Respect wrote a reply+100 XP

3d ago

i need it globally no need put it in each action button need something put it inside app-blade.php

Respect's avatar

Respect started a new conversation+100 XP

3d ago

  • hot to make request continue
<script>
        document.addEventListener('livewire:init', () => {
            Livewire.hook('component.init', ({
                component
            }) => {
                component.intercept('delete', async ({
                    action
                }) => {
                    action.cancel();
                    const result = await Swal.fire({
                        title: 'Are you sure?',
                        text: "This action is permanent!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'Cancel'
                    });

                    // 3. If confirmed, resume the action
                    if (result.isConfirmed) {
                        // how to make request continue to delete
                    }
                })
            });
        });
    </script>

    public function delete($id)
    {
        $jobTitle = JobTitle::findOrFail($id)->delete();
    }
Respect's avatar

Respect wrote a reply+100 XP

1w ago

which method is better for preformance because my app is erp system 1 - using x-teleport 2 - using $disptach event for example

// on search input 
x-on:input="$dispatch('search-input-change ',{value : $event.target.value})"
// in traits

    #[On('search-input-change')]
    public function onSearchInputChange($value)
    {
        $this->search = $value;

            $this->resetPage();
    }
Respect's avatar

Respect liked a comment+100 XP

1w ago

This happens because of how Livewire scopes its DOM tree. When you push the search input into <x-slot name="rightSection">, Blade extracts that code and renders it outside of your Livewire component's root <div> in the app-admin.blade.php layout. Livewire only tracks and hydrates wire:model bindings that live inside its root element (which is what gets rendered in {{ $slot }}). Because the named slot is injected elsewhere in the DOM, Livewire's JavaScript simply can't see it.

Keep the input physically inside your Livewire component's default slot, but "teleport" it visually to the header.

Add an ID to the target container in your app-admin.blade.php layout:

<div id="right-section-container" class="flex justify-center items-center gap-2">
    {{ $rightSection ?? '' }}
</div>

In your Livewire component, remove the search input from the <x-slot> and use <template x-teleport="..."> inside your main default slot:

<div>
    <x-slot name="title">...</x-slot>
    <x-slot name="breadcrumbs">...</x-slot>
    <x-slot name="rightSection">
        <x-buttons.create href="#" x-data="{}" x-on:click="$dispatch('open-modal', { name: 'create-job-title' })" :name="__('app.create_job_title')" />
        <x-dropdowns.per-page />
    </x-slot>

    <template x-teleport="#right-section-container">
        <x-inputs.search wire:model.live="search" />
    </template>

    </div>

This keeps the input inside Livewire's component state/scope while rendering it exactly where you want in the layout UI.

Respect's avatar

Respect started a new conversation+100 XP

1w ago

  • hello Why search input inside custom slot not working when typing , if moved out the custom slot will working
    // index page code & app-admin.blade.php layout code below

// app-admin.blade.php code

Respect's avatar

Respect wrote a reply+100 XP

1w ago

okey thanks for clear this for me , i will use blaze partially like you said in app service provider insted of all component thanks

Respect's avatar

Respect started a new conversation+100 XP

2w ago

  • my laravel 13 livewire 4 app component <x-sidebars.sidebar-admin /> not working in my lazyout file when use blaze ( mast put the code direct inside layout file to wroking ) if disabled blaze component works
    note: always aim clear:view and clear:cache

FULL CODE IS BELOW

AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Livewire\Blaze\Blaze;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void {}

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Blaze::optimize()->in(resource_path('views/components'));
    }
}
Respect's avatar

Respect wrote a reply+100 XP

4mos ago

thx for answer but i need seperate files becuase may be add some custom css with same class names no need any confliction .so that iam asking about seperating fiel btween admin and website frontend

Respect's avatar

Respect started a new conversation+100 XP

4mos ago

  • hello how to make custom css and js in the app for example app.css & admin.css & app.js & admin.js ( in my laravel livewire app ) with tailwind css - becasue i need make dffrent configs in each file and override colors for example
  • i have app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    @vite('resources/css/app.css')
    @livewireStyles
</head>

<body>
  
    {{ $slot }}
 
    @vite('resources/js/app.js')
</body>

</html>
  • i have app-admin.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    @vite('resources/css/admin.css')
    @livewireStyles
</head>

<body>
  
    {{ $slot }}
 
    @vite('resources/js/admin.js')
</body>

</html>
Respect's avatar

Respect wrote a reply+100 XP

4mos ago

okey ty i started with livewire 3 ty

Respect's avatar

Respect started a new conversation+100 XP

4mos ago

hello

Does to use livewire 4 now for real world project or go with livewire 3 in know it's stell in beta . but will starting new project but need features of livewire v4 like blaze and preformance and structure