chore(demo): new demo with ui pro

Author: larbish

demo/.env.example

@@ -1,7 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
 node_modules
+
+# Logs
+logs
 *.log
-.nuxt
-nuxt.d.ts
-.output
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
 .env
-.history
+.env.*
+!.env.example
+
+#VSC
+.history

demo/.gitignore

@@ -6,6 +6,7 @@ Live demo: https://n3-supabase.netlify.app
 
 - Frontend:
   - [Nuxt 3](https://nuxt.com/) - The Vue Framework for Web Architects
+  - [Nuxt UI Pro](https://ui.nuxt.com/) for components
   - [TailwindCSS](https://tailwindcss.com/) for styling and layout.
   - [Supabase Module](https://github.com/nuxt-modules/supabase) for user management and supabase data client.
 - Backend:
@@ -54,6 +55,9 @@ pnpm dev
 
 ## Production
 
+> [!WARNING]
+> This project uses [Nuxt UI Pro](https://ui.nuxt.com/pro), you need a license to deploy it in production. However, you can use it for free in development.
+
 Build the application for production:
 
 ```bash

demo/.npmrc

@@ -1,5 +1,22 @@
 export default defineAppConfig({
   ui: {
-    primary: 'green',
+    colors: {
+      primary: 'orange',
+      neutral: 'zinc',
+    },
+    input: {
+      variants: {
+        variant: {
+          subtle: 'ring-default bg-elevated/50',
+        },
+      },
+    },
+  },
+  uiPro: {
+    header: {
+      slots: {
+        root: 'border-none',
+      },
+    },
   },
 })

demo/README.md

@@ -1,8 +1,19 @@
 <template>
-  <AppContainer>
-    <AppHeader />
-    <PageContainer>
+  <UApp>
+    <NuxtLayout>
       <NuxtPage />
-    </PageContainer>
-  </AppContainer>
+    </NuxtLayout>
+  </UApp>
 </template>
+
+<script setup lang="ts">
+const title = 'Nuxt 3 x Supabase'
+const description = 'Demo of a simple todo list app using Nuxt and Supabase.'
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+})
+</script>

demo/app.config.ts

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+:root {
+  --ui-header-height: 40px;
+
+  --ui-container: 100%;
+}

demo/app.vue

@@ -1,58 +1,46 @@
 <script setup lang="ts">
 const client = useSupabaseClient()
 const user = useSupabaseUser()
-const colorMode = useColorMode()
-
-const toggleDark = () => {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-}
-
-const colorModeIcon = computed(() => colorMode.preference === 'dark' ? 'i-heroicons-outline-moon' : 'i-heroicons-outline-sun')
 
 const logout = async () => {
   await client.auth.signOut()
-  navigateTo('/')
+  navigateTo('/login')
 }
 </script>
 
 <template>
-  <div>
-    <Title>Nuxt 3 x Supabase</Title>
-    <div class="flex items-center md:justify-between justify-center">
-      <div class="hidden md:block">
-        <UButton
-          label="Source"
-          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="link"
-          color="gray"
-          target="_blank"
-          to="https://netlify.com"
-          icon="i-heroicons-outline-external-link"
-        />
-      </div>
-      <div class="flex items-center">
-        <UButton
-          variant="link"
-          color="gray"
-          :icon="colorModeIcon"
-          @click="toggleDark"
-        />
-        <UButton
-          v-if="user"
-          variant="link"
-          color="gray"
-          @click="logout"
-        >
-          Logout
-        </UButton>
-      </div>
-    </div>
-  </div>
+  <UHeader>
+    <template #left>
+      <UButton
+        label="Source"
+        target="_blank"
+        variant="link"
+        color="neutral"
+        to="https://github.com/nuxt-modules/supabase/tree/main/demo"
+        icon="i-lucide-external-link"
+      />
+      <UButton
+        label="Hosted on Vercel"
+        target="_blank"
+        variant="link"
+        color="neutral"
+        to="https://vercel.com"
+        icon="i-lucide-external-link"
+        class="hidden sm:flex"
+      />
+    </template>
+
+    <template #right>
+      <UColorModeButton variant="link" />
+
+      <UButton
+        v-if="user"
+        variant="link"
+        color="gray"
+        @click="logout"
+      >
+        Logout
+      </UButton>
+    </template>
+  </UHeader>
 </template>