# Vue

> Vue 컴포넌트로 82chart 쓰기.

Source: https://82chart.com/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: ['1월', '2월', '3월', '4월', '5월', '6월'],
  series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
const options = { title: '월별 매출', unit: '원' };
</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` 는 깊이 지켜보므로 배열 안 값을 바꿔도 다시 그립니다.
- `@ready` 로 차트 인스턴스를 받아 `toPNG()` 같은 메서드를 부릅니다.
- Nuxt 에서는 `<ClientOnly>` 로 감싸세요.