Nuxt UI 3 / Tailwind 4

.editorconfig

@@ -11,7 +11,7 @@ trim_trailing_whitespace = true
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{yml,yaml}]
+[*.{yml,yaml,ts,vue}]
 indent_size = 2
 
 [docker-compose.yml]

README.md

@@ -10,6 +10,9 @@
 
 The goal of the project is to create a template for development on Laravel and Nuxt with maximum API performance, ready-made authorization methods, image uploading with optimization and ready-made user roles.
 
+> [!WARNING]  
+> You are on the dev branch, Nuxt UI version 3 which is used here is in alpha testing.
+
 <!-- TOC -->
 
 - [Features](#features)
@@ -19,7 +22,7 @@ The goal of the project is to create a template for development on Laravel and N
     - [Docker Deploy (Laravel Sail)](#docker-deploy-laravel-sail)
 - [Upgrade](#upgrade)
 - [Usage](#usage)
-    - [Nuxt $fetch](#nuxt-fetch)
+    - [Fetch wrapper](#fetch-wrapper)
     - [Authentication](#authentication)
     - [Nuxt Middleware](#nuxt-middleware)
     - [Laravel Middleware](#laravel-middleware)
@@ -40,19 +43,18 @@ The goal of the project is to create a template for development on Laravel and N
  - [**Laravel Socialite**](https://laravel.com/docs/11.x/socialite) OAuth providers
  - [**Laravel Sail**](https://laravel.com/docs/11.x/sail) Light-weight command-line interface for interacting with Laravel's default Docker development environment.
  - [**Spatie Laravel Permissions**](https://spatie.be/docs/laravel-permission/v6/introduction) This package allows you to manage user permissions and roles in a database.
- - UI library [**Nuxt UI**](https://ui.nuxt.com/) based on [**TailwindCSS**](https://tailwindui.com/) and [**HeadlessUI**](https://headlessui.com/).
+ - UI library [**Nuxt UI 3**](https://ui3.nuxt.dev/) based on [**TailwindCSS 4**](https://tailwindcss.com/) and [**Reka UI**](https://reka-ui.com/).
  - [**Pinia**](https://pinia.vuejs.org/ssr/nuxt.html) The intuitive store for Vue.js
  - Integrated pages: login, registration, password recovery, email confirmation, account information update, password change.
  - Temporary uploads with cropping and optimization of images.
  - Device management
- - [**ofetch**](https://github.com/unjs/ofetch) preset for working with Laravel API, which makes it possible
-use $**fetch** without having to resort to custom $**fetch** wrappers.
+ - Enhanced Fetch Wrappers : Utilizes `$http` and `useHttp`, which extend the capabilities of **Nuxt's** standard `$fetch` and `useFetch`.
 
 ## Requirements
 
  - PHP 8.2+ / Node 20+
  - **Redis** is required for the [**Throttling with Redis**](https://laravel.com/docs/11.x/routing#throttling-with-redis) feature
- - [**Laravel Octane**](https://laravel.com/docs/11.x/octane) supports 2 operating modes: Swoole (php extension) or Roadrunner
+ - [**Laravel Octane**](https://laravel.com/docs/11.x/octane) supports 3 operating modes: Swoole (php extension), Roadrunner and FrankenPHP
 
 ## Installation
 ### Standalone
@@ -106,30 +108,38 @@ sail composer update
 
 ## Usage
 
-### Nuxt $fetch
+### Fetch wrapper
+
+To integrate with the API, enhanced `$http` and `useHttp` wrappers are used, expanding the functionality of Nuxt's standard `$fetch` and `useFetch`. The `$http` wrapper includes custom interceptors to replace the originals:
+- `onFetch` instead of `onRequest`
+- `onFetchError` instead of `onRequestError`
+- `onFetchResponse` instead of `onResponse`
+- `onFetchResponseError` instead of `onResponseError`
 
-To work with the api, the default path is **"/api/v1"**. All requests from **Nuxt** to the **Laravel API** can be executed without wrappers, as described in the **Nuxt.js** documentation. For example, the code for authorizing a user by email and password:
+Additionally, `$http` predefines a base url, authorization headers, and proxy IP for convenient API work in SSR mode.
+For example, the code for authorizing a user by email and password:
 ```vue
 <script lang="ts" setup>
+const nuxtApp = useNuxtApp();
 const router = useRouter();
 const auth = useAuthStore();
-const form = ref();
+const form = templateRef("form");
 const state = reactive({
   email: "",
   password: "",
   remember: false,
 });
 
-const { refresh: onSubmit, status } = useFetch("login", {
+const { refresh: onSubmit, status } = useHttp("login", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      auth.token = response._data.token;
+      nuxtApp.$token.value = response._data.token;
 
       await auth.fetchUser();
       await router.push("/");
@@ -141,7 +151,7 @@ const loading = computed(() => status.value === "pending");
 </script>
 <template>
   <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
-    <UFormGroup label="Email" name="email" required>
+    <UFormField label="Email" name="email" required>
       <UInput
         v-model="state.email"
         placeholder="[email protected]"
@@ -150,14 +160,14 @@ const loading = computed(() => status.value === "pending");
         type="email"
         autofocus
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup label="Password" name="password" required>
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
+    <UFormField label="Password" name="password" required>
+      <UInput v-model="state.password" class="w-full" type="password" />
+    </UFormField>
 
-    <UTooltip text="for 1 month" :popper="{ placement: 'right' }">
-      <UCheckbox v-model="state.remember" label="Remember me" />
+    <UTooltip :delay-duration="0" text="for 1 month" :content="{ side: 'right' }">
+      <UCheckbox v-model="state.remember" class="w-full" label="Remember me" />
     </UTooltip>
 
     <div class="flex items-center justify-end space-x-4">
@@ -174,10 +184,10 @@ const loading = computed(() => status.value === "pending");
 
 Data returned by **useAuthStore**:
 * `logged`: Boolean, whether the user is authorized
-* `token`: Cookie, sanctum token
 * `user`: User object, user stored in pinia store
 * `logout`: Function, remove local data and call API to remove token
 * `fetchUser`: Function, fetch user data
+* `hasRole`: Function, checks the role
 
 ### Nuxt Middleware
 
@@ -204,8 +214,8 @@ https://github.com/k2so-dev/laravel-nuxt/assets/15279423/9b134491-1444-4323-a7a3
 
 ## Links
 * [Nuxt 3](https://nuxt.com/)
-* [Nuxt UI](https://ui.nuxt.com/)
-* [Tailwind CSS](https://tailwindcss.com/)
+* [Nuxt UI 3](https://ui3.nuxt.dev/)
+* [Tailwind CSS 4](https://tailwindcss.com/)
 * [Laravel 11x](https://laravel.com/docs/11.x)
 
 ## License

bootstrap/app.php

@@ -20,7 +20,7 @@
         $middleware
             ->throttleApi(redis: true)
             ->trustProxies(at: [
-                '127.0.0.1',
+                '127.0.0.0/8',
                 '10.0.0.0/8',
                 '172.16.0.0/12',
                 '192.168.0.0/16',
@@ -65,7 +65,7 @@
                 'message' => $e->getMessage(),
                 'errors' => array_map(static function (string $field, array $errors): array {
                     return [
-                        'path' => $field,
+                        'name' => $field,
                         'message' => implode(' ', $errors),
                     ];
                 }, array_keys($e->errors()), $e->errors()),

nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2024-12-29',
+  compatibilityDate: '2025-01-23',
   rootDir: 'nuxt/',
 
   future: {
@@ -42,9 +42,7 @@ export default defineNuxtConfig({
     'auth/verify': { ssr: false }
   },
 
-  tailwindcss: {
-    cssPath: '@/assets/css/main.css',
-  },
+  css: ['~/assets/css/main.css'],
 
   /**
    * @see https://v3.nuxtjs.org/api/configuration/nuxt.config#modules
@@ -100,7 +98,8 @@ export default defineNuxtConfig({
         google: {
           name: "Google",
           icon: "",
-          color: "gray",
+          color: "neutral",
+          variant: "soft",
         },
       },
     },

nuxt/app/app.config.ts

@@ -1,14 +1,23 @@
 export default defineAppConfig({
   ui: {
-    primary: 'emerald',
-    strategy: 'override',
-    gray: 'neutral',
     container: {
-      constrained: 'max-w-7xl w-full'
+      base: 'max-w-7xl w-full'
     },
-    avatar: {
-      default: {
-        icon: 'i-heroicons-user',
+    colors: {
+      primary: 'emerald',
+      neutral: 'zinc'
+    },
+    theme: {
+      colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
+    },
+    button: {
+      slots: {
+        base: 'cursor-pointer',
+      }
+    },
+    dropdownMenu: {
+      slots: {
+        item: 'cursor-pointer',
       }
     }
   }

nuxt/app/app.vue

@@ -1,24 +1,21 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const auth = useAuthStore();
 
-<template>
-  <AppHeader />
-
-  <UContainer as="main" class="flex-grow py-4 sm:py-7 flex flex-col">
-    <NuxtPage />
-  </UContainer>
+if (auth.logged) {
+  await auth.fetchUser();
+}
+</script>
 
-  <AppFooter />
+<template>
+  <UApp>
+    <AppHeader />
 
-  <NuxtLoadingIndicator class="!opacity-100" :throttle="0" />
+    <UContainer as="main" class="flex-grow py-4 sm:py-7 flex flex-col">
+      <NuxtPage />
+    </UContainer>
 
-  <UModals />
+    <AppFooter />
 
-  <UNotifications>
-    <template #title="{ title }">
-      <span v-html="title" />
-    </template>
-    <template #description="{ description }">
-      <span v-html="description" />
-    </template>
-  </UNotifications>
+    <NuxtLoadingIndicator class="!opacity-100" :throttle="0" />
+  </UApp>
 </template>

nuxt/app/assets/css/main.css

@@ -1,18 +1,35 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+:root {
+    --ui-radius: var(--radius-sm);
+}
+
+@theme {
+    --color-primary-50: var(--ui-color-primary-50);
+    --color-primary-100: var(--ui-color-primary-100);
+    --color-primary-200: var(--ui-color-primary-200);
+    --color-primary-300: var(--ui-color-primary-300);
+    --color-primary-400: var(--ui-color-primary-400);
+    --color-primary-500: var(--ui-color-primary-500);
+    --color-primary-600: var(--ui-color-primary-600);
+    --color-primary-700: var(--ui-color-primary-700);
+    --color-primary-800: var(--ui-color-primary-800);
+    --color-primary-900: var(--ui-color-primary-900);
+    --color-primary-950: var(--ui-color-primary-950);
+}
 
 @layer base {
   #__nuxt {
     @apply min-h-screen flex flex-col;
   }
 
   html {
-    @apply text-gray-800 dark:bg-gray-900;
+    @apply text-neutral-800 dark:bg-gray-900;
   }
 
   html.dark {
-    @apply text-gray-50 bg-gray-900;
+    @apply text-neutral-50 bg-gray-900;
   }
 
   button, a, [role="button"] {