# @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
```
