PowerSync Nuxt

Powersync Nuxt module integrated with the Nuxt Devtools.

• ✨  Release Notes
• 📖  Documentation

Features

• 🔍 Built-in Diagnostics
• 🗄️ Data Inspection
• ⚡ Useful Composables

Quick Setup

1. Add powersync-nuxt dependency to your project

# Using pnpm
pnpm add -D powersync-nuxt @iconify-json/carbon

# Using yarn
yarn add --dev powersync-nuxt @iconify-json/carbon

# Using npm
npm install --save-dev powersync-nuxt @iconify-json/carbon

2. Add powersync-nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'powersync-nuxt'
  ],
  powersync: {
    defaultConnectionParams: {
      // the connection params you want to share with the inspector
    },
  },
})

Check the Getting Started guide for more details.

Documentation

• Getting Started
• API
• Features

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with playground, with devtools client ui
npm run dev

# Develop with playground, with bundled client ui
npm run play:prod

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Local Testing

If the playground is not enough for you, you can test the module locally by cloning this repo and pointing the nuxt app you want to test to the local module.

don't forget to add a watcher for the module for hot reloading.

example (in your nuxt app):

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: ["../../my-location/powersync-nuxt/src/*"],
  watch: ["../../my-location/powersync-nuxt/src/*"],
});