feat: update Nuxt UI to v3

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+.wrangler

README.md

@@ -19,7 +19,7 @@ https://github.com/Flosciante/nuxt-image-gallery/assets/904724/6e2bafdf-f5a0-42c
 ## Stack
 
 - [NuxtHub](https://hub.nuxt.com) - A Nuxt toolkit to build fullstack applications on the edge
-- [NuxtUI](https://ui.nuxt.com/getting-started) - A UI Library for Modern Web Apps
+- [NuxtUI v3](https://ui.nuxt.com/getting-started) - A UI library for modern web applications using Radix Vue and Tailwind CSS v4 under the hood
 - [Nuxt Fonts](https://github.com/nuxt/fonts) - Plug-and-play custom web font optimization and configuration for Nuxt apps.
 - [VueUse](https://github.com/antfu/vueuse) - Collection of useful composition APIs
 - [ESLint](https://eslint.org/) with [@nuxt/eslint-config](https://github.com/nuxt/eslint), single quotes, no semi

app/app.config.ts

@@ -1,40 +1,35 @@
 export default defineAppConfig({
   ui: {
-    primary: 'white',
-    gray: 'zinc',
+    colors: {
+      gray: 'zinc'
+    },
     button: {
-      color: {
-        gray: {
-          ghost: 'text-gray-400 bg-gray-900 ring-1 ring-gray-400 rounded-full hover:ring-gray-200 hover:text-gray-200 hover:bg-gray-900 transition-hover duration-200'
-        },
-        green: {
-          ghost: 'text-green-400 bg-gray-900 ring-1 ring-green-400 rounded-full hover:ring-green-300 hover:text-green-300 hover:bg-gray-900 transition-hover duration-200'
-        },
-        red: {
-          ghost: 'text-red-400 bg-gray-900 ring-1 ring-red-400 rounded-full hover:ring-red-300 hover:text-red-300 hover:bg-gray-900 transition-hover duration-200'
-        }
-      }
+      compoundVariants: [{
+        color: 'gray',
+        variant: 'ghost',
+        class: 'text-gray-400 bg-gray-900 ring-1 ring-gray-400 rounded-full hover:ring-gray-200 hover:text-gray-200 hover:bg-gray-900 transition-hover duration-200'
+      },
+      {
+        color: 'green',
+        variant: 'ghost',
+        class: 'text-green-400 bg-gray-900 ring-1 ring-green-400 rounded-full hover:ring-green-300 hover:text-green-300 hover:bg-gray-900 transition-hover duration-200'
+      },
+      {
+        color: 'red',
+        variant: 'ghost',
+        class: 'text-red-400 bg-gray-900 ring-1 ring-red-400 rounded-full hover:ring-red-300 hover:text-red-300 hover:bg-gray-900 transition-hover duration-200'
+      }]
     },
     tooltip: {
-      background: 'bg-gray-900',
-      color: 'text-gray-200',
-      ring: 'ring-1 ring-gray-800'
-    },
-    slideover: {
-      background: '',
-      base: 'flex-1 flex flex-col w-full focus:outline-none',
-      overlay: {
-        background: 'bg-gray-200/75 dark:bg-gray-800/50 backdrop-blur-md'
+      slots: {
+        content: 'bg-gray-900 ring-1 ring-gray-800',
+        text: 'text-gray-200'
       }
     },
-    range: {
-      thumb: {
-        color: 'dark:text-gray-100'
-      },
-      progress: {
-        color: 'dark:text-gray-100',
-        rounded: 'rounded-s-lg',
-        background: 'bg-gray-500 dark:bg-gray-100'
+    slideover: {
+      slots: {
+        overlay: 'bg-gray-200/75 dark:bg-gray-800/50 backdrop-blur-md',
+        content: 'bg-none flex-1 flex flex-col w-full focus:outline-none'
       }
     }
   }

app/app.vue

@@ -27,12 +27,20 @@ await getImages()
 </script>
 
 <template>
-  <div
+  <UApp
     class="bg-black min-h-[100dvh] overflow-x-auto relative"
     :class="{ 'flex flex-col md:block': $router.currentRoute.value.fullPath !== '/' }"
   >
-    <UNotifications />
     <NuxtPage />
     <ImageThumbnailList :class="$router.currentRoute.value.fullPath !== '/' ? 'opacity-100 z-[9999]' : 'opacity-0 z-[-1]'" />
-  </div>
+  </UApp>
 </template>
+
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-family-sans: 'Inter', sans-serif;
+}
+</style>

app/components/ImageDetail.vue

@@ -120,7 +120,7 @@ onMounted(() => {
               <span class="text-white w-40">Fit</span>
               <USelectMenu
                 v-model="objectFitSelected"
-                :options="objectsFit"
+                :items="objectsFit"
                 class="!w-52 mr-4"
               />
             </div>
@@ -130,7 +130,7 @@ onMounted(() => {
                 v-model="magnifier"
                 name="magnifier"
                 label="Magnifier"
-                color="primary"
+                color="gray"
                 :ui="{ label: 'text-gray-300 dark:text-gray-300' }"
               />
               <UIcon
@@ -215,7 +215,6 @@ onMounted(() => {
                   />
                 </UTooltip>
                 <!-- open filters -->
-                <!-- v-if="loggedIn"  -->
                 <UTooltip text="Add filters">
                   <UButton
                     variant="ghost"

app/components/ImageGallery.vue

@@ -64,17 +64,6 @@ async function clearSession() {
       ref="dropZoneRef"
       class="relative h-screen gap-[22px] p-4"
     >
-      <UModal
-        v-model="isOpen"
-        class="flex items-center justify-center relative"
-        side="left"
-      >
-        <LoginForm
-          class="z-50 bg-gray-800 rounded-md"
-          @close="isOpen = false"
-        />
-      </UModal>
-
       <BottomMenu class="bottom-menu">
         <template #logo>
           <img
@@ -110,15 +99,27 @@ async function clearSession() {
               variant="ghost"
               @click="clearSession"
             />
-            <UButton
-              v-else
-              label="Sign in"
-              color="green"
-              variant="ghost"
-              aria-label="Sign in"
-              class="mr-4 sm:mr-0"
-              @click="isOpen = true"
-            />
+            <UModal
+              v-model="isOpen"
+              title="Login to upload images"
+              :close="{
+                color: 'gray',
+                variant: 'outline',
+                class: 'rounded-full'
+              }"
+            >
+              <UButton
+                v-if="!loggedIn"
+                label="Sign in"
+                color="green"
+                variant="ghost"
+                aria-label="Sign in"
+                class="mr-4 sm:mr-0"
+              />
+              <template #body>
+                <LoginForm />
+              </template>
+            </UModal>
           </div>
         </template>
       </BottomMenu>
@@ -195,12 +196,12 @@ async function clearSession() {
       class="flex items-center space-x-4 z-10"
     >
       <USkeleton
-        class="h-12 w-12 bg-primary-500"
+        class="h-12 w-12 bg-white-500"
         :ui="{ rounded: 'rounded-full' }"
       />
       <div class="space-y-2">
-        <USkeleton class="h-4 w-[250px] bg-primary-500" />
-        <USkeleton class="h-4 w-[200px] bg-primary-500" />
+        <USkeleton class="h-4 w-[250px] bg-white-500" />
+        <USkeleton class="h-4 w-[200px] bg-white-500" />
       </div>
     </div>
   </div>

app/components/LoginForm.vue

@@ -33,9 +33,6 @@ async function login() {
     class="flex flex-col gap-y-4 p-4 items-center"
     @submit.prevent="login"
   >
-    <h1 class="text-lg text-gray-300">
-      Login to upload images
-    </h1>
     <UInput
       v-model="password"
       type="password"
@@ -54,14 +51,5 @@ async function login() {
       size="lg"
       :disabled="!password"
     />
-
-    <UButton
-      icon="i-heroicons-x-mark"
-      color="gray"
-      variant="ghost"
-      size="xs"
-      class="absolute right-2 top-2"
-      @click="$emit('close')"
-    />
   </form>
 </template>

app/components/UGauge.vue

@@ -29,10 +29,12 @@ const value = useVModel(props, 'modelValue', emit)
       {{ title }}
     </span>
 
-    <URange
+    <USlider
       v-model="value"
       :min="min"
       :max="max"
+      color="gray"
+      size="sm"
     />
 
     <span class="text-center text-medium text-white w-16 px-2"> {{ Math.round(modelValue) }} </span>

nuxt.config.ts

@@ -16,6 +16,11 @@ export default defineNuxtConfig({
   experimental: {
     viewTransition: true
   },
+  ui: {
+    theme: {
+      colors: ['gray', 'red']
+    }
+  },
   devtools: { enabled: true },
   eslint: {
     config: {

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@nuxt/eslint": "^0.5.7",
     "@nuxt/fonts": "^0.9.2",
-    "@nuxt/ui": "^2.18.6",
+    "@nuxt/ui": "3.0.0-alpha.5",
     "@nuxthub/core": "^0.7.20",
     "@vueuse/core": "^11.1.0",
     "@vueuse/nuxt": "^11.1.0",
@@ -25,6 +25,7 @@
     "vue-advanced-cropper": "^2.8.9"
   },
   "devDependencies": {
+    "@iconify-json/heroicons": "^1.2.0",
     "@iconify-json/simple-icons": "^1.2.5",
     "@nuxt/devtools": "^1.5.1",
     "eslint": "^9.11.1",