|
6 | 6 |
|
7 | 7 | A basic authentication starter kit using [Laravel](https://laravel.com/docs/master), [Intertia.js](https://inertiajs.com/), [PrimeVue](https://primevue.org/) components, and [Tailwind CSS](https://tailwindcss.com/).
|
8 | 8 |
|
9 |
| -[Hosted Demo Project](https://laravel-primevue-starter-kit-demo.laravel.cloud/) |
10 |
| - |
11 | 9 | > [!TIP]
|
12 | 10 | > Do you need a separate Vue SPA front-end instead of using Inertia.js? Consider using the [PrimeVue SPA & Laravel API Starter Kit](https://github.com/connorabbas/laravel-api-primevue-starter-kit) instead.
|
13 | 11 |
|
14 |
| -## Roadmap |
15 |
| - |
16 |
| -- [x] Hosted demo project |
17 |
| -- [x] Updated User profile settings pages (similar to official Laravel starter kits) |
18 |
| -- [x] Additional layouts (similar to official Laravel starter kits) |
19 |
| -- [x] Alternative admin branch using [spatie/laravel-permission](https://spatie.be/docs/laravel-permission/v6/introduction) |
20 |
| -- [x] Updated `connorabbas/laravel-api-primevue-starter-kit` project to match UI/functionality |
21 |
| -- [ ] TypeScript & SSR repo using [PrimeVue Volt](https://volt.primevue.org/) (In development) |
22 |
| - |
23 |
| -## Features |
24 |
| - |
25 |
| -- Pre-configured [Auto Import](https://primevue.org/autoimport/) PrimeVue components |
26 |
| -- Extended PrimeVue menu/navigation components utilizing Inertia's `Link` component and [Lucide Icons](https://lucide.dev/) |
27 |
| -- `usePaginatedData()` & `useLazyDataTable()` composables for use with PrimeVue's `Paginator` & `DataTable` components for easy pagination/filtering/sorting |
28 |
| -- Light/dark/system color mode toggle |
29 |
| -- Easily customizable theming |
30 |
| -- Opt-in TypeScript usage |
31 |
| -- [Admin role branch](https://github.com/connorabbas/laravel-primevue-starter-kit/tree/feature/admin-role) using [spatie/laravel-permission](https://spatie.be/docs/laravel-permission/v6/introduction) |
32 |
| - |
33 |
| -## Theme |
34 |
| - |
35 |
| -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. |
36 |
| - |
37 |
| -### Provided Theme Presets |
38 |
| - |
39 |
| -The theme presets are located in the `/resources/js/theme` directory. Each preset offers a distinct visual style: |
40 |
| - |
41 |
| -- **bootstrap** |
42 |
| - Emulates the look and feel of [Bootstrap](https://getbootstrap.com/). |
43 |
| - |
44 |
| -- **breeze** |
45 |
| - Captures the aesthetic of [Laravel Breeze](https://github.com/laravel/breeze). (R.I.P. :pray:) |
46 |
| - |
47 |
| -- **enterprise** |
48 |
| - Provides a clean, no-nonsense corporate design. |
49 |
| - |
50 |
| -- **noir** |
51 |
| - A minimal & clean monochromatic style that serves as the default theme. |
52 |
| - |
53 |
| -- **warm** |
54 |
| - A boxy design with a warmer color pallette. |
55 |
| - |
56 |
| -### Customizing Your Own Theme |
57 |
| - |
58 |
| -Creating your own theme preset is simple. You can: |
59 |
| - |
60 |
| -- Swap the [primary](https://primevue.org/theming/styled/#primary) values with a different set of [colors](https://primevue.org/theming/styled/#colors). |
61 |
| -- Adjust the `colorScheme` [surface](https://primevue.org/theming/styled/#surface) values (e.g., slate, gray, neutral). |
62 |
| -- Change the extended [preset theme](https://primevue.org/theming/styled/#presets). |
63 |
| - |
64 |
| -For detailed guidance on customization, please refer to the [PrimeVue Styled Mode Docs](https://primevue.org/theming/styled/). |
65 |
| - |
66 |
| -### PrimeVue v4 w/ Tailwind CSS |
67 |
| - |
68 |
| -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. |
69 |
| - |
70 |
| ---- |
71 |
| - |
72 |
| -## Local Development with Docker |
73 |
| - |
74 |
| -This starter kit is configured to use Docker Compose for local development with just a few extra steps, powered by images & configuration from [Laravel Sail](https://laravel.com/docs/master/sail). With this setup, you do not need PHP, Composer, PostgreSQL or Node.js installed on your machine to get up and running with this project. |
75 |
| - |
76 |
| -### Setup |
77 |
| - |
78 |
| -1. In a new directory (outside of your Laravel project) create a `docker-compose.yml` file to create a reverse proxy container using [Traefik](https://doc.traefik.io/traefik/getting-started/quick-start/). You can clone/reference this [example implementation](https://github.com/connorabbas/traefik-docker-compose/blob/master/docker-compose.yml). |
79 |
| - |
80 |
| -2. Step into the directory containing the new compose file, and spin up the Traefik container: |
81 |
| - ``` |
82 |
| - docker compose up -d |
83 |
| - ``` |
84 |
| -3. Update Laravel app `.env` |
85 |
| -
|
86 |
| - ```env |
87 |
| - # Use any desired domain ending with .localhost |
88 |
| - # Match domain value in docker-compose.local.yml laravel service labels section |
89 |
| - APP_URL=http://laravel-primevue.localhost |
90 |
| -
|
91 |
| - DB_CONNECTION=pgsql |
92 |
| - DB_HOST=pgsql # name of service |
93 |
| - DB_PORT=5432 |
94 |
| - DB_DATABASE=laravel |
95 |
| - DB_USERNAME=sail |
96 |
| - DB_PASSWORD=password |
97 |
| -
|
98 |
| - WWWGROUP=1000 |
99 |
| - WWWUSER=1000 |
100 |
| -
|
101 |
| - # Update port values as needed when running multiple projects/services |
102 |
| - #APP_PORT=80 not required when using Traefik reverse proxy |
103 |
| - VITE_PORT=5173 |
104 |
| - FORWARD_DB_PORT=5432 |
105 |
| - ``` |
106 |
| -
|
107 |
| -4. Build the Laravel app container using one of the following techniques: |
108 |
| - - Build manually using docker compose CLI |
109 |
| - ```bash |
110 |
| - docker compose -f docker-compose.local.yml up -d |
111 |
| - ``` |
112 |
| - - Use [Laravel Sail](https://laravel.com/docs/master/sail) |
113 |
| - - Build as a [VS Code Dev Container](https://code.visualstudio.com/docs/devcontainers/tutorial) using the `Dev Containers: Reopen in Container` command |
| 12 | +## Resources |
114 | 13 |
|
115 |
| -### Additional configuration |
| 14 | +[🌐 **Demo Application**](https://laravel-primevue-starter-kit-demo.laravel.cloud/) |
116 | 15 |
|
117 |
| -If you wish to add additional services, or swap out PostgreSQL with an alternative database, you can reference the [Laravel Sail stubs](https://github.com/laravel/sail/tree/1.x/stubs) and update the `docker-compose.local.yml` file as needed. |
| 16 | +[📚 **Documentation**](https://connorabbas.github.io/laravel-primevue-starter-kit-docs/) |
0 commit comments