Skip to content

Commit 0b9cc34

Browse files
Nazmul7989Nazmul7989
committed
inertia response
1 parent cef5610 commit 0b9cc34

File tree

15 files changed

+249
-37
lines changed

15 files changed

+249
-37
lines changed

‎app/Http/Controllers/HomeController.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22

33
namespace App\Http\Controllers;
44

5+
use App\Models\Post;
56
use Illuminate\Http\Request;
67
use Inertia\Inertia;
78

89
class HomeController extends Controller
910
{
1011
public function index()
1112
{
12-
return Inertia::render('Home');
13+
$posts = Post::take(10)->get();
14+
15+
return Inertia::render('Home',[
16+
'posts' => $posts
17+
]);
1318
}
1419

1520
public function about()

‎app/Models/Post.php

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?php
2+
3+
namespace App\Models;
4+
5+
use Illuminate\Database\Eloquent\Factories\HasFactory;
6+
use Illuminate\Database\Eloquent\Model;
7+
8+
class Post extends Model
9+
{
10+
use HasFactory;
11+
12+
protected $fillable = ['title','descirption'];
13+
14+
}

‎database/factories/PostFactory.php

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<?php
2+
3+
namespace Database\Factories;
4+
5+
use Illuminate\Database\Eloquent\Factories\Factory;
6+
7+
/**
8+
* @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
9+
*/
10+
class PostFactory extends Factory
11+
{
12+
/**
13+
* Define the model's default state.
14+
*
15+
* @return array<string, mixed>
16+
*/
17+
public function definition(): array
18+
{
19+
return [
20+
'title' => $this->faker->name,
21+
'description' => $this->faker->text,
22+
];
23+
}
24+
}

‎database/migrations/2023_07_11_020512_create_posts_table.php

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
3+
use Illuminate\Database\Migrations\Migration;
4+
use Illuminate\Database\Schema\Blueprint;
5+
use Illuminate\Support\Facades\Schema;
6+
7+
return new class extends Migration
8+
{
9+
/**
10+
* Run the migrations.
11+
*/
12+
public function up(): void
13+
{
14+
Schema::create('posts', function (Blueprint $table) {
15+
$table->id();
16+
$table->string('title');
17+
$table->string('description');
18+
$table->timestamps();
19+
});
20+
}
21+
22+
/**
23+
* Reverse the migrations.
24+
*/
25+
public function down(): void
26+
{
27+
Schema::dropIfExists('posts');
28+
}
29+
};

‎package-lock.json

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
"vite": "^4.0.0"
1515
},
1616
"dependencies": {
17+
"@headlessui/vue": "^1.7.14",
18+
"@heroicons/vue": "^2.0.18",
1719
"@inertiajs/vue3": "^1.0.9",
1820
"@vitejs/plugin-vue": "^4.2.3",
1921
"vue": "^3.3.4"

‎resources/js/Components/NavLink.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22

33
<Link
4-
:class="$page.component === component && 'active' "
4+
:class="$page.component === component ? 'active' : 'normal' "
55
:href="href"
66
preserve-scroll
77
>
@@ -21,11 +21,13 @@ defineProps(['name','component','href'])
2121
</script>
2222

2323
<style scoped>
24+
.normal{
25+
color: #ffffff;
26+
}
2427
.active{
2528
color: red;
2629
font-weight: 600;
2730
text-decoration: none;
28-
font-size: 20px;
2931
}
3032
3133
</style>

‎resources/js/Components/Table.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<br>
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-12">
6+
<h1 class="text-center text-success mb-3">Post List</h1>
7+
<table class="table table-bordered">
8+
<thead>
9+
<tr>
10+
<th>Id</th>
11+
<th>Title</th>
12+
<th>Description</th>
13+
<th>Action</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
<tr v-for="post in posts" :key="post.id">
18+
<td>{{ post.id }}</td>
19+
<td>{{ post.title }}</td>
20+
<td>{{ post.description }}</td>
21+
<td style="width: 200px;">
22+
<button class="btn btn-info">Edit</button>
23+
<button class="btn btn-danger ms-2">Delete</button>
24+
</td>
25+
</tr>
26+
</tbody>
27+
</table>
28+
</div>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script setup>
34+
defineProps(['posts'])
35+
36+
</script>

‎resources/js/Layouts/Layout.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<Header/>
2+
<Navbar/>
33
<slot/>
44
<Footer/>
55
</template>
66

77
<script setup>
8-
import Header from "@/Layouts/Partials/Header.vue";
98
import Footer from "@/Layouts/Partials/Footer.vue";
9+
import Navbar from "@/Layouts/Partials/Navbar.vue";
1010
1111
</script>
1212

‎resources/js/Layouts/Partials/Header.vue

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎resources/js/Layouts/Partials/Navbar.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
3+
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
4+
<div class="relative flex h-16 items-center justify-between">
5+
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
6+
<!-- Mobile menu button-->
7+
<DisclosureButton class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
8+
<Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
9+
<XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
10+
</DisclosureButton>
11+
</div>
12+
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
13+
<div class="flex flex-shrink-0 items-center">
14+
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
15+
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
16+
</div>
17+
<div class="hidden sm:ml-6 sm:block">
18+
<div class="flex space-x-4">
19+
<NavLink v-for="item in navigation"
20+
:key="item.name"
21+
:name="item.name"
22+
:component="item.component"
23+
:href="item.href"
24+
>
25+
</NavLink>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
30+
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
31+
<span class="sr-only">View notifications</span>
32+
<BellIcon class="h-6 w-6" aria-hidden="true" />
33+
</button>
34+
35+
<!-- Profile dropdown -->
36+
<Menu as="div" class="relative ml-3">
37+
<div>
38+
<MenuButton class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
39+
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
40+
</MenuButton>
41+
</div>
42+
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
43+
<MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
44+
<MenuItem v-slot="{ active }">
45+
<a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Your Profile</a>
46+
</MenuItem>
47+
<MenuItem v-slot="{ active }">
48+
<a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Settings</a>
49+
</MenuItem>
50+
<MenuItem v-slot="{ active }">
51+
<a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Sign out</a>
52+
</MenuItem>
53+
</MenuItems>
54+
</transition>
55+
</Menu>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<DisclosurePanel class="sm:hidden">
61+
<div class="space-y-1 px-2 pb-3 pt-2">
62+
<NavLink v-for="item in navigation"
63+
:key="item.name" as="a"
64+
:name="item.name"
65+
:component="item.component"
66+
:href="item.href"
67+
>
68+
69+
</NavLink>
70+
</div>
71+
</DisclosurePanel>
72+
</Disclosure>
73+
</template>
74+
75+
<script setup>
76+
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
77+
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
78+
import NavLink from "@/Components/NavLink.vue";
79+
80+
const navigation = [
81+
{ name: 'Home', component: 'Home', href: '/'},
82+
{ name: 'About', component: 'About', href: '/about'},
83+
{ name: 'Login', component: 'Login', href: '/login'},
84+
]
85+
</script>

‎resources/js/Pages/About.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<br>
3-
<div>About page</div>
3+
<div class="text-blue-400">About page</div>
44
</template>
55

66

‎resources/js/Pages/Home.vue

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11

22
<template>
33

4-
<br>
5-
<div>Home Page</div>
6-
<br>
7-
<button @click.prevent="count--">-</button>
8-
<span>{{ count}}</span>
9-
<button @click.prevent="count++">+</button>
4+
<Table :posts="posts"/>
105

116
</template>
127

@@ -21,9 +16,9 @@ export default {
2116

2217
<script setup>
2318
24-
import {ref} from "vue";
19+
import Table from '@/Components/Table.vue'
2520
26-
const count = ref(0);
21+
defineProps(['posts'])
2722
2823
</script>
2924

‎resources/views/app.blade.php

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
66
<title>Laravel Inertia and Vue practice</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
78
@vite('resources/js/app.js')
89
@vite('resources/css/app.css')
910
@inertiaHead
1011
</head>
1112
<body>
13+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
14+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
1215
@inertia
1316
</body>
1417
</html>

0 commit comments

Comments
 (0)