# 在 Vue 中使用

URL: https://caijiao.org/chartjs/08-framework/01-vue
Source: docs/chartjs/08-framework/01-vue.md
Description: 介绍如何在 Vue 框架中集成并使用 Chart.js，使用 Vue 组件方式渲染图表，实现响应式数据绑定和生命周期管理。

在现代前端开发中，Vue 是常用的框架。可以在 Vue 组件内引入 [Chart.js](/chartjs/)，并通过响应式数据驱动图表更新，充分利用 Vue 的生命周期钩子管理图表实例。

下面示例展示一个简单的 Vue 3 组件，使用 `onMounted` 创建图表，`ref` 管理 canvas 元素。

```vue
<template>
  <canvas ref="chartRef" width="600" height="400"></canvas>
</template>


```

[在线代码演示](/chartjs/demos/27.html)