How to Delete Record in Laravel 9 with Inertia Vue 3

In this short tutorial we will see how to delete record in laravel 9 using inertia vue 3. For this section we will use Vue 3 SFCs method <script setup>.

PostController.php

/**
* Remove the specified resource from storage.
*
* @param  \App\Models\Post  $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
    $post->delete();
    sleep(1);

    return redirect()->route('posts.index')->with('message', 'Post Delete Successfully');
}


routes/web.php

Route::delete('posts/{post}',[PostController::class,'destroy'])->name('posts.destroy');


Posts/Index.vue

<script setup>
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
import { Head } from "@inertiajs/inertia-vue3";
import BreezeButton from "@/Components/Button.vue";
import { Link } from "@inertiajs/inertia-vue3";
import { Inertia } from "@inertiajs/inertia";

defineProps({
    posts: {
        type: Object,
        default: () => ({}),
    },
});
function destroy(id) {
    if (confirm("Are you sure you want to Delete")) {
        Inertia.delete(route("posts.destroy", id));
    }
}
</script>

<template>
    <Head title="Post" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                Posts
            </h2>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div
                    v-if="$page.props.flash.message"
                    class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
                    role="alert"
                >
                    <span class="font-medium">
                        {{ $page.props.flash.message }}
                    </span>
                </div>
                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                       
                        <div
                            class="relative overflow-x-auto shadow-md sm:rounded-lg"
                        >
                            <table
                                class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
                            >
                                <thead
                                    class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
                                >
                                    <tr>
                                        <th scope="col" class="px-6 py-3">#</th>
                                        <th scope="col" class="px-6 py-3">
                                            Post name
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Slug
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Created At
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Edit
                                        </th>
                                        <th scope="col" class="px-6 py-3">
                                            Delete
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr
                                        v-for="post in posts"
                                        :key="post.id"
                                        class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
                                    >
                                        <th
                                            scope="row"
                                            class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
                                        >
                                            {{ post.id }}
                                        </th>
                                        <th
                                            scope="row"
                                            class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
                                        >
                                            {{ post.name }}
                                        </th>
                                        <td class="px-6 py-4">
                                            {{ post.slug }}
                                        </td>
                                        <td class="px-6 py-4">
                                            {{ post.created_at }}
                                        </td>

                                        <td class="px-6 py-4">
                                            <Link
                                                :href="
                                                    route(
                                                        'post.edit',
                                                        post.id
                                                    )
                                                "
                                               class="px-4 py-2 text-white bg-blue-600 rounded-lg" >Edit</Link
                                            >
                                        </td>
                                        <td class="px-6 py-4">
                                            <BreezeButton
                                                class="bg-red-600"
                                                @click="destroy(post.id)"
                                            >
                                                Delete
                                            </BreezeButton>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

OR: You can also use inertia vue 3 Form helper.

import { useForm } from '@inertiajs/inertia-vue3'

const form = useForm();
function destroy(id) {
    if (confirm("Are you sure you want to Delete")) {
        form.delete(route('posts.destroy', id));
    }
}
laravel 9 inertia delete record

laravel 9 inertia delete record

delete record in Laravel 9 with Inertia Vue 3

delete record in Laravel 9 with Inertia Vue 3



Read Also

Laravel 9 Inertia Vue 3 File Upload Example

Laravel 9 Inertia Vue 3 Form Submit Example

Laravel 9 Inertia Vue 3 Search & Filter Example

Laravel 9 Install Inertia js Server-side rendering (SSR)

Laravel 9 with Inertia Vue 3 Implement Flash Message

Laravel 9 Inertia Vue 3 CRUD Tutorial Example

Laravel Inertia Vue 3 Form Validation

Laravel 9 Inertia Vue 3 Pagination Example