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
delete record in Laravel 9 with Inertia Vue 3
Read Also
Laravel 9 Inertia Vue 3 Integrating Dashboard Example
Laravel 9 Inertia Vue 3 DataTables Example
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
