This is a demo application showcasing PowerSync integration with Nuxt 4 and Supabase. It demonstrates real-time data synchronization for a simple todo list application using PowerSync's official Nuxt module.

Note that this setup guide has minor deviations from the Supabase + PowerSync integration guide. Below we refer to sections in this guide where relevant.

In the repo root directory, use pnpm to install dependencies:

pnpm install
pnpm build:packages

This demo can be started with local PowerSync and Supabase services.

1. Install the Supabase CLI

2. Copy the environment template:

   cp .env.template .env

3. Start Supabase:

   supabase start

4. Copy the values from the supabase start output into .env. Local Supabase uses JWKS for auth, so this demo configures PowerSync with jwks_uri and audience: authenticated:

   • NUXT_PUBLIC_SUPABASE_ANON_KEY: Use the Publishable key value
   • PS_JWKS_URI: Use http://kong:8000/auth/v1/.well-known/jwks.json when PowerSync runs in Docker on the Supabase network (default in step 5). This points PowerSync at local Supabase's JWKS so it can verify tokens. If Kong is not reachable from the container (e.g. custom network), try http://host.docker.internal:54321/auth/v1/.well-known/jwks.json on Docker Desktop for Mac/Windows.

5. Start PowerSync:

   docker run \
     -p 6060:6060 \
     -e POWERSYNC_CONFIG_B64=$(base64 -i ./powersync.yaml) \
     -e POWERSYNC_SYNC_RULES_B64=$(base64 -i ./sync-config.yaml) \
     --env-file ./.env \
     --network supabase_network_nuxt-supabase-todolist \
     --name powersync-nuxt journeyapps/powersync-service:latest

6. Run the demo:

   pnpm dev

Open http://localhost:3000 to use the app.

This demo app uses Supabase as its Postgres database and backend:

1. Create a new project on the Supabase dashboard.
2. Go to the Supabase SQL Editor for your new project and execute the SQL statements in db/seed.sql to create the database schema, PowerSync replication role, and publication needed for PowerSync.

Note: Before executing the SQL, make sure to update the powersync_role password in db/seed.sql (currently set to 'postgres_12345') to a secure password of your choice.

Important: When connecting PowerSync to your Supabase database, you'll use the powersync_role credentials instead of the default Supabase connection string. This role has the necessary replication privileges and bypasses Row Level Security (RLS).

This app uses Supabase's email/password authentication.

1. Go to "Authentication" -> "Providers" in your Supabase dashboard
2. Ensure "Email" provider is enabled
3. You can disable email confirmation for development by going to "Authentication" -> "Email Auth" and disabling "Confirm email"

You'll need to create a user account when you first access the application.

You can use either PowerSync Cloud or self-host PowerSync:

• PowerSync Cloud: Create a new project on the PowerSync dashboard and connect it to your Supabase database using the powersync_role credentials created in step 2.
• Self-hosting: Follow the self-hosting guide to deploy your own PowerSync instance.

The sync streams for this demo are provided in sync-config.yaml in this directory.

Create a .env file in this directory with the following variables:

NUXT_PUBLIC_SUPABASE_URL=your_supabase_url
NUXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NUXT_PUBLIC_POWERSYNC_URL=your_powersync_instance_url

Replace the values with your actual credentials:

• Get NUXT_PUBLIC_SUPABASE_URL and NUXT_PUBLIC_SUPABASE_ANON_KEY from your Supabase project settings under "Project Settings" -> "API"
• Get NUXT_PUBLIC_POWERSYNC_URL from your PowerSync instance (Cloud dashboard or your self-hosted instance URL)

In this directory, run the following to start the development server:

pnpm dev

Open http://localhost:3000 with your browser to try out the demo.

├── powersync/
│   ├── AppSchema.ts          # PowerSync schema definition
│   └── SuperbaseConnector.ts # Supabase connector implementation
├── plugins/
│   └── powersync.client.ts   # PowerSync plugin setup
├── pages/
│   ├── index.vue             # Main todo list page
│   ├── login.vue             # Login page
│   └── confirm.vue           # Auth confirmation page
├── components/
│   └── AppHeader.vue         # Header component
├── db/
│   └── seed.sql              # Database setup SQL
├── powersync.yaml             # PowerSync server configuration
├── sync-config.yaml          # PowerSync sync streams
└── nuxt.config.ts            # Nuxt configuration

• PowerSync Documentation
• Supabase Documentation
• Nuxt Documentation