# Getting Started

This package is abandoned. Premium version is now available publicly for both vue2 and vue 3

\> npm install vue-tables-2-premium

OR (see

[here](https://2221522102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7sYHptVdDcwClGe4CEQW%2Fuploads%2FCo9ribT34Gfbwhem3kSe%2Fvue%20version%203?alt=media)

instruction for vue 3)

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

**Register the component(s)**

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

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

The above code is only for the purpose of documentation. The actual code would look something like this:

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

* `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.

If you are using `vue-router` or simply toggling the table with `v-if set the preserveState`option to`true`

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

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

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

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.

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:

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

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

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://ryunosukee.gitbook.io/vue3-datatables/getting-started-1.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.