[Package] PowerSync Nuxt Module #797

khawarizmus · 2025-12-15T10:22:54Z

This PR introduces a new nuxt package to offer first-class support for Nuxt with PowerSync.

The PR also introduces a new demo showcasing a reference implementation showing PowerSync + Nuxt 4 + Supabase

Add Nuxt module package
Add PowerSync x Nuxt x Supabase demo
Write the changset
Test a dev release outside the repo

… and initial setup

…plementation

…Supabase Todo List demo

changeset-bot · 2025-12-15T10:22:59Z

⚠️ No Changeset found

Latest commit: 5771c58

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

khawarizmus · 2025-12-15T10:23:45Z

Not sure what the chanset should include when releasing a new package

stevensJourney

Just sharing some initial comments for some items which stood out from an initial review.

stevensJourney · 2025-12-29T09:06:42Z

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

+        @click="navigateTo('/')"
+      >
+        <img
+          src="https://cdn.prod.website-files.com/67eea61902e19994e7054ea0/67f910109a12edc930f8ffb6_powersync-icon.svg"


Is this link copied from some site, or, where is it managed? Could we use an asset for this?

stevensJourney · 2025-12-29T09:08:25Z

demos/nuxt-supabase-todolist/README.md

+1. [Create a new project on the Supabase dashboard](https://supabase.com/dashboard/projects).
+2. Go to the Supabase SQL Editor for your new project and execute the SQL statements in [`db/seed.sql`](db/seed.sql) to create the database schema, PowerSync replication role, and publication needed for PowerSync.
+
+**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).


We should probably add a note to update the password in db/seed.sql before running?

stevensJourney · 2025-12-29T09:14:45Z

demos/nuxt-supabase-todolist/README.md

