# Vue

> Use 82chart as a Vue component.

Source: https://82chart.com/en/docs/vue/

```sh
npm i @82chart/core @82chart/vue
```

```html
<script setup>
import { Chart82 } from '@82chart/vue';
import '@82chart/core/styles.css';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
const options = { title: 'Monthly sales', prefix: '₩' };
</script>

<template>
  <Chart82 type="bar" :data="data" :options="options" @click="(p) => console.log(p)" />
</template>
```

- `<Chart82 :type :data :options :theme @click @ready />` (Vue 3).
- `data` is watched deeply, so changing values inside the arrays redraws.
- Take the chart instance from `@ready` to call methods such as `toPNG()`.
- In Nuxt, wrap it in `<ClientOnly>`.