upgrade to nuxt ui v3.0.0

Author: k2so-dev

nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-01-23',
+  compatibilityDate: '2025-03-13',
   rootDir: 'nuxt/',
 
   future: {

nuxt/app/assets/css/main.css

@@ -1,37 +1,15 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
 @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-neutral-800 dark:bg-gray-900;
-  }
-
-  html.dark {
-    @apply text-neutral-50 bg-gray-900;
-  }
-
   button, a, [role="button"] {
     @apply transition-colors;
   }

nuxt/app/components/app/Header.vue

@@ -189,6 +189,7 @@ const isSideOpen = ref(false);
           <ULink class="cursor-pointer">
             <UAvatar
               icon="i-heroicons-user"
+              class="rounded-lg"
               size="md"
               :src="$storage(auth.user.avatar)"
               :alt="auth.user.name"

nuxt/app/components/auth/Login.vue

@@ -114,8 +114,10 @@ onBeforeUnmount(() => window.removeEventListener("message", handleMessage));
         <UInput v-model="state.password" type="password" class="w-full" placeholder="••••••••" />
       </UFormField>
 
-      <UTooltip :delay-duration="0" text="for 1 month" :content="{ side: 'right' }">
-        <UCheckbox v-model="state.remember" label="Remember me" class="inline-flex" />
+      <UTooltip :delay-duration="0" text="for 1 month" :content="{ side: 'right', align: 'center' }">
+        <div class="inline-flex">
+          <UCheckbox v-model="state.remember" label="Remember me" class="inline-flex" />
+        </div>
       </UTooltip>
 
       <div class="flex items-center justify-end space-x-4">

nuxt/app/components/input/UploadImage.vue

@@ -65,16 +65,17 @@ const onSelect = async (e: any) => {
     <div class="relative flex">
       <UAvatar
         :src="$storage(value)"
-        width="80"
-        height="80"
+        icon="i-heroicons-user"
         img-class="object-cover"
-        class="w-20 h-20"
+        class="w-20 h-20 rounded-xl"
+        size="3xl"
       />
 
       <UTooltip
         text="Upload"
         class="absolute top-0 end-0 -m-2"
-        :content="{ side: 'right' }"
+        :delay-duration="0"
+        :content="{ side: 'right', align: 'center' }"
       >
         <UButton
           type="button"
@@ -90,7 +91,8 @@ const onSelect = async (e: any) => {
       <UTooltip
         text="Delete"
         class="absolute bottom-0 end-0 -m-2"
-        :content="{ side: 'right' }"
+        :delay-duration="0"
+        :content="{ side: 'right', align: 'center' }"
       >
         <UButton
           type="button"

nuxt/app/components/modal/Demo.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { ModalDemo } from '#components'
-
-const modal = useModal();
 const router = useRouter();
 const auth = useAuthStore();
 
-function openDemoModal() {
-  modal.open(ModalDemo)
-}
+const open = ref(false);
 
 useSeoMeta({
   title: 'Home',
@@ -21,7 +16,15 @@ useSeoMeta({
         <div class="font-bold text-lg leading-tight tracking-tighter mb-4">Demo</div>
 
         <div class="flex gap-3">
-          <UButton label="Modal" @click="openDemoModal" color="neutral" variant="soft" />
+          <UModal v-model:open="open"  title="Welcome to LaravelNuxt" >
+            <UButton label="Modal" color="neutral" variant="soft" />
+            <template #body>
+              <USkeleton class="w-full h-60" />
+            </template>
+            <template #footer>
+              <UButton @click="open = false" label="Close" color="neutral" variant="soft" />
+            </template>
+          </UModal>
           <UButton label="404 page" color="neutral" @click="router.push('/404')" variant="soft" />
         </div>
       </UCard>

nuxt/app/pages/index.vue

@@ -13,14 +13,14 @@
     "api": "php artisan octane:start --watch"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.7.0",
+    "@nuxt/devtools": "^2.3.0",
     "@nuxt/image": "^1.9.0",
-    "@nuxt/ui": "^3.0.0-alpha.11",
-    "@pinia/nuxt": "^0.9.0",
+    "@nuxt/ui": "^3.0.0",
+    "@pinia/nuxt": "^0.10.1",
     "chokidar": "^4.0.3",
     "dayjs-nuxt": "^2.1.11",
-    "nuxt": "^3.15.3",
-    "nuxt-security": "^2.1.5",
+    "nuxt": "^3.16.0",
+    "nuxt-security": "^2.2.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   }