You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+1-184Lines changed: 1 addition & 184 deletions
Original file line number
Diff line number
Diff line change
@@ -6,187 +6,4 @@ A [PrimeVue](https://primevue.org/) SPA starter kit meant for use with a [Larave
6
6
7
7
An alternative to using the [Laravel & PrimeVue (Inertia.js) Starter Kit](https://github.com/connorabbas/laravel-primevue-starter-kit).
8
8
9
-
## Setup
10
-
11
-
1. Clone the repo (or download the zip)
12
-
2. Create a new `.env` file in the root directory, reference the `.env.example` file for the vars/values
13
-
3. Create a [new Laravel application](https://laravel.com/docs/master/installation)
14
-
4. Install [Laravel Breeze](https://laravel.com/docs/11.x/starter-kits#laravel-breeze-installation) using the [API Stack](https://laravel.com/docs/11.x/starter-kits#breeze-and-next) option
15
-
5. Setup necessary `.env` configuration values in the Laravel API project
16
-
```
17
-
# Example implementation
18
-
# Remember, your SPA and API must share the same top-level domain
19
-
APP_URL=http://api.vue-spa.localhost # Match this value with VITE_API_BASE_URL in the Vue app
20
-
FRONTEND_URL=http://vue-spa.localhost # Add app.frontend_url config entry as needed
21
-
SANCTUM_STATEFUL_DOMAINS="vue-spa.localhost"
22
-
SESSION_DOMAIN="vue-spa.localhost"
23
-
```
24
-
6. Setup additional routes and controllers for profile settings in the Laravel API project:
25
-
26
-
```
27
-
php artisan make:controller ProfileController
28
-
```
29
-
30
-
```php
31
-
<?php
32
-
33
-
namespace App\Http\Controllers;
34
-
35
-
use App\Models\User;
36
-
use Illuminate\Http\Request;
37
-
use Illuminate\Http\Response;
38
-
use Illuminate\Support\Facades\Auth;
39
-
use Illuminate\Validation\Rule;
40
-
use Illuminate\View\View;
41
-
42
-
class ProfileController extends Controller
43
-
{
44
-
/**
45
-
* Update the user's profile information.
46
-
*/
47
-
public function update(Request $request): Response
TypeScript is configured and ready for use if desired, but is not required.
156
-
157
-
## Theme
158
-
159
-
This starter kit provides a collection of custom theme presets to choose from, built using the powerful **PrimeVue V4** theming system. It leverages styled mode and custom design token values to create flexible and cohesive UI designs.
160
-
161
-
### Provided Theme Presets
162
-
163
-
The theme presets are located in the `/resources/js/theme` directory. Each preset offers a distinct visual style:
164
-
165
-
- **bootstrap**
166
-
Emulates the look and feel of [Bootstrap](https://getbootstrap.com/).
167
-
168
-
- **breeze**
169
-
Captures the aesthetic of [Laravel Breeze](https://github.com/laravel/breeze). (R.I.P. :pray:)
170
-
171
-
- **enterprise**
172
-
Provides a clean, no-nonsense corporate design.
173
-
174
-
- **noir**
175
-
A minimal & clean monochromatic style that serves as the default theme.
176
-
177
-
- **warm**
178
-
A boxy design with a warmer color pallette.
179
-
180
-
### Customizing Your Own Theme
181
-
182
-
Creating your own theme preset is simple. You can:
183
-
184
-
- Swap the [primary](https://primevue.org/theming/styled/#primary) values with a different set of [colors](https://primevue.org/theming/styled/#colors).
185
-
- Adjust the `colorScheme` [surface](https://primevue.org/theming/styled/#surface) values (e.g., slate, gray, neutral).
186
-
- Change the extended [preset theme](https://primevue.org/theming/styled/#presets).
187
-
188
-
For detailed guidance on customization, please refer to the [PrimeVue Styled Mode Docs](https://primevue.org/theming/styled/).
189
-
190
-
## PrimeVue v4 w/ Tailwind CSS
191
-
192
-
To clarify, Tailwind is **not** used for any component styling in this starter kit; instead, we use PrimeVue's styled mode with a custom theme preset implementation for component styling. Tailwind is applied solely for layout purposes **around** PrimeVue components and for minimal styling when needed.
0 commit comments