Disable default Laravel JSON resource data wrapping

Author: perisicnikola37

app/Http/Controllers/RoleController.php

@@ -24,7 +24,7 @@ public function index()
      */
     public function create()
     {
-        //
+        return Inertia::render('Roles/Create');
     }
 
     /**
@@ -48,7 +48,9 @@ public function show(string $id)
      */
     public function edit(string $id)
     {
-        //
+        $role = Role::findOrFail($id);
+
+        return Inertia::render('Roles/Edit', compact('role'));
     }
 
     /**
@@ -64,6 +66,8 @@ public function update(Request $request, string $id)
      */
     public function destroy(string $id)
     {
-        //
+        Role::destroy($id);
+
+        return back();
     }
 }

app/Providers/AppServiceProvider.php

@@ -20,5 +20,6 @@ public function register(): void
      */
     public function boot(): void
     {
+        JsonResource::withoutWrapping();
     }
 }

database/migrations/2014_10_12_000000_create_users_table.php

@@ -22,7 +22,7 @@ public function up(): void
             $table->foreignId('current_team_id')->nullable();
             $table->string('profile_photo_path', 2048)->nullable();
             $table->bigInteger('role_id')->unsigned()->index()->nullable();
-            $table->foreign('role_id')->references('id')->on('roles')->cascadeOnDelete();
+            // $table->foreign('role_id')->references('id')->on('roles')->cascadeOnDelete();
             $table->timestamps();
         });
 

resources/js/Pages/Roles/Create.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        create component
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

resources/js/Pages/Roles/Edit.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <AppLayout title="Edit role">
+            Edit role: {{ role.name }}
+        </AppLayout>
+    </div>
+</template>
+
+<script>
+import AppLayout from '@/Layouts/AppLayout.vue';
+
+export default {
+    props: {
+        role: Object,
+    },
+    components: { AppLayout }
+}
+</script>

resources/js/Pages/Roles/Index.vue

@@ -4,7 +4,7 @@
         <template #header>
             <h2 class="flex justify-between font-semibold text-xl text-gray-800 leading-tight">
                 Roles
-                <inertia-link href="/roles/create">
+                <inertia-link href="roles/create">
                     <a
                         class="text-sm border border-green-300 px-4 py-2 rounded-full text-green-600 hover:bg-green-600 hover:text-white hover:border-transparent mr-3 transition">Create
                         role</a>
@@ -131,6 +131,14 @@ export default {
     },
     props: {
         roles: Object
+    },
+    methods: {
+        deleteRole(role) {
+            if (!confirm('Are you sure want to delete role?')) return;
+            this.$inertia.delete(route('roles.destroy', role.id), {
+                _token: this.$page.props.csrf_token,
+            });
+        },
     }
 }
 </script>

resources/js/app.js

@@ -2,22 +2,23 @@ import './bootstrap';
 import '../css/app.css';
 
 import { createApp, h } from 'vue';
-import { createInertiaApp } from '@inertiajs/vue3';
+import { createInertiaApp, Link } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
 
-const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
+// const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
 
 createInertiaApp({
     // title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
         return createApp({ render: () => h(App, props) })
             .use(plugin)
+            .component('inertia-link', Link)
             .use(ZiggyVue, Ziggy)
             .mount(el);
     },
     progress: {
-        color: '#4B5563',
+        color: '#1266db',
     },
 });