# 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](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3) 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](https://matanya.gitbook.io/vue-tables-2/options-api)
* `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](https://matanya.gitbook.io/vue-tables-2/custom-template)

{% 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);
```