# @grafana/vue

Grafana Vue **单一入口包**：Dashboard 嵌入、面板、数据源、UI、runtime。

`public/app` 与外部宿主请只依赖本包。

## 安装

```bash
pnpm add @grafana/vue vue pinia
```

## 快速开始

```ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { DashboardViewer } from '@grafana/vue';
import { bootstrapGrafanaVue } from '@grafana/vue/register';

// Registers core plugins, kicks off heavy plugins, BootData, theme, backend mode.
// Optional datasources: same uid merges, different uids combine.
bootstrapGrafanaVue({
  datasources: [
    // host-owned Zabbix / SigNoz / etc. (do not ship secrets in the package)
  ],
});
```

```vue
<template>
  <DashboardViewer
    :dashboard="dashboardJson"
    :datasources="datasources"
    theme="dark"
  />
</template>
```

## 入口

| Import | 说明 |
| --- | --- |
| `@grafana/vue` | 组件 + API（无自动注册副作用） |
| `@grafana/vue/register` | `bootstrapGrafanaVue` + `registerBuiltinPlugins` / `registerHeavyPlugins` |

## 主要组件

| 组件 | 场景 |
| --- | --- |
| **DashboardViewer** | 传入 dashboard JSON + datasources 配置嵌入整页 |
| **PanelHost** | 传入 `PanelData` 渲染单面板 |
| **DashboardPage** | 完整应用内仪表盘页 |
| **GButton / GInput / …** | 设计体系 UI |

完整文档见仓库：

- [docs/components.md](../../docs/components.md) — 组件用法（含数据源配置）
- [docs/packages/dashboard-viewer.md](../../docs/packages/dashboard-viewer.md) — Viewer 详解

## 构建

```bash
pnpm --filter @grafana/vue build
# 或
pnpm build:vue
```
