> For the complete documentation index, see [llms.txt](https://matanya.gitbook.io/vue-tables-2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3.md).

# Vue Version 3

{% hint style="warning" %}
While the migrated package has been tested, this is still an alpha version.
{% endhint %}

Install the `vue3` branch:

```bash
> npm install v-tables-3    
```

Require scripts:

```javascript
import {ServerTable, ClientTable, EventBus} from 'v-tables-3';
```

Initialize app:

```javascript
import { createApp } from 'vue'

const app = createApp(App)
```

Register component(s):

```javascript
app.use(ClientTable, [options = {}], [theme = 'bootstrap3'], [swappables = {}],[themeOverride = {}])
// AND / OR
app.use(ServerTable, [options = {}], [theme = 'bootstrap3'], [swappables = {}],[themeOverride = {}])
```

{% hint style="warning" %}
The above code is only for the purpose of documentation. The actual code would look something like this:

`app.use(ServerTable, {}, 'bootstrap4')`

Note that the `useVuex` option was removed
{% endhint %}

{% hint style="info" %}
The new \`themeOverride\` parameter allows you to customize the existing theme (for reference theme files are located under lib/themes)
{% endhint %}

### Breaking Changes

There are almost no breaking changes, so in case you are migrating for v2, you can continue using your old code base with the following in mind:

1. The event bus now uses the [`mitt`](https://www.npmjs.com/package/mitt) package: a. to avoid naming collisions the import is now `EventBus`. instead of `Event`. b. Instead of `Event.$on`, use `EventBus.on` c. instead of `Event.$emit` use `EventBus.emit`
2. `Vuex` option was removed. See above.
3. When using a [custom template](/vue-tables-2/custom-template.md) refer to the `templates` folder of the premium package, as there are some minor changes
4. When using a custom template use \`markRaw\`, e.g:

```javascript
import {markRaw} from 'vue'

Vue.use(ClientTable, {}, 'bootstrap4',{
   genericFilter: markRaw(MyGenericFilter)
}
```

1. [Editable cells](/vue-tables-2/client-table/editable-cells.md): due to changes in v-model behavior use the following syntax instead (add an \`input\` event listener and assign the payload to your data property):

```markup
<v-client-table :columns="columns" :data="data" @input="e=>data=e"></v-client-table>
```

Be sure to also change the format of the cell template to accord with Vue 3 syntax. E.g:

```markup
<template v-slot:text="{row,update}">
   <input type="text" v-model="row.text" @update:modelValue="update">
</template>
```

### Known Warnings

During development Vue will issue some warnings, which you can safely ignore. They will not be displayed on the production build.

Expect to see the following warning in the console while developing:

1. Vue 3 expects you to define emitted events in advance. This is not possible for dynamic event names, such as `filter::[columnName].` For example:

`Component emitted event "filter::id" but it is neither declared in the emits option nor as an "onFilter::id" prop.`


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.