refactor(demo): replace @nuxthq/ui with @nuxt/ui (#409)

Co-authored-by: Baptiste Leproux <[email protected]>

Author: pascalwengerter

demo/README.md

@@ -47,15 +47,15 @@ SUPABASE_KEY="<your_key>"
 Start the development server on http://localhost:3000
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 ## Production
 
 Build the application for production:
 
 ```bash
-npm run build
+pnpm build
 ```
 
 Checkout the [deployment documentation](https://nuxt.com/deploy).

demo/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+  },
+})

demo/components/AppContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen u-bg-black">
+  <div class="min-h-screen">
     <slot />
   </div>
 </template>

demo/components/AppHeader.vue

@@ -22,29 +22,32 @@ const logout = async () => {
       <div class="hidden md:block">
         <UButton
           label="Source"
-          variant="transparent"
+          variant="link"
+          color="gray"
           target="_blank"
           to="https://github.com/nuxt-modules/supabase/tree/main/demo"
           icon="i-heroicons-outline-external-link"
         />
         <UButton
           label="Hosted on Netlify"
-          variant="transparent"
+          variant="link"
+          color="gray"
           target="_blank"
           to="https://netlify.com"
           icon="i-heroicons-outline-external-link"
         />
       </div>
       <div class="flex items-center">
         <UButton
-          variant="transparent"
+          variant="link"
+          color="gray"
           :icon="colorModeIcon"
           @click="toggleDark"
         />
         <UButton
           v-if="user"
-          class="u-text-white"
-          variant="transparent"
+          variant="link"
+          color="gray"
           @click="logout"
         >
           Logout

demo/components/LoginCard.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="sm:mx-auto sm:w-full sm:max-w-md">
-    <div class="u-bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+    <div class="py-8 px-4 shadow sm:rounded-lg sm:px-10">
       <div>
         <div class="relative">
           <div class="absolute inset-0 flex items-center">
             <div class="w-full border-t border-gray-300" />
           </div>
           <div class="relative flex justify-center text-sm">
-            <span class="px-2 u-bg-white text-gray-500"> Connect with </span>
+            <span class="px-2 text-gray-500 bg-white dark:bg-stone-900"> Connect with </span>
           </div>
         </div>
         <slot />

demo/nuxt.config.ts

@@ -2,26 +2,22 @@ export default defineNuxtConfig({
   modules: [
     // https://github.com/nuxt-modules/supabase
     '@nuxtjs/supabase',
-    // UI lib (will be soon open sourced)
-    '@nuxthq/ui',
-    // https://github.com/nuxt-modules/color-mode
-    '@nuxtjs/color-mode',
+    // https://github.com/nuxt/ui
+    '@nuxt/ui',
   ],
+
   runtimeConfig: {
     public: {
       baseUrl: process.env.BASE_URL || 'http://localhost:3000',
     },
   },
-  ui: {
-    colors: {
-      primary: 'green',
-    },
-    icons: ['mdi', 'heroicons', 'heroicons-outline'],
-  },
+
   supabase: {
     redirectOptions: {
       login: '/',
       callback: '/confirm',
     },
   },
+
+  compatibilityDate: '2024-09-01',
 })

demo/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "engines": {
-    "node": ">=20.10.0"
+    "node": ">=20.9.0"
   },
   "scripts": {
     "dev": "nuxi dev",
@@ -11,16 +11,15 @@
     "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
-    "@iconify-json/heroicons": "^1.1.20",
-    "@iconify-json/heroicons-outline": "^1.1.10",
-    "@iconify-json/mdi": "^1.1.66",
-    "@nuxthq/ui": "^1.2.10",
-    "@nuxtjs/color-mode": "^3.4.0",
-    "@nuxtjs/supabase": "^1.2.0",
-    "nuxt": "^3.11.2",
-    "typescript": "^5.4.5"
+    "@iconify-json/heroicons": "^1.2.0",
+    "@iconify-json/heroicons-outline": "^1.2.0",
+    "@iconify-json/mdi": "^1.2.0",
+    "@nuxt/ui": "2.18.4",
+    "@nuxtjs/supabase": "^1.4.0",
+    "nuxt": "^3.13.1",
+    "typescript": "^5.5.4"
   },
   "resolutions": {
-    "consola": "^3.0.0"
+    "@nuxt/icon": "^1.5.1"
   }
 }

