Dialogos en Laravel 12 Inertia 2 + Vue

Implementamos un dialogo de confirmación nativo en Laravel Inertia.

Vamos a comenzar con el diálogo de confirmación en inertia así que para esto tenemos que buscar un poquito de inspiración ya que fíjate que el componente ya se emplea en el componente de Profile.

Voy a emplear los términos de diálogo y modal para referirme al mismo componente porque en principio es lo mismo entonces voy te voy aquí avisando no es del todo como quien dice sencillo mira todo lo que tiene que importar:

import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';

Este es el de delete para simplemente esto lo que me refiero que me hubiera gustado que esté más unificado pero en fin es lo que tenemos entonces aquí lo está importando su uso lo puedes ver aquí dialog trigger:

    <DialogTrigger as-child>
        <Button class="ml-2" variant="destructive" size="sm">
            Delete
        </Button>
    </DialogTrigger>

Este es el accionante para activar el componente padre que es el dialog.

El as-child es para evitar que coloque otro envoltorio al Button de delete.

Cuerpo del dialog

El resto de los componentes no es más que de estructura del modal, quedando de la siguiente forma:

<td class="p-2">
    ***
    <!-- <o-button iconLeft="delete" rounded size="small" variant="danger" @click="confirmDeleteActive = true;
    deletePostRow = p.id;">Delete</o-button> -->
    <Dialog>
        <DialogTrigger as-child>
            <Button class="ml-2" variant="destructive" size="sm">
                Delete
            </Button>
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>
                    Are you sure you want to delete the record?
                </DialogTitle>
                <DialogDescription>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere laborum
                    omnis s
                </DialogDescription>
            </DialogHeader>
            <DialogFooter>
                <DialogClose as-child>
                    <Button variant="secondary">
                        Cancel
                    </Button>
                </DialogClose>
                <DialogClose as-child>
                    <Button variant="destructive" @click="deletePost(p)">
                        Delete
                    </Button>
                </DialogClose>


            </DialogFooter>
        </DialogContent>
    </Dialog>
</td>
***
import { Button } from '@/components/ui/button';


import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
***
components: {
    ***
    Button,
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
},
***
deletePost(post) {
    router.delete(route("post.destroy", post.id));
},

01-04-2025 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Dialogos en Laravel 12 Inertia 2 + Vue