zero-vue

Vue bindings for Zero

Usage

Install package:

# npm
npm install zero-vue

# pnpm
pnpm install zero-vue

Creating useZero and useQuery composables:

import { createZero } from 'zero-vue'
import { mutators } from './mutators.ts'
import { schema } from './schema.ts'

// see docs for all options: https://zero.rocicorp.dev/docs/introduction
const { useZero, useQuery } = createZero({
  userID,
  server: import.meta.env.VITE_PUBLIC_SERVER,
  schema,
  mutators,
  kvStore: 'mem',
})

// OR with computed options:
const { useZero, useQuery } = createZero(() => ({
  userID: userID.value,
  server: import.meta.env.VITE_PUBLIC_SERVER,
  schema,
  mutators,
  kvStore: 'mem',
}))

// OR with a Zero instance:
const { useZero, useQuery } = createZero({
  zero: new Zero({
    userID,
    server: import.meta.env.VITE_PUBLIC_SERVER,
    schema,
    mutators,
    kvStore: 'mem',
  }),
})

To query data:

import { useQuery, useZero } from './use-zero.ts'

const z = useZero()
const { data: users } = useQuery(() => z.value.query.user)

Tip

See the playground for a full working example based on rocicorp/hello-zero, or check out danielroe/hello-zero-nuxt to see how to set things up with Nuxt.

💻 Development

• Clone this repository
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

Credits

The implementation here was based on zero-solid. You can also check out hello-zero-nuxt to see the original implementation and history of this project.

License

Made with ❤️

Published under MIT License.