Zynq

Appearance

Vue integration ​

The @zynq/vue package connects @zynq/core to Vue 3 and Vue Router. It provides a composable and an adapter so your component state stays in sync with the URL.

Requirements ​

  • Vue 3
  • Vue Router 4+

Installation ​

bash
pnpm add @zynq/vue

@zynq/core is included as a dependency; you don't need to install it separately.

useZynq(schema) ​

Use the composable in any component that runs inside the Vue Router app:

ts
import { useZynq, s } from '@zynq/vue'

const schema = {
  page: s.number(1),
  search: s.string(''),
  active: s.boolean(false),
}

const { state } = useZynq(schema)
  • state — A reactive object whose keys match the schema. Type is inferred from the schema.
  • Changing state (e.g. state.page = 2) updates the URL (by default with replace).
  • Changing the URL (back/forward, or opening a link with query params) updates state.

You can use state in templates and composables like any other reactive ref/object.

VueRouterAdapter ​

The Vue integration uses an adapter that implements the core Router interface:

ts
import { VueRouterAdapter } from '@zynq/vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const adapter = new VueRouterAdapter(router, route)

useZynq builds this adapter internally from useRouter() and useRoute(), so you usually don’t need to create it yourself. Use the adapter only if you are wiring ZynqEngine manually (e.g. in a store or custom composable).

Re-export from @zynq/core ​

For convenience, @zynq/vue re-exports the schema builder and types:

ts
import { useZynq, s } from '@zynq/vue'
import type { Schema, InferState } from '@zynq/vue'

So you can depend only on @zynq/vue in Vue apps if you prefer.

Example ​

vue
<script setup lang="ts">
import { useZynq, s } from '@zynq/vue'

const schema = {
  page: s.number(1),
  q: s.string(''),
}

const { state } = useZynq(schema)
</script>

<template>
  <div>
    <input v-model="state.q" placeholder="Search" />
    <p>Page: {{ state.page }}</p>
    <button @click="state.page -= 1">Prev</button>
    <button @click="state.page += 1">Next</button>
  </div>
</template>

When the user types in the input or clicks Prev/Next, the URL updates. When they use back/forward or open a link with ?page=2&q=foo, state updates accordingly.

Next steps ​