Zero integration for Astro applications.
Installation
# Using npm npm install zero-astro # Using yarn yarn add zero-astro # Using pnpm pnpm add zero-astro # Using astro cli npx astro add zero-astro
Setup
Configure Astro to use zero-astro:
// astro.config.mjs import { defineConfig } from 'astro/config'; import zeroAstro from 'zero-astro'; export default defineConfig({ integrations: [zeroAstro({ projectId: 'your-project-id' })], output: 'server' });
Usage
Get a Zero client instance:
import { getZeroClient, QueryView } from 'zero-astro'; const zero = await getZeroClient({ publicServer: import.meta.env.PUBLIC_SERVER || '', // ...any other config... }); window.__ZERO_CLIENT__ = zero; // Create a materialized query view const view = zero.query.table.materialize(); const queryView = new QueryView(view); // Subscribe to updates const unsubscribe = queryView.addListener((data, resultType) => { if (resultType === 'complete') { // handle updates console.log('Data updated:', data); } }); // Cleanup on unmount window.addEventListener('unload', () => { unsubscribe(); queryView.destroy(); }); // Mutate data with type safety: await zero.mutate.table.insert({ id: crypto.randomUUID(), // ...your data });
Additional Resources
See the examples for a complete reference on integrating Zero with Astro.