AdminLTE whit jetstream not showing modals confirmations and js not working in profile options

[judavid6]

Describe the bug

Jetstream provides an interface to modify the user information, but when I try to modify the next 2 options with the AdminLTE template it doesn't work.

Steps To Reproduce

Steps to reproduce the behavior:

1. Here is the code I use.

@extends('adminlte::page')
@section('title','Perfil')
@section('content_header')
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
    {{ __('Profile') }}
</h2>
@stop
@section('content')
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Profile') }}
        </h2>
    </x-slot>

    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
            @if (Laravel\Fortify\Features::canUpdateProfileInformation())
            @livewire('profile.update-profile-information-form')

            <x-jet-section-border />
            @endif

            @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
            <div class="mt-10 sm:mt-0">
                @livewire('profile.update-password-form')
            </div>

            <x-jet-section-border />
            @endif

            @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
            <div class="mt-10 sm:mt-0">
                @livewire('profile.two-factor-authentication-form')
            </div>

            <x-jet-section-border />
            @endif

            <div class="mt-10 sm:mt-0">
                @livewire('profile.logout-other-browser-sessions-form')
            </div>

            @if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
            <x-jet-section-border />

            <div class="mt-10 sm:mt-0">
                @livewire('profile.delete-user-form')
            </div>
            @endif
        </div>
    </div>
</x-app-layout>

@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
<script src="{{ mix('js/app.js') }}" defer></script>
@stop

2. This doesn't work

3. This doesn't work

Expected behavior

A clear and concise description of what you expected to happen.

2. Expected

3. Expected

Screenshots

If applicable, add screenshots to help explain your problem or to shown the issue.

Environment

Complete the next environment information.

Laravel 8
AdminLTE 3.1.0

[dfsmania]

Hi @judavid6 on the package we only offers support to the legacy laravel/ui authentication scaffolding. Integrating with brezee or Jetstream should be done on your own. I do not have experience with any of these authentication scaffolding. So, maybe the community can help you here...

[jonasalvarado]

Greetings, it would be of interest, to know if you managed to solve the implementation with jetstream since I find myself in the same situation.

[invaders-xx]

Using nascent-africa/jetstrap make it works, I don't have any issue with Jetstream.

Hope it helps.

[numeral42]

Hola. Buscando una solución para el uso de los modales de jestream con adminlte3 vi este problema, yo lo solucione: hice una plantilla en layouts con las secciones de adminlte3 y en un $slot cargue profile/show.blade.phe osea reemplace por y en el archivo resouces/views/profile/show.blade.php, cree un un componente app/view/components/AdminlteLayout.php y en el layouts/adminlte.blade.php copie el head de layouts/app.blade.php. perdón si no me explico bien. Espero se entienda.

[NRotili]

Hola! Podrías detallarlo un poco mejor?
Cómo incorporaste el head en las secciones de adminlte?
Saludos y gracias de antemano!

[atulmahankal]

Modifying just 2 files resolved the issue.

1. config\adminlte.php
   'livewire' => true,

2. resources\views\profile\show.blade.php

@extends('adminlte::page')

@section('title', 'Profile')

@section('content_header')
    <h1>Profile</h1>
@stop

@section('js')
    @vite(['resources/css/app.css', 'resources/js/app.js'])
@stop

@section('content')
    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
            @if (Laravel\Fortify\Features::canUpdateProfileInformation())
                @livewire('profile.update-profile-information-form')

                <x-jet-section-border />
            @endif

            @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
                <div class="mt-10 sm:mt-0">
                    @livewire('profile.update-password-form')
                </div>

                <x-jet-section-border />
            @endif

            @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
                <div class="mt-10 sm:mt-0">
                    @livewire('profile.two-factor-authentication-form')
                </div>

                <x-jet-section-border />
            @endif

            <div class="mt-10 sm:mt-0">
                @livewire('profile.logout-other-browser-sessions-form')
            </div>

            @if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
                <x-jet-section-border />

                <div class="mt-10 sm:mt-0">
                    @livewire('profile.delete-user-form')
                </div>
            @endif
        </div>
    </div>
@endsection

[tmgomas]

Jetstream Using Tailwind CSS I think That is the issue