@powersync/nuxt 0.0.1 → 0.0.3

package/README.md

@@ -5,6 +5,11 @@
   <p>Effortless offline-first development with PowerSync integration for Nuxt applications.</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]
@@ -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.1",
+  "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/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.1",
+  "version": "0.0.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -52,9 +52,9 @@
   },
   "peerDependencies": {
     "@journeyapps/wa-sqlite": "^1.2.6",
-    "@powersync/kysely-driver": "1.3.3",
-    "@powersync/vue": "0.4.2",
-    "@powersync/web": "1.34.0"
+    "@powersync/kysely-driver": "^1.3.3",
+    "@powersync/vue": "^0.5.0",
+    "@powersync/web": "^1.34.0"
   },
   "peerDependenciesMeta": {
     "@powersync/kysely-driver": {
@@ -75,7 +75,7 @@
     "vue-tsc": "^3.0.8",
     "@powersync/kysely-driver": "1.3.3",
     "@powersync/web": "1.34.0",
-    "@powersync/vue": "0.4.2"
+    "@powersync/vue": "0.5.0"
   },
   "scripts": {
     "prebuild": "nuxt-module-build prepare",