> For the complete documentation index, see [llms.txt](https://ryunosukee.gitbook.io/vue3-datatables/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ryunosukee.gitbook.io/vue3-datatables/getting-started-1.md).

# 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);