Skip to content

Commit e86a719

Browse files
authoredJan 25, 2025··
Merge pull request #27 from connorabbas/develop
Tailwind v4, Vite v6, Fixes
2 parents 736261a + 72ab31b commit e86a719

23 files changed

+944
-1468
lines changed
 

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
# Vue SPA w/ PrimeVue & Laravel Breeze API Starter Kit
2+
3+
![Static Badge](<https://img.shields.io/badge/Vue.js%20-%20v3.5%20-%20rgb(66%20184%20131)>) ![Static Badge](https://img.shields.io/badge/PrimeVue%20-%20v4%20-%20rgb(16%20185%20129)) ![Static Badge](https://img.shields.io/badge/Tailwind%20CSS%20-%20v4%20-%20%230284c7)
4+
25
A [PrimeVue](https://primevue.org/) SPA starter kit meant for use with a [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze) API stack backend.
36

47
An alternative to using the [Laravel, Inertia.js, & PrimeVue Starter Kit](https://github.com/connorabbas/laravel-inertia-primevue).

‎package-lock.json

+862-1,334
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-6
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,26 @@
1313
"@eslint/js": "^9.18.0",
1414
"@primevue/auto-import-resolver": "^4.2.5",
1515
"@primevue/themes": "^4.2.5",
16+
"@tailwindcss/vite": "^4.0.0",
1617
"@typescript-eslint/eslint-plugin": "^8.19.1",
1718
"@typescript-eslint/parser": "^8.19.1",
1819
"@vitejs/plugin-vue": "^5.0.5",
1920
"@vueuse/core": "^12.2.0",
20-
"autoprefixer": "^10.4.19",
2121
"axios": "^1.7.2",
2222
"eslint": "^9.18.0",
2323
"eslint-config-prettier": "^9.1.0",
2424
"eslint-plugin-vue": "^9.32.0",
2525
"nprogress": "^0.2.0",
2626
"pinia": "^2.1.7",
27-
"postcss": "^8.4.39",
28-
"postcss-import": "^16.1.0",
2927
"primeicons": "^7.0.0",
3028
"primevue": "^4.2.5",
31-
"tailwindcss": "^3.4.4",
29+
"tailwindcss": "^4.0.0",
3230
"tailwindcss-primeui": "^0.3.4",
3331
"typescript": "^5.7.3",
3432
"typescript-eslint": "^8.19.1",
3533
"unplugin-vue-components": "^0.27.4",
36-
"vite": "^5.3.1",
34+
"vite": "^6.0",
3735
"vue": "^3.5.0",
3836
"vue-router": "^4.4.0"
3937
}
40-
}
38+
}

‎postcss.config.js

-6
This file was deleted.

‎src/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './assets/css/app.css';
2+
import './assets/css/tailwind.css';
23
import 'nprogress/nprogress.css';
34
import 'primeicons/primeicons.css';
45

‎src/assets/css/app.css

+10-14
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
1-
@import "custom.css";
2-
@import "custom-preflight.css" layer(tailwind-base);
3-
4-
@layer tailwind-base, primevue, tailwind-utilities;
1+
html {
2+
/* font size will determine the component/utility scaling */
3+
font-size: 14px;
4+
}
55