demo/pages/confirm.vue

@@ -10,7 +10,7 @@ watch(user, () => {
 
 <template>
   <div>
-    <p class="u-text-black">
+    <p>
       Redirecting...
     </p>
   </div>

demo/pages/index.vue

@@ -13,7 +13,7 @@ watchEffect(() => {
 
 <template>
   <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-    <h2 class="my-6 text-center text-3xl font-extrabold u-text-white">
+    <h2 class="my-6 text-center text-3xl font-extrabold">
       Sign in to your account
     </h2>
     <LoginCard>
@@ -22,7 +22,8 @@ watchEffect(() => {
         icon="i-mdi-github"
         block
         label="Github"
-        variant="black"
+        color="gray"
+        variant="solid"
         @click="auth.signInWithOAuth({ provider: 'github', options: { redirectTo } })"
       />
     </LoginCard>

demo/pages/tasks.vue

@@ -53,7 +53,7 @@ const fetchTasksFromServerRoute = async () => {
 
 <template>
   <div class="w-full my-[50px]">
-    <h1 class="mb-12 text-6xl font-bold u-text-white">
+    <h1 class="mb-12 text-6xl font-bold">
       Todo List.
     </h1>
     <form
@@ -65,7 +65,7 @@ const fetchTasksFromServerRoute = async () => {
         :loading="loading"
         class="w-full"
         size="xl"
-        variant="white"
+        variant="outline"
         type="text"
         name="newTask"
         placeholder="Make a coffee"
@@ -74,14 +74,14 @@ const fetchTasksFromServerRoute = async () => {
       />
       <UButton
         type="submit"
-        variant="white"
+        variant="outline"
       >
         Add
       </UButton>
     </form>
     <UCard
       v-if="tasks?.length > 0"
-      body-class="px-6 py-2 overflow-hidden"
+      class="px-6 py-2 overflow-hidden"
     >
       <ul>
         <li
@@ -94,7 +94,7 @@ const fetchTasksFromServerRoute = async () => {
               :label-class="`block font-medium ${task.completed ? 'line-through u-text-gray-500' : 'u-text-gray-700'}`"
               :label="task.title"
               :name="String(task.id)"
-              wrapper-class="flex items-center justify-between w-full"
+              class="flex items-center justify-between w-full"
             >
               <div class="flex items-center justify-between">
                 <div @click="completeTask(task)">
@@ -108,7 +108,8 @@ const fetchTasksFromServerRoute = async () => {
                 <UButton
                   class="ml-3 text-red-600"
                   size="sm"
-                  variant="transparent"
+                  color="red"
+                  variant="ghost"
                   icon="i-heroicons-outline-trash"
                   @click="removeTask(task)"
                 />
@@ -124,23 +125,25 @@ const fetchTasksFromServerRoute = async () => {
       @click="fetchTasksFromServerRoute"
     />
     <UModal v-model="isModalOpen">
-      <h2 class="mb-4">
-        Tasks fetched from
-        <a
-          href="https://nuxt.com/docs/guide/directory-structure/server"
-          target="_blank"
-          class="text-primary-500 underline"
-        >Nuxt Server route</a>
-        with the use of the
-        <a
-          href="https://supabase.nuxtjs.org/usage/services/server-supabase-client"
-          target="_blank"
-          class="text-primary-500 underline"
-        >serverSupabaseClient</a>:
-      </h2>
-      <pre>
-        {{ tasksFromServer }}
-      </pre>
+      <UCard>
+        <h2 class="mb-4">
+          Tasks fetched from
+          <a
+            href="https://nuxt.com/docs/guide/directory-structure/server"
+            target="_blank"
+            class="text-primary-500 underline"
+          >Nuxt Server route</a>
+          with the use of the
+          <a
+            href="https://supabase.nuxtjs.org/usage/services/serversupabaseclient"
+            target="_blank"
+            class="text-primary-500 underline"
+          >serverSupabaseClient</a>:
+        </h2>
+        <pre>
+          {{ tasksFromServer }}
+        </pre>
+      </UCard>
     </UModal>
   </div>
 </template>