---
url: /guides/vue.md
---

# Using SignalDB with Vue

This guide will walk you through integrating SignalDB into a Vue project. You’ll learn how to set up collections and use SignalDB with Vue's reactivity system to manage and display data.

## Prerequisites

Before you start, make sure you have a basic understanding of Vue and have a Vue project ready. If you’re not familiar with Vue, you can follow the [Vue Getting Started](https://vuejs.org/guide/introduction.html) guide.

Familiarity with signal-based reactivity is also useful. For more information, you can review the [Core Concepts](/core-concepts/#signals-and-reactivity) page and the [Vue Documentation](https://vuejs.org/api/reactivity-core.html) to grasp how reactivity works.

## Installation

First, you need to add SignalDB to your project. Run the following command in your terminal:

```bash
npm install @signaldb/core
```

Additionally, you will need the Vue-specific reactivity adapter for SignalDB:

```bash
npm install @signaldb/vue
```

## Setting Up SignalDB

After installing SignalDB, set up your collections and configure the reactivity adapter for Vue. Here's an example of how to define a `Posts` collection:

```vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { Collection } from '@signaldb/core'
import vueReactivityAdapter from '@signaldb/vue'

const Posts = new Collection({
  reactivity: vueReactivityAdapter,
})

const items = ref([])
watchEffect((onCleanup) => {
  const cursor = Posts.find()
  items.value = cursor.fetch()
  onCleanup(() => cursor.cleanup())
})

function addPost() {
  Posts.insert({ title: 'Hello', author: 'World' })
}
</script>
```

In this code, we create a `Posts` collection using the Vue reactivity adapter. The `items` array is kept in sync with the collection using `watchEffect`.

::: info
The API of Vue doesn't allow [automatic cleanup](/reference/core/createreactivityadapter/#ondispose-callback-void-dependency-dependency-optional) nor [reactive scope checking](/reference/core/createreactivityadapter/#isinscope-dependency-dependency-boolean-optional).
In Vue, the function passed to the `watchEffect()` function gets a `onCleanup` callback that can be used to cleanup the effect. You have to use this to cleanup the cursor manually (see example above).

You also must manually disable reactivity when making calls outside your `watchEffect()` function to avoid memory leaks. You can do this by passing `{ reactive: false }` to your options (e.g. `<collection>.find({ ... }, { reactive: false })`).
:::

## Building a Vue Component

Now, let’s build a Vue component that lists posts and allows you to add new ones:

```vue
<template>
  <div class="about">
    <button @click="addPost">
      Add Post
    </button>
    <ul>
      <li v-for="{ id, title, author } in items" :key="id">
        {{ title }} - {{ author }}
      </li>
    </ul>
  </div>
</template>
```

### Breakdown:

1. **Reactivity Setup**: The `Posts` collection is set up with `vueReactivityAdapter` to enable Vue's reactivity system.
2. **Reactive Data**: The `items` array is updated reactively using `watchEffect`, ensuring that changes in the `Posts` collection are reflected in the component.
3. **User Interaction**: The `addPost` function adds a new post to the `Posts` collection, and clicking the button triggers this function.
4. **Rendering**: The template uses Vue's `v-for` directive to display each post from the `items` array.

## Conclusion

You have successfully integrated SignalDB into a Vue project and created a reactive component to manage and display posts. This setup allows you to take advantage of SignalDB’s reactivity and Vue's capabilities to build dynamic and responsive applications.

## Next Steps

Now that you’ve learned how to use SignalDB in Vue, you maybe want to explore the possibilities how you can synchronize the data with your backend.
Take a look at the [Synchronization Overview](/sync/) to get started