6-
@layer tailwind-utilities {
7-
@tailwind components;
8-
@tailwind utilities;
6+
body {
7+
margin: 0 !important;
8+
padding: 0 !important;
99
}
1010

11-
@layer components {
12-
.dynamic-bg {
13-
@apply bg-surface-0 dark:bg-surface-900;
14-
}
15-
.dynamic-border {
16-
@apply border-surface-200 dark:border-surface-800;
17-
}
11+
#nprogress .bar {
12+
background: var(--p-primary-500) !important;
13+
z-index: 9999999 !important;
1814
}

‎src/assets/css/custom.css

-14
This file was deleted.

‎src/assets/css/tailwind.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@layer tailwind-theme, tailwind-base, primevue, tailwind-utilities;
2+
3+
@import 'tailwindcss/theme.css' layer(tailwind-theme);
4+
@import './custom-preflight.css' layer(tailwind-base);
5+
/* @import "tailwindcss/preflight.css" layer(tailwind-base); */
6+
@import 'tailwindcss/utilities.css' layer(tailwind-utilities);
7+
8+
@plugin 'tailwindcss-primeui';
9+
10+
@custom-variant dark (&:where(.dark, .dark *));
11+
12+
@theme {
13+
--font-sans: Inter, sans-serif;
14+
}
15+
16+
@utility dynamic-bg {
17+
@apply bg-surface-0 dark:bg-surface-900;
18+
}
19+
20+
@utility dynamic-border {
21+
@apply border-surface-200 dark:border-surface-800;
22+
}

‎src/components/Container.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ defineProps({
1414
</script>
1515

1616
<template>
17-
<div :class="[{ 'max-w-screen-xl mx-auto': !fluid }, spacedMobile ? 'px-4' : 'px-0', 'md:px-8']">
17+
<div :class="[{ 'max-w-(--breakpoint-2xl) mx-auto': !fluid }, spacedMobile ? 'px-4' : 'px-0', 'md:px-8']">
1818
<slot />
1919
</div>
2020
</template>

‎src/components/PrimeVue/LinksMenuBar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ defineExpose({
2828
custom
2929
>
3030
<!-- add if using 'nora' preset theme -->
31-
<!-- hover:text-primary-100 hover:dark:text-primary-950 -->
31+
<!-- hover:text-primary-100 dark:hover:text-primary-950 -->
3232
<a
3333
:href="href"
3434
v-bind="props.action"

‎src/components/PrimeVue/LinksPanelMenu.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
custom
2424
>
2525
<!-- add if using 'nora' preset theme -->
26-
<!-- hover:text-primary-100 hover:dark:text-primary-950 -->
26+
<!-- hover:text-primary-100 dark:hover:text-primary-950 -->
2727
<a
2828
class="flex items-center cursor-pointer no-underline px-4 py-2"
2929
:class="item.active ? 'font-bold text-primary' : 'text-surface-700 dark:text-surface-0'"

‎src/layouts/AuthenticatedLayout.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ watchEffect(() => {
7878
<div class="min-h-screen">
7979
<nav
8080
class="dynamic-bg border-b"
81-
:class="$slots.header ? 'dynamic-border' : 'shadow'"
81+
:class="$slots.header ? 'dynamic-border' : 'shadow-sm'"
8282
>
8383
<!-- Primary Navigation Menu -->
8484
<Container>
@@ -131,10 +131,10 @@ watchEffect(() => {
131131
appendTo="#user-menu-append"
132132
:model="userMenuItems"
133133
popup
134-
class="shadow"
134+
class="shadow-sm"
135135
:pt="{
136136
root: {
137-
class: '!left-auto !top-0 right-0',
137+
class: 'left-auto! top-0! right-0',
138138
},
139139
}"
140140
/>
@@ -216,7 +216,7 @@ watchEffect(() => {
216216
<!-- Page Heading -->
217217
<header
218218
v-if="$slots.header"
219-
class="dynamic-bg shadow"
219+
class="dynamic-bg shadow-sm"
220220
>
221221
<Container>
222222
<div class="py-6">

‎src/views/auth/ForgotPassword.vue

+3-7
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ onMounted(() => {
4747
<Message
4848
severity="success"
4949
:closable="false"
50-
class="shadow"
50+
class="shadow-sm"
5151
>
5252
{{ flashMessages.success }}
5353
</Message>
@@ -62,12 +62,8 @@ onMounted(() => {
6262
class="space-y-6"
6363
@submit.prevent="submit"
6464
>
65-
<div class="space-y-2">
66-
<label
67-
for="email"
68-
class="block mb-2"
69-
>Email</label
70-
>
65+
<div class="flex flex-col gap-2">
66+
<label for="email">Email</label>
7167
<InputText
7268
id="email"
7369
ref="email-input"

‎src/views/auth/Login.vue

+5-13
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ onMounted(() => {
6060
<Message
6161
severity="success"
6262
:closable="false"
63-
class="shadow"
63+
class="shadow-sm"
6464
>
6565
{{ flashMessages.success }}
6666
</Message>
@@ -69,12 +69,8 @@ onMounted(() => {
6969
class="space-y-6"
7070
@submit.prevent="submit"
7171
>
72-
<div class="space-y-2">
73-
<label
74-
for="email"
75-
class="block mb-2"
76-
>Email</label
77-
>
72+
<div class="flex flex-col gap-2">
73+
<label for="email">Email</label>
7874
<InputText
7975
id="email"
8076
ref="email-input"
@@ -88,12 +84,8 @@ onMounted(() => {
8884
<InputErrors :errors="validationErrors.email" />
8985
</div>
9086
91-
<div class="space-y-2">
92-
<label
93-
for="password"
94-
class="block mb-2"
95-
>Password</label
96-
>
87+
<div class="flex flex-col gap-2">
88+
<label for="password">Password</label>
9789
<InputText
9890
id="password"
9991
v-model="formData.password"

‎src/views/auth/Register.vue

+8-24
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,8 @@ onMounted(() => {
4747
class="space-y-6"
4848
@submit.prevent="submit"
4949
>
50-
<div class="space-y-2">
51-
<label
52-
for="name"
53-
class="block mb-2"
54-
>Name</label
55-
>
50+
<div class="flex flex-col gap-2">
51+
<label for="name">Name</label>
5652
<InputText
5753
id="name"
5854
ref="name-input"
@@ -66,12 +62,8 @@ onMounted(() => {
6662
<InputErrors :errors="validationErrors?.name" />
6763
</div>
6864

69-
<div class="space-y-2">
70-
<label
71-
for="email"
72-
class="block mb-2"
73-
>Email</label
74-
>
65+
<div class="flex flex-col gap-2">
66+
<label for="email">Email</label>
7567
<InputText
7668
id="email"
7769
v-model="formData.email"
@@ -84,12 +76,8 @@ onMounted(() => {
8476
<InputErrors :errors="validationErrors?.email" />
8577
</div>
8678

87-
<div class="space-y-2">
88-
<label
89-
for="password"
90-
class="block mb-2"
91-
>Password</label
92-
>
79+
<div class="flex flex-col gap-2">
80+
<label for="password">Password</label>
9381
<InputText
9482
id="password"
9583
v-model="formData.password"
@@ -102,12 +90,8 @@ onMounted(() => {
10290
<InputErrors :errors="validationErrors?.password" />
10391
</div>
10492

105-
<div class="space-y-2">
106-
<label
107-
for="password_confirmation"
108-
class="block mb-2"
109-
>Confirm Password</label
110-
>
93+
<div class="flex flex-col gap-2">
94+
<label for="password_confirmation">Confirm Password</label>
11195
<InputText
11296
id="password_confirmation"
11397
v-model="formData.password_confirmation"

‎src/views/auth/ResetPassword.vue

+6-18
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,8 @@ onMounted(() => {
5959
class="space-y-6"
6060
@submit.prevent="submit"
6161
>
62-
<div class="space-y-2">
63-
<label
64-
for="email"
65-
class="block mb-2"
66-
>Email</label
67-
>
62+
<div class="flex flex-col gap-2">
63+
<label for="email">Email</label>
6864
<InputText
6965
id="email"
7066
ref="email-input"
@@ -78,12 +74,8 @@ onMounted(() => {
7874
<InputErrors :errors="validationErrors?.email" />
7975
</div>
8076
81-
<div class="space-y-2">
82-
<label
83-
for="password"
84-
class="block mb-2"
85-
>New Password</label
86-
>
77+
<div class="flex flex-col gap-2">
78+
<label for="password">New Password</label>
8779
<InputText
8880
id="password"
8981
v-model="formData.password"
@@ -96,12 +88,8 @@ onMounted(() => {
9688
<InputErrors :errors="validationErrors?.password" />
9789
</div>
9890
99-
<div class="space-y-2">
100-
<label
101-
for="password_confirmation"
102-
class="block mb-2"
103-
>Confirm New Password</label
104-
>
91+
<div class="flex flex-col gap-2">
92+
<label for="password_confirmation">Confirm New Password</label>
10593
<InputText
10694
id="password_confirmation"
10795
v-model="formData.password_confirmation"

‎src/views/auth/VerifyEmail.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const submit = () => {
2323
<Message
2424
severity="success"
2525
:closable="false"
26-
class="shadow"
26+
class="shadow-sm"
2727
>
2828
A new verification link has been sent to the email address you provided during registration.
2929
</Message>

‎src/views/profile/partials/DeleteUserForm.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,11 @@ function focusPasswordInput() {
4343
<Dialog
4444
v-model:visible="modalOpen"
4545
:draggable="false"
46+
:dismissableMask="true"
4647
position="center"
47-
modal
4848
header="Are you sure you want to delete your account?"
4949
:style="{ width: '40rem' }"
50+
modal
5051
@show="focusPasswordInput"
5152
>
5253
<div class="mb-6">
@@ -56,7 +57,7 @@ function focusPasswordInput() {
5657
</p>
5758
</div>
5859

59-
<div class="space-y-2">
60+
<div class="flex flex-col gap-2">
6061
<InputText
6162
id="password"
6263
ref="password-input"

0 commit comments

Comments
 (0)
Please sign in to comment.