Nuxt Integration for PowerSync (Alpha)

PowerSync now has first-class support for Nuxt. The @powersync/nuxt module wires PowerSync into the Nuxt lifecycle and gives you auto-imported composables, built-in diagnostics, and optional Kysely for type-safe queries — so your Nuxt app can work offline and stay in sync in real time.

What this integration adds

• 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.

Getting started

Install the module:

npm install @powersync/nuxt

# or pnpm: install peer dependencies explicitly
pnpm add @powersync/nuxt @powersync/vue @powersync/web

Register it in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@powersync/nuxt'],
  vite: {
    optimizeDeps: { exclude: ['@powersync/web'] },
    worker: { format: 'es' }
  }
})

For the full setup see the Nuxt integration docs.

For a working end-to-end example, see the Nuxt + Supabase To-Do List demo.

Compatibility: Nuxt 4 is supported. Nuxt 3 is currently untested, so your mileage may vary.

Sync Streams support

Nuxt/Vue is also compatible with the beta version of Sync Streams via the useSyncStream composable, which automatically subscribes to the stream when a component mounts and unsubscribes when it unmounts. See the Client-Side Usage docs for an example.

Alpha status

@powersync/nuxt is in an Alpha release. It is not production-ready; APIs may change and breaking changes can occur without notice. We're releasing it to gather feedback and iterate from here.

Known issue

The PowerSync Inspector uses unocss as a transitive dependency, which can conflict with Tailwind CSS. To resolve this, disable UnoCSS auto-import in nuxt.config.ts.

Feedback and help

Try it out and let us know what you think. Report bugs or open issues on GitHub, or share feedback in our Discord community.