# Installation

Based on [PrimeVue's installation guide](https://primevue.org/vite).

Download

```shell
npm install @loophq/sonik
```

## Plugin

PrimeVue plugin is required to be installed as an application plugin to set up the default [configuration](https://primevue.org/configuration). The plugin is lightweight, and only utilized for configuration purposes.

```ts
import { createApp } from 'vue'
import { SonikConfig } from '@loophq/sonik'

const app = createApp(App)

app.use(SonikConfig)
```

## Theme

Configure PrimeVue to use a theme.

```ts
import { createApp } from 'vue'
import { LoopAdminTheme, SonikConfig } from '@loophq/sonik'

const app = createApp(App)

app.use(SonikConfig, {
  theme: {
    preset: LoopAdminTheme,
    options: {
      darkModeSelector: false,
    },
  },
})
```

It is recommended to keep all Sonik integration in one place. See [example in mx-frontend](https://gitlab.com/loopreturns/applications/mx-frontend/-/tree/main/src/integrations/sonik.ts).

## Verify

Verify your setup by adding a component such as [Datatable](https://primevue.org/datatable). Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.

```vue
<script setup lang="ts">
import { Column, DataTable } from '@loophq/sonik/datatable'

const fields = [
  { id: 'id', name: 'ID' },
  { id: 'name', name: 'Name' },
]
const data = [
  { id: 1, name: 'name1' },
  { id: 2, name: 'name2' },
]
</script>

<template>
  <DataTable :value="data">
    <Column v-for="col of fields" :key="col.id" :field="col.id" :header="col.name" />
  </DataTable>
</template>
```