chore: update to latest Nuxt UI v4

Author: atinux

.vscode/settings.json

@@ -1,4 +1,13 @@
 {
   "eslint.useFlatConfig": true,
-  "prettier.enable": false,
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.classAttributes": ["class", "ui"],
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }

app/app.config.ts

@@ -1,5 +1,7 @@
 export default defineAppConfig({
   ui: {
-    gray: 'zinc',
+    colors: {
+      neutral: 'zinc',
+    },
   },
 })

app/app.vue

@@ -12,8 +12,9 @@ useHead({
     <UButton
       to="https://github.com/atinux/my-pull-requests"
       target="_blank"
-      color="black"
-      size="xs"
+      color="neutral"
+      variant="subtle"
+      size="sm"
       icon="i-simple-icons-github"
     >
       Create my own contributions page
@@ -24,6 +25,6 @@ useHead({
 
 <style lang="postcss">
 body {
-  @apply min-h-screen bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 font-sans;
+  @apply min-h-screen bg-white dark:bg-neutral-900 text-neutral-700 dark:text-neutral-200 font-sans;
 }
 </style>

app/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

app/components/PullRequest.vue

@@ -26,19 +26,19 @@ const stateIcons: Record<Contributions['prs'][number]['state'], string> = {
       :href="`https://github.com/${data.repo}`"
       target="_blank"
       relative
-      :class="['size-10 sm:size-12 shrink-0 border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm', data.type === 'Organization' ? 'rounded-lg' : 'rounded-full']"
+      :class="['size-10 sm:size-12 shrink-0 border border-neutral-200 dark:border-neutral-800 overflow-hidden shadow-sm', data.type === 'Organization' ? 'rounded-lg' : 'rounded-full']"
     >
       <img :src="`https://github.com/${data.repo.split('/')[0]}.png`" :alt="data.repo" class="size-full">
     </a>
 
     <div class="flex-1 flex justify-between gap-2 lg:gap-4 min-w-0">
       <div class="flex flex-col min-w-0 gap-0.5 sm:gap-1">
-        <a :href="data.url" target="_blank" class="text-sm sm:text-base flex items-center gap-0.5 sm:gap-1 hover:underline text-gray-900 dark:text-white">
+        <a :href="data.url" target="_blank" class="text-sm sm:text-base flex items-center gap-0.5 sm:gap-1 hover:underline text-neutral-900 dark:text-white">
           <UIcon
             :name="stateIcons[data.state]"
             :class="{
               'text-green-500 dark:text-green-400': data.state === 'open',
-              'text-gray-500 dark:text-gray-400': data.state === 'draft',
+              'text-neutral-500 dark:text-neutral-400': data.state === 'draft',
               'text-purple-500 dark:text-purple-400': data.state === 'merged',
               'text-red-500 dark:text-red-400': data.state === 'closed',
             }"
@@ -54,7 +54,7 @@ const stateIcons: Record<Contributions['prs'][number]['state'], string> = {
             <span class="opacity-50">/</span>
             <span class="truncate">{{ data.repo.split('/')[1] }}</span>
           </a>
-          <a :href="`https://github.com/${data.repo}`" target="_blank" class="items-center hidden sm:inline-flex gap-0.5 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white truncate">
+          <a :href="`https://github.com/${data.repo}`" target="_blank" class="items-center hidden sm:inline-flex gap-0.5 text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-white truncate">
             <UIcon name="i-lucide-star" class="size-3 shrink-0" />
             <span class="text-xs">{{ formatStars(data.stars) }}</span>
           </a>
@@ -66,7 +66,7 @@ const stateIcons: Record<Contributions['prs'][number]['state'], string> = {
           #{{ data.number }}
         </a>
 
-        <time :datatime="data.created_at" class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">{{ useTimeAgo(new Date(data.created_at)) }}</time>
+        <time :datatime="data.created_at" class="text-xs sm:text-sm text-neutral-500 dark:text-neutral-400">{{ useTimeAgo(new Date(data.created_at)) }}</time>
       </div>
     </div>
   </div>

app/components/ScrollToTop.vue

@@ -13,9 +13,9 @@ const { y: scroll } = useWindowScroll()
   <UButton
     title="Scroll to top"
     aria-label="Scroll to top"
-    color="gray"
+    color="neutral"
     variant="ghost"
-    class="z-100 fixed bottom-3 right-3 h-10 w-10 flex justify-center items-center rounded-full transition duration-300 text-gray-600 hover:bg-[#8882] hover:opacity-100 dark:text-white dark:hover:bg-[#8883] print:hidden"
+    class="z-100 fixed bottom-3 right-3 h-10 w-10 flex justify-center items-center rounded-full transition duration-300 text-neutral-600 hover:bg-[#8882] hover:opacity-100 dark:text-white dark:hover:bg-[#8883] print:hidden"
     icon="i-lucide-arrow-up"
     :class="scroll > 200 ? 'opacity-40' : '!opacity-0 pointer-events-none'"
     @click="toTop()"

app/pages/index.vue

@@ -45,17 +45,17 @@ useSeoMeta({
         </a>
         is <span class="animate-pulse">Contributing...</span>
       </h1>
-      <p class="text-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
+      <p class="text-center text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300">
         <NuxtLink :to="userUrl" target="_blank">
           @{{ user.username }}'s recent pull requests on GitHub.
         </NuxtLink>
       </p>
-      <div class="flex items-center justify-center gap-1 text-gray-700 dark:text-gray-300">
+      <div class="flex items-center justify-center gap-1 text-neutral-700 dark:text-neutral-300">
         <ClientOnly>
           <UButton
             :aria-label="`${user.name}'s GitHub profile`"
             :icon="colorMode.value === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
-            color="gray"
+            color="neutral"
             variant="link"
             @click="colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'"
           />
@@ -69,7 +69,7 @@ useSeoMeta({
           target="_blank"
           :aria-label="`${user.name}'s GitHub profile`"
           icon="i-lucide-github"
-          color="gray"
+          color="neutral"
           variant="link"
         />
         <UButton
@@ -78,11 +78,11 @@ useSeoMeta({
           target="_blank"
           aria-label="RSS Feed"
           icon="i-lucide-rss"
-          color="gray"
+          color="neutral"
           variant="link"
         />
       </div>
-      <UDivider class="mt-2 sm:mt-6 mb-6 sm:mb-10 w-1/2 mx-auto animate-pulse" />
+      <USeparator class="mt-2 sm:mt-6 mb-6 sm:mb-10 w-1/2 mx-auto animate-pulse" />
     </div>
 
     <div class="flex flex-col gap-6 sm:gap-10">

nuxt.config.ts

@@ -1,9 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  css: ['~/assets/css/main.css'],
 
   // https://nuxt.com/modules
   modules: [
-    '@nuxthub/core',
     '@nuxt/eslint',
     '@nuxt/ui',
     '@vueuse/nuxt',
@@ -14,11 +14,15 @@ export default defineNuxtConfig({
 
   // https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4
   future: { compatibilityVersion: 4 },
-  compatibilityDate: '2024-07-30',
+  compatibilityDate: '2025-09-08',
 
   // https://hub.nuxt.com/docs/getting-started/installation#options
-  hub: {
-    cache: true,
+  nitro: {
+    storage: {
+      cache: {
+        driver: 'vercel-runtime-cache',
+      }
+    }
   },
 
   // https://eslint.nuxt.com

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad",
+  "packageManager": "pnpm@10.15.1",
   "scripts": {
     "build": "nuxi build",
     "dev": "nuxi dev",
@@ -13,22 +13,22 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.57",
-    "@nuxt/ui": "^2.22.1",
-    "@nuxthub/core": "^0.9.0",
-    "@vueuse/core": "^13.5.0",
-    "@vueuse/nuxt": "^13.5.0",
+    "@iconify-json/lucide": "^1.2.66",
+    "@nuxt/ui": "^4.0.0-alpha.1",
+    "@vueuse/core": "^13.9.0",
+    "@vueuse/nuxt": "^13.9.0",
     "feed": "^5.1.0",
-    "nuxt": "^4.0.0",
+    "nuxt": "^4.1.1",
     "octokit": "^5.0.3",
-    "vue": "^3.5.17",
+    "tailwindcss": "^4.1.13",
+    "vue": "^3.5.21",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@nuxt/eslint": "^1.6.0",
-    "eslint": "^9.31.0",
-    "vue-tsc": "^2.2.12",
-    "wrangler": "^4.25.0"
+    "@nuxt/eslint": "^1.9.0",
+    "eslint": "^9.35.0",
+    "vue-tsc": "^3.0.6",
+    "wrangler": "^4.34.0"
   },
   "pnpm": {
     "onlyBuiltDependencies": [