feat: add Nuxt Supabase Todo List demo with environment configuration and initial setup

Author: Amine

.gitignore

@@ -2,6 +2,7 @@ node_modules
 lib
 dist
 .nuxt
+.output
 *.tsbuildinfo
 .vscode
 .DS_STORE

demos/nuxt-supabase-todolist/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

demos/nuxt-supabase-todolist/README

@@ -0,0 +1,20 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'indigo',
+      neutral: 'stone',
+    },
+    input: {
+      variants: {
+        variant: {
+          subtle: 'ring-default bg-elevated/50',
+        },
+      },
+    },
+    header: {
+      slots: {
+        root: 'border-none',
+      },
+    },
+  },
+})

demos/nuxt-supabase-todolist/app.config.ts

@@ -0,0 +1,58 @@
+<template>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+useHead({
+  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+  link: [{ rel: 'icon', href: '/favicon.ico' }],
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+const title = 'PowerSync Playground'
+const description
+  = 'Demo of a simple todo list app using PowerSync and Supabase.'
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+})
+
+const appIsReady = ref(false)
+
+provide('appIsReady', readonly(appIsReady))
+
+const powerSync = usePowerSync()
+const syncStatus = usePowerSyncStatus()
+
+const user = useSupabaseUser()
+const { logger: powerSyncLogger } = useDiagnosticsLogger()
+
+watch(user, () => {
+  if (user) {
+    if (syncStatus.value.hasSynced) {
+      powerSyncLogger.log('User is logged in and has synced...', { user: user, syncStatus: syncStatus.value })
+      appIsReady.value = true
+    }
+    else {
+      powerSyncLogger.log('User is logged waiting for first sync...', { user: user, syncStatus: syncStatus.value })
+      powerSync.value.waitForFirstSync().then(() => {
+        appIsReady.value = true
+      })
+    }
+  }
+  else {
+    powerSyncLogger.log('User is not logged in disconnecting...', { user: user, syncStatus: syncStatus.value })
+    powerSync.value.disconnect()
+    appIsReady.value = true
+  }
+}, { immediate: true })
+</script>

demos/nuxt-supabase-todolist/app.vue

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

demos/nuxt-supabase-todolist/assets/css/main.css

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const client = useSupabaseClient()
+const user = useSupabaseUser()
+const powerSync = usePowerSync()
+
+const logout = async () => {
+  await powerSync.value.disconnectAndClear()
+
+  await client.auth.signOut()
+  navigateTo('/login')
+}
+</script>
+
+<template>
+  <UHeader :toggle="false">
+    <template #left>
+      <UButton
+        variant="link"
+        @click="navigateTo('/')"
+      >
+        <img
+          src="https://cdn.prod.website-files.com/67eea61902e19994e7054ea0/67f910109a12edc930f8ffb6_powersync-icon.svg"
+          alt="Powersync"
+          class="size-10 inline-flex"
+        >
+      </UButton>
+    </template>
+
+    <template #right>
+      <UColorModeButton variant="link" />
+
+      <UButton
+        v-if="user"
+        variant="link"
+        class="cursor-pointer"
+        color="neutral"
+        @click="logout"
+      >
+        Logout
+      </UButton>
+    </template>
+  </UHeader>
+</template>

demos/nuxt-supabase-todolist/components/AppHeader.vue

@@ -0,0 +1,56 @@
+-- Past this into your Superbase SQL Editor
+
+-- Note: change this if changing the DB connection name
+-- connect postgres;
+-- Create tables
+CREATE TABLE public.lists(
+  id uuid NOT NULL DEFAULT gen_random_uuid(),
+  created_at timestamp with time zone NOT NULL DEFAULT now(),
+  name text NOT NULL,
+  owner_id uuid NOT NULL,
+  CONSTRAINT lists_pkey PRIMARY KEY (id)
+);
+
+CREATE TABLE public.todos(
+  id uuid NOT NULL DEFAULT gen_random_uuid(),
+  created_at timestamp with time zone NOT NULL DEFAULT now(),
+  completed_at timestamp with time zone NULL,
+  description text NOT NULL,
+  completed boolean NOT NULL DEFAULT FALSE,
+  created_by uuid NULL,
+  completed_by uuid NULL,
+  list_id uuid NOT NULL,
+  photo_id uuid NULL,
+  CONSTRAINT todos_pkey PRIMARY KEY (id)
+);
+
+-- Creates some initial data to be synced
+INSERT INTO lists(
+  id,
+  name,
+  owner_id)
+VALUES (
+  '75f89104-d95a-4f16-8309-5363f1bb377a',
+  'Getting Started',
+  gen_random_uuid());
+
+INSERT INTO todos(
+  description,
+  list_id,
+  completed)
+VALUES (
+  'Run services locally',
+  '75f89104-d95a-4f16-8309-5363f1bb377a',
+  TRUE);
+
+INSERT INTO todos(
+  description,
+  list_id,
+  completed)
+VALUES (
+  'Create a todo here. Query the todos table via a Postgres connection. Your todo should be synced',
+  '75f89104-d95a-4f16-8309-5363f1bb377a',
+  FALSE);
+
+-- Create publication for PowerSync tables
+CREATE PUBLICATION powersync FOR ALL TABLES;

demos/nuxt-supabase-todolist/db/seed.sql

@@ -0,0 +1,9 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'nuxt/nuxt-config-keys-order': 'off',
+  },
+})

demos/nuxt-supabase-todolist/eslint.config.mjs

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <AppHeader />
+
+    <UMain>
+      <slot />
+    </UMain>
+  </div>
+</template>