zero-vue

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions][github-actions-src]][github-actions-href]
[![Codecov][codecov-src]][codecov-href]

> Vue bindings for Zero

Usage

Install package:

``sh

`npm`


npm install zero-vue
pnpm

pnpm install zero-vue

Creating useZero and useQuerycomposables:`ts import { createZeroComposables } 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 } = createZeroComposables({ userID, server: import.meta.env.VITE_PUBLIC_SERVER, schema, mutators, kvStore: 'mem', })

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

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

To query data:`js import { useQuery, useZero } from './use-zero.ts'

const zero = useZero() const { data: users } = useQuery(() => zero.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 usingcorepack enable- Install dependencies usingpnpm install- Run interactive tests usingpnpm 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.

[npm-version-src]: https://img.shields.io/npm/v/zero-vue?style=flat-square
[npm-version-href]: https://npmjs.com/package/zero-vue
[npm-downloads-src]: https://img.shields.io/npm/dm/zero-vue?style=flat-square
[npm-downloads-href]: https://npm.chart.dev/zero-vue
[github-actions-src]: https://img.shields.io/github/actions/workflow/status/danielroe/zero-vue/ci.yml?branch=main&style=flat-square
[github-actions-href]: https://github.com/danielroe/zero-vue/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/gh/danielroe/zero-vue/main?style=flat-square
[codecov-href]: https://codecov.io/gh/danielroe/zero-vue

npm

npm install zero-vue

pnpm

pnpm install zero-vue

Creating useZero and useQuery

 composables:

ts
import { createZeroComposables } 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 } = createZeroComposables({
  userID,
  server: import.meta.env.VITE_PUBLIC_SERVER,
  schema,
  mutators,
  kvStore: 'mem',
})

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

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

To query data:

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

const zero = useZero()
const { data: users } = useQuery(() => zero.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.

License

Made with ❤️

Published under MIT License.