# Getting Started

{% hint style="danger" %}
This package is abandoned. Premium version is now available publicly for both vue2 and vue 3
{% endhint %}

```
npm install vue-tables-2
```

OR

```bash
> npm install vue-tables-2-premium  
```

OR (see [here](/vue-tables-2/installation/vue-version-3.md) instruction for vue 3)

```
npm install v-tables-3    
```

Require the script:

```javascript
import {ServerTable, ClientTable, Event} from 'vue-tables-2';
```

#### Register the component(s)

```javascript
Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]);
```

Or/And:

```javascript
Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]);
```

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

`Vue.use(ServerTable, {}, false, 'bootstrap4')`
{% endhint %}

* `options` see [here](/vue-tables-2/options-api.md)
* `useVuex` is a boolean indicating whether to use `vuex` for state management, or manage state on the component itself. If you set it to `true` you **must** add a `name` prop to your table, which will be used to register a module on your store. Use `vue-devtools` to look under the hood and see the current state.

{% hint style="info" %}
If you are using `vue-router` or simply toggling the table with `v-if set the preserveState`option to`true`
{% endhint %}

* `theme` Use this option to select a CSS framework. Options:
  * bootstrap3
  * bootstrap4
  * bulma
  * tailwind (on premium versions) 

You can also pass you own theme. Use a file from the `themes` folder as boilerplate:

```javascript
Vue.use(ServerTable, [options = {}], [useVuex = false], require('./my-theme')())
```

* `swappables` See [Custom Template](/vue-tables-2/custom-template.md)

{% hint style="info" %}
You may need to add a little styling of your own. 
If you come up with some improvments to the templates or themes, which brings them closer to the optimum, you are welcome to send a PR.
{% endhint %}

#### Using a Script Tag

If you are not using NPM you can also import the minified version found in `dist/vue-tables-2.min.js`. Copy the file into your project and import it:

```markup
<script src="/path/to/vue-tables-2.min.js"></script>
```

Or, if you prefer, use the [CDN version](https://www.jsdelivr.com/package/npm/vue-tables-2?path=dist).

This will expose a global `VueTables` object containing `ClientTable`, `ServerTable` and `Event` as properties.

E.g:

```javascript
Vue.use(VueTables.ClientTable);
```


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.