chore: update demo deps

Author: atinux

demo/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["@nuxt/eslint-config"],
+};

demo/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

demo/README.md

@@ -5,18 +5,18 @@
 Live demo: https://n3-supabase.netlify.app
 
 - Frontend:
-  - [Nuxt 3](https://v3.nuxtjs.org/) - a Vuejs framework.
-  - [Tailwind](https://tailwindcss.com/) for styling and layout.
-  - [Supabase Module](https://github.com/nuxt-community/supabase-module) for user management and supabase data client.
+  - [Nuxt 3](https://nuxt.com/) - The Vue Framework for Web Architects
+  - [TailwindCSS](https://tailwindcss.com/) for styling and layout.
+  - [Supabase Module](https://github.com/nuxt-modules/supabase) for user management and supabase data client.
 - Backend:
-  - [app.supabase.io](https://app.supabase.io/): hosted Postgres database with restful API for usage with Supabase.js.
+  - [app.supabase.io](https://app.supabase.com/): hosted Postgres database with restful API for usage with Supabase.js.
 
 ## Setup
 
 Make sure to install the dependencies
 
 ```bash
-yarn install
+pnpm i
 ```
 
 Create a project on [Supabase](https://supabase.com).
@@ -47,15 +47,15 @@ SUPABASE_KEY="<your_key>"
 Start the development server on http://localhost:3000
 
 ```bash
-yarn dev
+npm run dev
 ```
 
 ## Production
 
 Build the application for production:
 
 ```bash
-yarn build
+npm run build
 ```
 
 Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).

demo/components/AppHeader.vue

@@ -7,7 +7,7 @@ const toggleDark = () => {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
 
-const colorModeIcon = computed(() => colorMode.preference === 'dark' ? 'heroicons-outline:moon' : 'heroicons-outline:sun')
+const colorModeIcon = computed(() => colorMode.preference === 'dark' ? 'i-heroicons-outline-moon' : 'i-heroicons-outline-sun')
 
 const logout = async () => {
   await client.auth.signOut()
@@ -25,19 +25,28 @@ const logout = async () => {
           variant="transparent"
           target="_blank"
           to="https://github.com/nuxt-modules/supabase/tree/main/demo"
-          icon="heroicons-outline:external-link"
+          icon="i-heroicons-outline-external-link"
         />
         <UButton
           label="Hosted on Netlify"
           variant="transparent"
           target="_blank"
           to="https://netlify.com"
-          icon="heroicons-outline:external-link"
+          icon="i-heroicons-outline-external-link"
         />
       </div>
       <div class="flex items-center">
-        <UButton variant="transparent" :icon="colorModeIcon" @click="toggleDark" />
-        <UButton v-if="user" class="u-text-white" variant="transparent" @click="logout">
+        <UButton
+          variant="transparent"
+          :icon="colorModeIcon"
+          @click="toggleDark"
+        />
+        <UButton
+          v-if="user"
+          class="u-text-white"
+          variant="transparent"
+          @click="logout"
+        >
           Logout
         </UButton>
       </div>

demo/nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
   ui: {
     colors: {
       primary: 'green'
-    }
+    },
+    icons: ['mdi', 'heroicons', 'heroicons-outline']
   }
 })

demo/package.json

@@ -10,12 +10,18 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@nuxthq/ui": "^1.2.3",
+    "@iconify-json/heroicons": "^1.1.10",
+    "@iconify-json/heroicons-outline": "^1.1.6",
+    "@iconify-json/mdi": "^1.1.50",
+    "@nuxt/eslint-config": "^0.1.1",
+    "@nuxthq/ui": "^1.2.10",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/supabase": "^0.3.5",
-    "eslint": "^8.37.0",
-    "nuxt": "^3.3.3",
-    "typescript": "^5.0.3"
+    "eslint": "^8.38.0",
+    "nuxt": "^3.4.1",
+    "typescript": "^5.0.4"
+  },
+  "resolutions": {
+    "consola": "^3.0.0"
   }
 }

demo/pages/index.vue

@@ -17,7 +17,7 @@ watchEffect(() => {
     <LoginCard>
       <UButton
         class="mt-3"
-        icon="mdi:github"
+        icon="i-mdi-github"
         block
         label="Github"
         variant="black"

demo/pages/tasks.vue

@@ -61,7 +61,10 @@ const fetchTasksFromServerRoute = async () => {
     <h1 class="mb-12 text-6xl font-bold u-text-white">
       Todo List.
     </h1>
-    <form class="flex gap-2 my-2" @submit.prevent="addTask">
+    <form
+      class="flex gap-2 my-2"
+      @submit.prevent="addTask"
+    >
       <UInput
         v-model="newTask"
         :loading="loading"
@@ -74,11 +77,17 @@ const fetchTasksFromServerRoute = async () => {
         autofocus
         autocomplete="off"
       />
-      <UButton type="submit" variant="white">
+      <UButton
+        type="submit"
+        variant="white"
+      >
         Add
       </UButton>
     </form>
-    <UCard v-if="tasks?.length > 0" body-class="px-6 py-2 overflow-hidden">
+    <UCard
+      v-if="tasks?.length > 0"
+      body-class="px-6 py-2 overflow-hidden"
+    >
       <ul>
         <li
           v-for="task of tasks"
@@ -105,7 +114,7 @@ const fetchTasksFromServerRoute = async () => {
                   class="ml-3 text-red-600"
                   size="sm"
                   variant="transparent"
-                  icon="heroicons-outline:trash"
+                  icon="i-heroicons-outline-trash"
                   @click="removeTask(task)"
                 />
               </div>
@@ -122,9 +131,17 @@ const fetchTasksFromServerRoute = async () => {
     <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>
+        <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>:
+        <a
+          href="https://supabase.nuxtjs.org/usage/services/server-supabase-client"
+          target="_blank"
+          class="text-primary-500 underline"
+        >serverSupabaseClient</a>:
       </h2>
       <pre>
         {{ tasksFromServer }}