Skip to content
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions client-sdk-references/javascript-web/javascript-spa-frameworks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
description: "Compatibility with SPA frameworks"
---

The PowerSync [JavaScript Web SDK](../javascript-web) is compatible with popular Single-Page Application (SPA) frameworks like React, Vue, Angular, and Svelte.
The PowerSync [JavaScript Web SDK](../javascript-web) is compatible with popular Single-Page Application (SPA) frameworks like React, Vue, Angular, Svelte, and Nuxt.

For [React](#react-hooks) and [Vue](#vue-composables) specifically, wrapper packages are available to support reactivity and live queries, making it easier for developers to leverage PowerSync's features.

Expand All @@ -17,9 +17,9 @@

* For more advanced scenarios, such as query caching and pagination, [TanStack Query](#tanstack-query) is a powerful solution. The [`@powersync/tanstack-react-query`](#tanstack-query) package extends the `useQuery` hook from `@powersync/react` and adds functionality from [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview), making it a better fit for advanced use cases or performance-optimized apps.

* For reactive data management and live query support across multiple frameworks, consider [TanStack DB](#tanstack-db). PowerSync works with all TanStack DB framework adapters (React, Vue, Solid, Svelte, Angular).
* If you have a Vue app or a Nuxt app, you can use [`@powersync/vue`](#vue-composables) or [`@powersync/nuxt`](#nuxt) respectively.

If you have a Vue app, use the Vue-specific package: [`@powersync/vue`](#vue-composables).
* For reactive data management and live query support across multiple frameworks, consider [TanStack DB](#tanstack-db). PowerSync works with all TanStack DB framework adapters (React, Vue, Solid, Svelte, Angular).

## React Hooks

Expand Down Expand Up @@ -89,11 +89,11 @@

### TanStack DB

[TanStack DB](https://tanstack.com/db/latest/docs/collections/powersync-collection) is a reactive client store that provides blazing-fast in-memory queries, optimistic updates, and cross-collection queries. When combined with PowerSync, you get the best of both worlds: TanStack DB's powerful query capabilities with PowerSync's battle-tested offline-first and multi-tab capable sync engine.

Check warning on line 92 in client-sdk-references/javascript-web/javascript-spa-frameworks.mdx

View check run for this annotation

Mintlify / Mintlify Validation (powersync) - vale-spellcheck

client-sdk-references/javascript-web/javascript-spa-frameworks.mdx#L92

Did you really mean 'DB's'?

**TanStack DB Features:**

* **Blazing Fast In-Memory Queries**: Built on differential data flow, TanStack DB's live queries update incrementally (rather than re-running entire queries), making queries incredibly fast, even for complex queries across multiple collections.

Check warning on line 96 in client-sdk-references/javascript-web/javascript-spa-frameworks.mdx

View check run for this annotation

Mintlify / Mintlify Validation (powersync) - vale-spellcheck

client-sdk-references/javascript-web/javascript-spa-frameworks.mdx#L96

Did you really mean 'DB's'?

* **Reactive Data Flow**: Live queries automatically update when underlying data changes, triggering component re-renders only when necessary.

Expand Down Expand Up @@ -133,4 +133,26 @@

The full API Reference and example code can be found here:

<Card title="Vue composables for PowerSync | PowerSync JavaScript SDK Docs" icon="book" href="https://powersync-ja.github.io/powersync-js/vue-sdk" horizontal />
<Card title="Vue composables for PowerSync | PowerSync JavaScript SDK Docs" icon="book" href="https://powersync-ja.github.io/powersync-js/vue-sdk" horizontal />

## Nuxt

<Card title="npm: @powersync/nuxt" icon="npm" href="https://www.npmjs.com/package/@powersync/nuxt" horizontal />

The `@powersync/nuxt` package is a Nuxt module that provides PowerSync integration for Nuxt applications. It automatically exposes all [`@powersync/vue`](#vue-composables) composables.

Key features include:

* **All Vue composables available**: Access to `useQuery`, `useStatus`, `usePowerSyncWatchedQuery`, and all other composables from `@powersync/vue`.

* **Built-in diagnostics**: Direct access to your PowerSync client and local SQLite diagnostics through the PowerSync Inspector.

* **Kysely ORM support**: Use the `usePowerSyncKysely()` composable for type-safe database queries with Kysely.

Check warning on line 150 in client-sdk-references/javascript-web/javascript-spa-frameworks.mdx

View check run for this annotation

Mintlify / Mintlify Validation (powersync) - vale-spellcheck

client-sdk-references/javascript-web/javascript-spa-frameworks.mdx#L150

Did you really mean 'composable'?

<Info>
For advanced watch query features like incremental updates and differential results for Nuxt, see [Live Queries / Watch Queries](/usage/use-case-examples/watch-queries).
</Info>

The full API Reference and example code can be found here:

<Card title="Nuxt module for PowerSync" icon="book" href="https://github.com/powersync-ja/powersync-js/tree/main/packages/nuxt" horizontal />