Introduction
Vue Plot is a set of Vue 3 components for building data visualizations with Observable Plot.
What is Vue Plot?
Vue Plot wraps Observable Plot's grammar of graphics into idiomatic Vue components. Instead of imperatively building charts, you declare your visualization using Vue's template syntax.
<script setup lang="ts">
const data = [
{ name: "A", value: 28 },
{ name: "B", value: 55 },
{ name: "C", value: 42 },
]
</script>
<template>
<VPlot :width="680">
<PlotBarY :data="data" x="name" y="value" />
</VPlot>
</template>
Each mark from Observable Plot maps to a <Plot*> component — <PlotBarY>, <PlotDot>, <PlotLine>, and many more.
Why use Vue Plot?
Observable Plot is comprehensive, but using it from Vue requires boilerplate — refs, onMounted, manual DOM manipulation. Vue Plot eliminates that:
| Without Vue Plot | With Vue Plot |
|---|---|
| Manual DOM mounting | Declarative template |
| Imperative mark creation | Component props |
| Reactive wrappers needed | Built-in reactivity |
| No type inference | Full TypeScript support |
Two usage patterns
Vue Plot supports two ways to define marks:
As template components
Use <Plot*> tags directly in your template. This is the most Vue-native approach:
<script setup lang="ts">
const data = [
{ name: "A", value: 28 },
{ name: "B", value: 55 },
{ name: "C", value: 42 },
]
</script>
<template>
<VPlot :width="680">
<PlotBarY :data="data" x="name" y="value" />
<PlotRuleY :data="[0]" stroke="gray" />
</VPlot>
</template>
As functional props
Pass marks from @observablehq/plot as props. This pattern is useful when building charts programmatically:
<script setup lang="ts">
import { barY, ruleY } from '@observablehq/plot'
const data = [
{ name: "A", value: 28 },
{ name: "B", value: 55 },
{ name: "C", value: 42 },
]
const options = {
width: 680,
marks: [
barY(data, { x: 'name', y: 'value' }),
ruleY([0], { stroke: 'gray' }),
],
}
</script>
<template>
<VPlot v-bind="options" />
</template>
Requirements
- Vue 3.5+
- Observable Plot 0.6.17+ (peer dependency)
What's next?
- Installation — Install Vue Plot in your project
- Setup — Configure Vite and register components