+└── nuxt.config.ts            # Nuxt configuration
+```
+
+## Learn More


It would be nice if this demo had a local Supabase config and quickstart for local development - which can be used to start the demo in only a few commands - like the YJS Demo has here.

stevensJourney · 2025-12-29T09:15:39Z

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

+
+    worker: {
+      format: 'es',
+      plugins: () => [wasm(), topLevelAwait()],


I believe you should be able to remove the topLevelAwait plugin these days - due to the BSON lib no longer requiring it. It's only our list of todos for other demos.

stevensJourney · 2025-12-29T09:16:45Z

demos/nuxt-supabase-todolist/package.json

+  "devDependencies": {
+    "@nuxt/devtools": "^1.0.6",
+    "@nuxt/eslint": "^1.9.0",
+    "@supabase/supabase-js": "2.75.0",


Nit: This should probably be a dependency?

stevensJourney · 2025-12-29T10:08:57Z

packages/nuxt/src/runtime/utils/AppSchema.ts

@@ -0,0 +1,27 @@
+import { column, Schema, Table } from '@powersync/web'
+
+export const local_bucket_data = new Table(


Nit: We typically name these kinds of constants in upper case.

stevensJourney · 2025-12-29T10:13:00Z

packages/nuxt/src/runtime/utils/DynamicSchemaManager.ts

+/**
+ * Record fields from downloaded data, then build a schema from it.
+ */
+export class DynamicSchemaManager {


This looks like a copy from tools/diagnostics-app? It would be nice if we had this functionality in some shared location.

stevensJourney · 2025-12-29T10:15:01Z

packages/nuxt/src/runtime/utils/NuxtPowerSyncDatabase.ts

+      //   broadcastLogs: true, // need to be enabled for multitab support
+      // }
+
+      // @ts-expect-error - type error because we are forcing the vfs to be the OPFSCoopSyncVFS


This seems fishy. Why do we need to make this force assertion?

stevensJourney · 2025-12-29T10:17:22Z

packages/nuxt/src/runtime/utils/NuxtPowerSyncDatabase.ts

+      // override settings to disable multitab as we can't use it right now
+      // options.flags = {
+      //   ...options.flags,
+      //   enableMultiTabs: true, // to support multitabe we need to write our won worker implementation


If you're overriding the PowerSyncDatabase, it might be possible (with some minor modifications) to actually implement your own web worker implementation, using the current primitives, which contains the required sync hooks.

stevensJourney · 2025-12-29T10:19:16Z

packages/nuxt/src/runtime/utils/RustClientInterceptor.ts

+import type { DynamicSchemaManager } from './DynamicSchemaManager'
+import type { Ref } from 'vue'
+/**
+ * Tracks per-byte and per-operation progress for the Rust client.


Just sharing this again. I'd really prefer we did not duplicate these implementations.

LucDeCaf · 2025-12-30T08:42:26Z

demos/nuxt-supabase-todolist/README.md

+
+You can use either PowerSync Cloud or self-host PowerSync:
+
+- **PowerSync Cloud**: [Create a new project on the PowerSync dashboard](https://powersync.journeyapps.com/) and connect it to your Supabase database using the `powersync_role` credentials created in step 2.


Nit: should probably link to https://dashboard.powersync.com/

LucDeCaf · 2025-12-30T08:47:17Z

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

+  vite: {
+    plugins: [topLevelAwait()],
+    optimizeDeps: {
+      exclude: ['@journeyapps/wa-sqlite', '@powersync/web', '@powersync/common', '@powersync/vue', '@powersync/kysely-driver'],


Do we need to exclude all @powersync/* packages from optimisation? AFAIK, the only ones that need to be excluded are @powersync/web and @journeyapps/wa-sqlite, since those packages include web workers and wasm respectively - the others should be fine to have optimised.

LucDeCaf · 2025-12-30T08:49:40Z

demos/nuxt-supabase-todolist/pages/login.vue

+            class="p-0"
+            @click="sign = sign === 'up' ? 'in' : 'up'"
+          >
+            {{ sign === "in" ? "Sign up" : "Sign in" }}


Looks like this condition might be reversed.

LucDeCaf · 2025-12-30T08:51:13Z

packages/nuxt/src/devtools.ts

+      // title to display in the tab
+      title: 'Powersync Inspector',
+      // any icon from Iconify, or a URL to an image
+      icon: 'https://cdn.prod.website-files.com/67eea61902e19994e7054ea0/67f910109a12edc930f8ffb6_powersync-icon.svg',


This should maybe be a file in 'assets' instead of a link - not too fussed, though

LucDeCaf · 2025-12-30T09:00:24Z

packages/nuxt/src/runtime/composables/usePowerSyncInspectorDiagnostics.ts

+import { computedAsync } from '@vueuse/core'
+import { usePowerSyncInspector } from './usePowerSyncInspector'
+
+type JSONValue


The same JSON types are declared in src/module.ts. It might make sense to move these to a types.ts file or similar.

LucDeCaf · 2025-12-30T09:08:05Z

scripts/reset-node-modules.ts

Not entirely sure what the benefit of a dedicated script is over using npx npkill or even rm -rf demos/**/node_modules

Amine added 5 commits December 11, 2025 00:28

feat: added nuxt module

db1ecce

feat: add Nuxt Supabase Todo List demo with environment configuration…

e5c95ac

… and initial setup

feat: prepare NuxtPowerSyncDatabase to support default sync client im…

3521b82

…plementation

feat: add environment configuration template and sync rules for Nuxt …

c58db3c

…Supabase Todo List demo

feat: add README and update seed.sql for Nuxt Supabase Todo List demo

5771c58

khawarizmus requested review from Chriztiaan, LucDeCaf, rkistner, simolus3 and stevensJourney December 15, 2025 10:22

stevensJourney reviewed Dec 29, 2025

View reviewed changes

LucDeCaf reviewed Dec 30, 2025

View reviewed changes

		@@ -0,0 +1,27 @@
		import { column, Schema, Table } from '@powersync/web'

		export const local_bucket_data = new Table(


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

		- PowerSync Cloud: [Create a new project on the PowerSync dashboard](https://powersync.journeyapps.com/) and connect it to your Supabase database using the `powersync_role` credentials created in step 2.

[Package] PowerSync Nuxt Module #797

Are you sure you want to change the base?

[Package] PowerSync Nuxt Module #797

Uh oh!

Conversation

khawarizmus commented Dec 15, 2025

Uh oh!

changeset-bot bot commented Dec 15, 2025

⚠️ No Changeset found

Uh oh!

khawarizmus commented Dec 15, 2025

Uh oh!

stevensJourney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants