> ## Documentation Index
> Fetch the complete documentation index at: https://docs.powersync.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue Composables

> Use PowerSync Vue composables including useQuery and useStatus to build reactive components with live query results.

The [`powersync/vue`](https://www.npmjs.com/package/@powersync/vue) package is a Vue-specific wrapper for PowerSync. It provides Vue [composables](https://vuejs.org/guide/reusability/composables) that are designed to support reactivity, and can be used to automatically re-render components when query results update or to access PowerSync connectivity status changes.

<Card title="npm: @powersync/vue" icon="npm" href="https://www.npmjs.com/package/@powersync/vue" horizontal />

The main hooks available are:

* `useQuery`: This allows you to access the results of a watched query. The response includes `isLoading`, `isFetching` and `error` properties.

* `useStatus`: Access the PowerSync connectivity status. This can be used to update the UI based on whether the client is connected or not.

<Note>
  For advanced watch query features like incremental updates and differential results for Vue Hooks, see [Live Queries / Watch Queries](/client-sdks/watch-queries).
</Note>

The full API Reference and example code can be found here:

<Card title="Vue composables for PowerSync | PowerSync JavaScript SDK Docs" icon="book" href="https://powersync-ja.github.io/powersync-js/vue-sdk" horizontal />