Skip to content

Commit 2478301

Browse files
perisicnikola37perisicnikola37
committed
Create Breadcrumb and Button components and update README.md file
1 parent 015e7e3 commit 2478301

File tree

4 files changed

+144
-15
lines changed

4 files changed

+144
-15
lines changed

‎README.md

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,31 @@ The application is designed to provide a smooth and interactive user experience.
77

88
To get started with the installation, follow these steps:
99

10-
1. Clone the repository:
10+
1. Clone the repository
1111
``git clone https://github.com/perisicnikola37/laravel-inertia-vue-spa.git``
1212

13-
2. Install the dependencies:
14-
``cd laravel-inertia-vue-project
15-
composer install
16-
npm install``
13+
2. Enter project directory
14+
``cd laravel-inertia-vue-project``
1715

18-
3. Set up the environment variables:
19-
``cp .env.example .env
20-
php artisan key:generate``
16+
3. Install/update composer
17+
``composer install | composer update``
2118

22-
4. Configure the database:
19+
4. Install npm
20+
``npm install``
21+
22+
3. Set up the environment variables
23+
``cp .env.example .env``
24+
25+
4. Generate an application key
26+
``php artisan key:generate``
27+
28+
5. Configure the database
2329
``php artisan migrate``
2430

25-
5. Start the development server:
31+
6. Start the development server
2632
``npm run dev``
2733

28-
6. Visit the application at [http://localhost:8000](http://localhost:8000)
34+
7. Visit the application at [http://localhost:8000](http://localhost:8000)
2935

3036
## Features
3137

‎resources/js/Components/Breadcrumb.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
3+
<inertia-link class="hover:text-blue-500 duration-200" :href="`/${href}`">{{ title }}</inertia-link>
4+
/
5+
<inertia-link :href="`/${href}/${property.id}/edit`" class="text-blue-500">
6+
{{ property.name }}
7+
</inertia-link>
8+
</h2>
9+
</template>
10+
11+
<script>
12+
13+
export default {
14+
props: {
15+
property: Object,
16+
title: String,
17+
href: String
18+
}
19+
}
20+
</script>

‎resources/js/Components/Button.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<button :class="{ 'opacity-50': form.processing }" :disabled="form.processing"
3+
class="transition bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
4+
type="submit">
5+
Save
6+
</button>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
form: Object
13+
}
14+
}
15+
</script>

‎resources/js/Pages/Users/Create.vue

Lines changed: 92 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,99 @@
11
<template>
2-
<div>
3-
create component
4-
</div>
2+
<AppLayout title="Create user">
3+
4+
<template #header>
5+
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
6+
Create user
7+
</h2>
8+
</template>
9+
10+
<div class="py-12">
11+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
12+
<div class="m-auto w-full max-w-xs">
13+
14+
<form @submit.prevent="submit" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 m-auto">
15+
16+
<div class="mb-4">
17+
<label class="block text-gray-700 text-sm font-bold mb-2" for="name">
18+
Name <span class="text-red-500">*</span>
19+
</label>
20+
<input v-model="form.name"
21+
class="mb-2 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
22+
id="name" type="text">
23+
<!-- <span class="text-red-500">{{ errors.name }}</span> -->
24+
</div>
25+
26+
<div class="mb-4">
27+
<label class="block text-gray-700 text-sm font-bold mb-2" for="email">
28+
E-mail <span class="text-red-500">*</span>
29+
</label>
30+
<input v-model="form.email"
31+
class="mb-2 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
32+
id="email" type="email">
33+
<!-- <span class="text-red-500">{{ errors.email }}</span> -->
34+
</div>
35+
36+
<div class="mb-4">
37+
<div class="mb-3 xl:w-96">
38+
<select disabled v-model="form.role_id"
39+
class="form-select appearance-none block text-base font-normal text-gray-700 bg-white bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
40+
aria-label="Default select example">
41+
<option value="2">Subscriber</option>
42+
</select>
43+
</div>
44+
</div>
45+
46+
<div class="mb-4">
47+
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
48+
Password <span class="text-red-500">*</span>
49+
</label>
50+
<input v-model="form.password"
51+
class="mb- 2shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
52+
id="password" type="password">
53+
<!-- <span class="text-red-500">{{ errors.password }}</span> -->
54+
</div>
55+
56+
<div class="flex items-center justify-between">
57+
<Button :form="form"></Button>
58+
</div>
59+
</form>
60+
61+
<p class="text-center text-gray-500 text-xs">
62+
&copy;2023 - <a class="text-blue-500" href="https://github.com/perisicnikola37"
63+
target="_blank">@perisicnikola37</a>
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
</AppLayout>
569
</template>
670

71+
772
<script>
8-
export default {
73+
import AppLayout from '@/Layouts/AppLayout.vue';
74+
import Button from '@/Components/Button.vue';
975
76+
export default {
77+
components: {
78+
AppLayout,
79+
Button
80+
},
81+
data() {
82+
return {
83+
form: this.$inertia.form({
84+
name: '',
85+
email: '',
86+
role_id: 1,
87+
password: '',
88+
})
89+
}
90+
},
91+
methods: {
92+
submit() {
93+
this.form.post(this.route('users.store'), {
94+
_token: this.$page.props.csrf_token,
95+
});
96+
}
97+
}
1098
}
1199
</script>

0 commit comments

Comments
 (0)