Dialogs in Laravel 12 Inertia 2 + Vue

We implemented a native confirmation dialog in Laravel Inertia.

Let's start with the inertia confirmation dialog, so for this we need to find a little inspiration, since note that the component is already used in the Profile component.

I'm going to use the terms "dialog" and "modal" to refer to the same component because, in principle, they're the same thing. So, I'll warn you here, it's not entirely simple. Look at everything that's important:

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

This is the delete for simply this what I mean that I would have liked it to be more unified but anyway it is what we have so here it is importing its use you can see here dialog trigger:

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

This is the trigger to activate the parent component, which is the dialog.

The as-child is to prevent you from placing another wrapper around the delete button.

Body of the dialogue

The rest of the components are nothing more than the structure of the modal, and are as follows:

<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

En español

• Category
• /
• Laravel
• /
• Dialogs in Laravel 12 Inertia 2 + Vue