@powersync/nuxt 0.0.0-dev-20260216124709 → 0.0.0-dev-20260305092446

package/{README → README.md}

@@ -1,10 +1,14 @@
 <div align="center">
-  <img src="./src/runtime/assets/powersync-icon.svg" alt="PowerSync Logo" width="64" height="64" />
+  <img src="https://github.com/powersync-ja/powersync-js/raw/main/packages/nuxt/src/runtime/assets/powersync-icon.svg" alt="PowerSync Logo" width="64" height="64" />
   <h1>PowerSync Nuxt</h1>
-  <p>Local-first apps made simple</p>
-  <p>Effortless offline-first development with PowerSync integration for Nuxt applications.</p>
+  <p>PowerSync for Nuxt: offline-first sync with native Nuxt integration</p>
 </div>
 
+> [!NOTE]
+> The Nuxt package is currently in an **alpha** state, intended strictly for testing. Expect breaking changes and instability as development continues.
+>
+> Do not rely on this package for production use.
+
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
@@ -12,14 +16,15 @@
 
 PowerSync Nuxt module integrated with the [Nuxt Devtools](https://github.com/nuxt/devtools).
 
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+- [Changelog](https://github.com/powersync-ja/powersync-js/blob/main/packages/nuxt/CHANGELOG.md)
 
 ## Features
 
-- 🔍 **Built-in Diagnostics** - Direct access to PowerSync instance monitoring and real-time connection insights
-- 🗄️ **Data Inspection** - Seamless local data browsing with powerful debugging and troubleshooting tools
-- ⚡ **Useful Composables** - Ready-to-use Vue composables for rapid offline-first application development
-- 📦 **All-in-One** - Exposes all `@powersync/vue` composables, making this the only required dependency
+- **Real-time offline-first sync** — PowerSync keeps a local SQLite database in sync with your backend (Postgres, MongoDB, MySQL, or SQL Server). Your app reads from local SQLite and works offline; changes sync automatically when the connection is restored.
+- **Auto-imported composables** — `usePowerSync()`, `useQuery()`, and `usePowerSyncKysely()` are available in every component without explicit imports.
+- **Built-in diagnostics** — View connection and sync status, inspect sync buckets and config, and tail real-time logs via the PowerSync Inspector — accessible at `/__powersync-inspector` or through Nuxt Devtools.
+- **Data inspection** — Browse your local SQLite database in the browser without external tools — useful for verifying what data has synced and debugging data issues during development.
+- **Kysely support** — Opt-in type-safe queries via `@powersync/kysely-driver`, enabled with `kysely: true` in your PowerSync config.
 
 ## Installation
 
@@ -28,11 +33,9 @@ This module re-exports all `@powersync/vue` composables. With **npm** (v7+), ins
 ```bash
 # Using npm
 npm install @powersync/nuxt
-npm install --save-dev vite-plugin-top-level-await vite-plugin-wasm
 
 # Using pnpm (peer deps are not auto-installed)
 pnpm add @powersync/nuxt @powersync/vue @powersync/web
-pnpm add -D vite-plugin-top-level-await vite-plugin-wasm
 ```
 
 > [!NOTE]
@@ -45,21 +48,17 @@ For a complete working app, see the [Nuxt + Supabase Todo List demo](https://git
 1. Add `@powersync/nuxt` to the `modules` section of `nuxt.config.ts`:
 
 ```typescript
-import wasm from 'vite-plugin-wasm'
-
 export default defineNuxtConfig({
   modules: ['@powersync/nuxt'],
   vite: {
     optimizeDeps: {
-      exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
-      include: ['@powersync/web > js-logger'], // <-- Include `js-logger` when it isn't installed and imported.
+      exclude: ['@powersync/web']
     },
     worker: {
-      format: 'es',
-      plugins: () => [wasm()],
-    },
-  },
-})
+      format: 'es'
+    }
+  }
+});
 ```
 
 > [!WARNING]  
@@ -68,29 +67,29 @@ export default defineNuxtConfig({
 2. Create a PowerSync plugin (e.g., `plugins/powersync.client.ts`):
 
 ```typescript
-import { NuxtPowerSyncDatabase } from '@powersync/nuxt'
-import { createPowerSyncPlugin } from '@powersync/nuxt'
-import { AppSchema } from '~/powersync/AppSchema'
-import { PowerSyncConnector } from '~/powersync/PowerSyncConnector'
+import { NuxtPowerSyncDatabase } from '@powersync/nuxt';
+import { createPowerSyncPlugin } from '@powersync/nuxt';
+import { AppSchema } from '~/powersync/AppSchema';
+import { PowerSyncConnector } from '~/powersync/PowerSyncConnector';
 
 export default defineNuxtPlugin({
   async setup(nuxtApp) {
     const db = new NuxtPowerSyncDatabase({
       database: {
-        dbFilename: 'your-db-filename.sqlite',
+        dbFilename: 'your-db-filename.sqlite'
       },
-      schema: AppSchema,
-    })
+      schema: AppSchema
+    });
 
-    const connector = new PowerSyncConnector()
+    const connector = new PowerSyncConnector();
 
-    await db.init()
-    await db.connect(connector)
+    await db.init();
+    await db.connect(connector);
 
-    const plugin = createPowerSyncPlugin({ database: db })
-    nuxtApp.vueApp.use(plugin)
-  },
-})
+    const plugin = createPowerSyncPlugin({ database: db });
+    nuxtApp.vueApp.use(plugin);
+  }
+});
 ```
 
 At this point, you're all set to use the module composables. The module automatically exposes all `@powersync/vue` composables, so you can use them directly:
@@ -108,13 +107,13 @@ This guide will walk you through the steps to set up PowerSync in your Nuxt proj
 Create a file called `AppSchema.ts` and add your schema to it.
 
 ```typescript
-import { column, Schema, Table } from '@powersync/web'
+import { column, Schema, Table } from '@powersync/web';
 
 const lists = new Table({
   created_at: column.text,
   name: column.text,
-  owner_id: column.text,
-})
+  owner_id: column.text
+});
 
 const todos = new Table(
   {
@@ -124,20 +123,20 @@ const todos = new Table(
     description: column.text,
     created_by: column.text,
     completed_by: column.text,
-    completed: column.integer,
+    completed: column.integer
   },
-  { indexes: { list: ['list_id'] } },
-)
+  { indexes: { list: ['list_id'] } }
+);
 
 export const AppSchema = new Schema({
   todos,
-  lists,
-})
+  lists
+});
 
 // For types
-export type Database = (typeof AppSchema)['types']
-export type TodoRecord = Database['todos']
-export type ListRecord = Database['lists']
+export type Database = (typeof AppSchema)['types'];
+export type TodoRecord = Database['todos'];
+export type ListRecord = Database['lists'];
 ```
 
 > **Tip**: Learn more about how to create your schema [here](https://docs.powersync.com/client-sdk-references/javascript-web#1-define-the-schema).
@@ -147,7 +146,7 @@ export type ListRecord = Database['lists']
 Create a file called `PowerSyncConnector.ts` and add your connector to it.
 
 ```typescript
-import { UpdateType, type PowerSyncBackendConnector } from '@powersync/web'
+import { UpdateType, type PowerSyncBackendConnector } from '@powersync/web';
 
 export class PowerSyncConnector implements PowerSyncBackendConnector {
   async fetchCredentials() {
@@ -159,8 +158,8 @@ export class PowerSyncConnector implements PowerSyncBackendConnector {
     return {
       endpoint: '[Your PowerSync instance URL or self-hosted endpoint]',
       // Use a development token (see Authentication Setup https://docs.powersync.com/installation/authentication-setup/development-tokens) to get up and running quickly
-      token: 'An authentication token',
-    }
+      token: 'An authentication token'
+    };
   }
 
   async uploadData(db: any) {
@@ -169,7 +168,7 @@ export class PowerSyncConnector implements PowerSyncBackendConnector {
 
     // See example implementation here: https://docs.powersync.com/client-sdk-references/javascript-web#3-integrate-with-your-backend
     // see demos here: https://github.com/powersync-ja/powersync-js/tree/main/demos
-    return
+    return;
   }
 }
 ```
@@ -181,30 +180,30 @@ export class PowerSyncConnector implements PowerSyncBackendConnector {
 Finally, putting everything together, create a [plugin](https://nuxt.com/docs/4.x/guide/directory-structure/app/plugins) called `powersync.client.ts` to setup PowerSync.
 
 ```typescript
-import { createPowerSyncPlugin } from '@powersync/nuxt'
-import { NuxtPowerSyncDatabase } from '@powersync/nuxt'
-import { AppSchema } from '~/powersync/AppSchema'
-import { PowerSyncConnector } from '~/powersync/PowerSyncConnector'
+import { createPowerSyncPlugin } from '@powersync/nuxt';
+import { NuxtPowerSyncDatabase } from '@powersync/nuxt';
+import { AppSchema } from '~/powersync/AppSchema';
+import { PowerSyncConnector } from '~/powersync/PowerSyncConnector';
 
 export default defineNuxtPlugin({
   async setup(nuxtApp) {
     const db = new NuxtPowerSyncDatabase({
       database: {
-        dbFilename: 'a-db-name.sqlite',
+        dbFilename: 'a-db-name.sqlite'
       },
-      schema: AppSchema,
-    })
+      schema: AppSchema
+    });
 
-    const connector = new PowerSyncConnector()
+    const connector = new PowerSyncConnector();
 
-    await db.init()
-    await db.connect(connector)
+    await db.init();
+    await db.connect(connector);
 
-    const plugin = createPowerSyncPlugin({ database: db })
+    const plugin = createPowerSyncPlugin({ database: db });
 
-    nuxtApp.vueApp.use(plugin)
-  },
-})
+    nuxtApp.vueApp.use(plugin);
+  }
+});
 ```
 
 ### Kysely ORM (Optional)
@@ -216,6 +215,7 @@ Install the driver:
 ```
 pnpm add @powersync/kysely-driver
 ```
+
 In your existing `nuxt.config.ts`, set:
 
 ```typescript
@@ -226,28 +226,26 @@ export default defineNuxtConfig({
   },
   vite: {
     optimizeDeps: {
-      exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
-      include: ['@powersync/web > js-logger'],
+      exclude: ['@powersync/web']
     },
     worker: {
-      format: 'es',
-      plugins: () => [wasm()],
-    },
-  },
-})
+      format: 'es'
+    }
+  }
+});
 ```
 
 When enabled, the module exposes `usePowerSyncKysely`. Use your schema’s `Database` type to get proper typings:
 
 ```typescript
-import { usePowerSyncKysely } from '@powersync/nuxt'
-import { type Database } from '../powersync/AppSchema'
+import { usePowerSyncKysely } from '@powersync/nuxt';
+import { type Database } from '../powersync/AppSchema';
 
 // In your component or composable
-const db = usePowerSyncKysely<Database>()
+const db = usePowerSyncKysely<Database>();
 
 // Use the db object to interact with the database
-const users = await db.selectFrom('users').selectAll().execute()
+const users = await db.selectFrom('users').selectAll().execute();
 ```
 
 ### Enabling Diagnostics
@@ -260,28 +258,26 @@ To enable the PowerSync Inspector with diagnostics capabilities:
 export default defineNuxtConfig({
   modules: ['@powersync/nuxt'],
   powersync: {
-    useDiagnostics: true, // <- Add this
+    useDiagnostics: true // <- Add this
   },
   vite: {
     optimizeDeps: {
-      exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
-      include: ['@powersync/web > js-logger'],
+      exclude: ['@powersync/web']
     },
     worker: {
-      format: 'es',
-      plugins: () => [wasm()],
-    },
-  },
-})
+      format: 'es'
+    }
+  }
+});
 ```
 
 When `useDiagnostics: true` is set, `NuxtPowerSyncDatabase` automatically:
+
 - Extend your schema with diagnostics schema
 - Sets up diagnostics recording
 - Stores the connector internally (accessible via diagnostics)
 - Configures logging for diagnostics
 
-
 2. **Accessing PowerSync Inspector**:
 
 Once diagnostics are enabled, you can access the [PowerSync Inspector](#powersync-inspector):
@@ -289,8 +285,6 @@ Once diagnostics are enabled, you can access the [PowerSync Inspector](#powersyn
 - **Via Nuxt Devtools**: Open Devtools and look for the PowerSync tab
 - **Direct URL**: `http://localhost:3000/__powersync-inspector`
 
-
-
 ## PowerSync Inspector
 
 PowerSync Inspector is a tool that helps inspect and diagnose the state of your PowerSync client directly from your app in real-time.
@@ -310,6 +304,7 @@ Once setup, the inspector can be accessed on the `http://localhost:3000/__powers
 #### Sync Status
 
 The `Sync Status` tab provides a real-time view of the sync status of your PowerSync client, including:
+
 - Connection status
 - Sync progress
 - Upload queue statistics
@@ -341,8 +336,8 @@ To fix this, you can add the following to your `nuxt.config.ts`:
 export default defineNuxtConfig({
   unocss: {
     autoImport: false
-  },
-})
+  }
+});
 ```
 
 ## Development
@@ -368,23 +363,21 @@ Don't forget to add a watcher for the module for hot reloading.
 Example (in your nuxt app):
 
 ```typescript
-import { defineNuxtConfig } from 'nuxt/config'
+import { defineNuxtConfig } from 'nuxt/config';
 
 export default defineNuxtConfig({
   modules: ['../../my-location/@powersync/nuxt/src/*'],
-  watch: ['../../my-location/@powersync/nuxt/src/*'],
-})
+  watch: ['../../my-location/@powersync/nuxt/src/*']
+});
 ```
 
 <!-- Badges -->
+
 [npm-version-src]: https://img.shields.io/npm/v/@powersync/nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/@powersync/nuxt
-
 [npm-downloads-src]: https://img.shields.io/npm/dm/@powersync/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-downloads-href]: https://npmjs.com/package/@powersync/nuxt
-
 [license-src]: https://img.shields.io/npm/l/@powersync/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
 [license-href]: https://npmjs.com/package/@powersync/nuxt
-
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "powersync-nuxt",
   "configKey": "powersync",
-  "version": "0.0.0-dev-20260128023420",
+  "version": "0.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -100,7 +100,12 @@ const module$1 = defineNuxtModule({
         "usePowerSyncWatchedQuery",
         "useQuery",
         "useStatus",
-        "useWatchedQuerySubscription"
+        "useWatchedQuerySubscription",
+        "useSyncStream",
+        {
+          name: "AdditionalOptions",
+          type: true
+        }
       ],
       "@powersync/vue"
     );

package/dist/runtime/components/SyncStatusTab.vue

@@ -95,68 +95,22 @@
 
       <span border="b" border-color="gray-100" />
 
-      <NSectionBlock icon="carbon:data-volume" text="Data Size">
-        <NTip v-if="!isDiagnosticSchemaSetup" n="red6 dark:red5" icon="carbon:warning-alt">
-          Make sure to extend your schema with the diagnostics schema using the `diagnosticsSchema` from the
-          `usePowerSyncInspector` composable.
-        </NTip>
-        <div v-else grid="~ cols-5 gap-4" mb="4">
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Buckets Synced</span>
-            <span text="sm"> {{ totals?.buckets }} </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Rows Synced</span>
-            <span text="sm"> {{ totals?.row_count }} </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Data size</span>
-            <span text="sm">
-              {{ totals?.data_size }}
-            </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Metadata size</span>
-            <span text="sm">
-              {{ totals?.metadata_size }}
-            </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Download size</span>
-            <span text="sm">
-              {{ totals?.download_size }}
-            </span>
-          </div>
-        </div>
-      </NSectionBlock>
-
-      <span border="b" border-color="gray-100" />
-
-      <NSectionBlock icon="carbon:data-share" text="Operations">
-        <NTip v-if="!isDiagnosticSchemaSetup" n="red6 dark:red5" icon="carbon:warning-alt">
-          Make sure to extend your schema with the diagnostics schema using the `diagnosticsSchema` from the
-          `usePowerSyncInspector` composable.
-        </NTip>
-        <div v-else grid="~ cols-2 gap-4" mb="4">
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Total operations</span>
-            <span text="sm">
-              {{ totals?.total_operations }}
-            </span>
+      <template v-for="(section, index) in metricSections" :key="section.text">
+        <NSectionBlock :icon="section.icon" :text="section.text">
+          <NTip v-if="!isDiagnosticSchemaSetup" n="red6 dark:red5" icon="carbon:warning-alt">
+            Make sure to extend your schema with the diagnostics schema using the `diagnosticsSchema` from the
+            `usePowerSyncInspector` composable.
+          </NTip>
+          <div v-else :grid="`~ cols-${section.cols} gap-4`" mb="4">
+            <div v-for="metric in section.metrics" :key="metric.label" flex="~ col gap-2">
+              <span text="sm gray-500">{{ metric.label }}</span>
+              <span text="sm">{{ metric.value }}</span>
+            </div>
           </div>
+        </NSectionBlock>
 
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Downloaded operations</span>
-            <span text="sm">
-              {{ totals?.downloaded_operations }}
-            </span>
-          </div>
-        </div>
-      </NSectionBlock>
+        <span v-if="index < metricSections.length - 1" border="b" border-color="gray-100" />
+      </template>
 
       <span border="b" border-color="gray-100" />
     </div>
@@ -165,7 +119,7 @@
 
 <script setup>
 import { usePowerSyncInspectorDiagnostics } from "#imports";
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 const {
   db,
   isDiagnosticSchemaSetup,
@@ -178,7 +132,30 @@ const {
   uploadQueueSize,
   totals
 } = usePowerSyncInspectorDiagnostics();
+const metricSections = computed(() => [
+  {
+    icon: "carbon:data-volume",
+    text: "Data Size",
+    cols: 5,
+    metrics: [
+      { label: "Buckets Synced", value: totals.value?.buckets },
+      { label: "Rows Synced", value: totals.value?.row_count },
+      { label: "Data size", value: totals.value?.data_size },
+      { label: "Metadata size", value: totals.value?.metadata_size },
+      { label: "Download size", value: totals.value?.download_size }
+    ]
+  },
+  {
+    icon: "carbon:data-share",
+    text: "Operations",
+    cols: 2,
+    metrics: [
+      { label: "Total operations", value: totals.value?.total_operations },
+      { label: "Downloaded operations", value: totals.value?.downloaded_operations }
+    ]
+  }
+]);
 onMounted(async () => {
-  await db.value?.waitForFirstSync();
+  await db?.value?.waitForFirstSync();
 });
 </script>

package/dist/runtime/utils/RecordingStorageAdapter.js

@@ -4,10 +4,7 @@ export class RecordingStorageAdapter extends SqliteBucketStorage {
   schemaManager;
   tables = {};
   constructor(db, schemaManager) {
-    super(
-      db.value.database,
-      AbstractPowerSyncDatabase.transactionMutex
-    );
+    super(db.value.database, AbstractPowerSyncDatabase.transactionMutex);
     this.rdb = db.value.database;
     this.schemaManager = schemaManager.value;
   }

package/dist/runtime/utils/addImportsFrom.d.ts

@@ -1 +1,6 @@
-export declare const addImportsFrom: (names: string[], from: string) => void;
+interface ImportDefinition {
+    name: string;
+    type: boolean;
+}
+export declare const addImportsFrom: (names: (string | ImportDefinition)[], from: string) => void;
+export {};

package/dist/runtime/utils/addImportsFrom.js

@@ -1,4 +1,10 @@
 import { addImports } from "@nuxt/kit";
 export const addImportsFrom = (names, from) => {
-  addImports(names.map((name) => ({ name, from })));
+  addImports(
+    names.map((name) => ({
+      name: typeof name === "string" ? name : name.name,
+      type: typeof name === "string" ? false : name.type,
+      from
+    }))
+  );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powersync/nuxt",
-  "version": "0.0.0-dev-20260216124709",
+  "version": "0.0.0-dev-20260305092446",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -52,9 +52,9 @@
   },
   "peerDependencies": {
     "@journeyapps/wa-sqlite": "^1.2.6",
-    "@powersync/kysely-driver": "0.0.0-dev-20260216124709",
-    "@powersync/vue": "0.0.0-dev-20260216124709",
-    "@powersync/web": "0.0.0-dev-20260216124709"
+    "@powersync/kysely-driver": "1.3.3",
+    "@powersync/vue": "0.5.0",
+    "@powersync/web": "0.0.0-dev-20260305092446"
   },
   "peerDependenciesMeta": {
     "@powersync/kysely-driver": {
@@ -73,9 +73,9 @@
     "vitest": "^3.2.4",
     "vue": "^3.5.20",
     "vue-tsc": "^3.0.8",
-    "@powersync/kysely-driver": "0.0.0-dev-20260216124709",
-    "@powersync/vue": "0.0.0-dev-20260216124709",
-    "@powersync/web": "0.0.0-dev-20260216124709"
+    "@powersync/kysely-driver": "1.3.3",
+    "@powersync/vue": "0.5.0",
+    "@powersync/web": "0.0.0-dev-20260305092446"
   },
   "scripts": {
     "prebuild": "nuxt-module-build prepare",