This project is a simple demo of PowerSync with Vue as a frontend and Postgres as a backend. It uses Docker to run the backend and the database. The goal is to demonstrate how to use PowerSync with Vue and Postgres. It is self-hosted version of PowerSync using Docker Compose.
It is based (BASE PROJECT) on https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs repository which is a great starting point for self-hosting PowerSync. Where we have PowerSync + Postgres + Node.js backend and React frontend.
In this project we replaced the React frontend with a Vue 3 frontend (Composition API + TypeScript + Vite) and left the Node.js backend as it is. PowerSync and Postgres remain unchanged. The same functionality is preserved — todo lists with CRUD operations, sync status indicators, and an SQL console.
- Frontend: Vue 3 + Composition API + TypeScript + Vite
- Backend: Node.js (unchanged from base project)
- Database: PostgreSQL
- Sync: PowerSync (self-hosted via Docker)
- PowerSync SDK:
@powersync/vue+@powersync/web
The .env file contains default configuration for the services. Reference this to connect to any services locally.
This demo can be started by running the following in the demos/nodejs directory:
docker compose upor from the root directory:
docker compose -f demos/nodejs/docker-compose.yaml upThe frontend can be accessed at http://localhost:3030 in a browser.
To develop the frontend without Docker:
cd demos/nodejs/demo-app
cp .env.template .env.local
# Edit .env.local with your backend/PowerSync URLs
pnpm install
pnpm devOpen http://localhost:5173 in your browser.
We used https://github.com/powersync-ja/powersync-js/tree/main/demos/vue-supabase-todolist as a reference for the Vue frontend. The Supabase backend was replaced with the Node.js backend from the base project. The same API endpoints are used.
The setup.sql script only runs on the first initialization of the container. Delete the container and volumes if making changes:
docker compose down -v