Inertia Link Confirm

Please describe what the problem is. What have you tried? How do you expect it to work?

Inertia Link is just an <a></a> tag but with much more flexibility. If you are using Vue then you can just prompt a message when user click on the Link

https://inertiajs.com/links

i too agree with him,

In case someone else is looking for the same question, Inertia Link has an undocumented way to prevent visit, using onBefore event, if you return false, it will not do the visit:

<Link :href="route('users.destroy', user)" method="delete" as="button" type="button" :onBefore="() => window.confirm('Are you sure?')">Delete</Link>

Hi ! I was looking for this same answer. The solution of @thewebartisan7 dosn't work for me. So i do some changes: I replaced this:

 < Link :href="route('user.delete',id)" class="border rounded-md px-3">Delete< /Link > 

For:

< button @click="remove" class="border rounded-md px-3" >Delete< /button >

So the method remove:

 function remove(){
		Inertia.visit(route("user.delete",props.id),{ 
            onBefore: () => confirm('Are you sure?'), 
    });
}

Regards.

this worked for me:

<Link :href="route('users.destroy', user)" method="delete" as="button" type="button" :onBefore="() => confirm()">Delete</Link>

and the confirm method in JS:

function confirm(){
        return window.confirm("Are you sure?");
}

This worked for me:

            <Link
                        as="button"
                        type="button"
                        method="delete"
                        onClick={(e) => {
                            if (!window.confirm("are you sure？")) {
                                e.preventDefault();
                            }
                        }}
                        href={route("spots.destroy", spot.id)}
                    >
                        Delete
                    </Link>

Anyone had any luck with changing the confirmation UI like implementing some SweetAlert confirmations? It's annoying that it can only show a basic alert like dialogue box and customization is like impossible as async operations aren't yet supported by onBefore() hook. Kindly, shade some light if someone has any workarounds on this. Can't get the following to work:

async function deleteResource(currentPage, data) {
  const result = await Swal.fire({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    icon: "question",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
    confirmButtonText: "Yes, delete it!"
  });

  if (result.isConfirmed) {
    await router.delete(`/${currentPage.lc_pluralized}/${data.id}`, {
      // onBefore: () => showConfirm(),
      onSuccess: () => {
        Swal.fire({
          title: "Deleted!",
          text: "The record has been deleted.",
          icon: "success"
        });
        dt.ajax.reload();
      }
    });

  } else {
    Swal.fire({
      text: "The record is safe.",
      icon: "info"
    });
  }
}```