Vue components for building data visualizations with
@observablehq/plot.Vue Plot
Vue Plot wraps Observable Plot's grammar of graphics into idiomatic Vue components. Build charts, plots, and data visualizations using Vue templates, reactive data, and composables.
62 marks, one component model
Every Observable Plot mark maps to a declarative Vue component — reactive, type-safe, and composable.
Why Vue Plot?
Observable Plot Power
Access the full grammar of graphics — 62 mark types from area charts to waffle plots.
Vue-Native API
Use marks as template components or functional props — whichever fits your style.
Reactive by Default
Bind reactive data and re-render plots automatically.
TypeScript First
Full type inference for all mark options and plot configuration.
Nuxt Integration
Nuxt module with auto-imports and devtools support.
Lightweight
No bundled visualization engine — uses Observable Plot as a peer dependency.
Quick Start
App.vue
<script setup lang="ts">
import { VPlot } from "@memotux/vue-plot";
const data = [
{ name: "A", value: 10 },
{ name: "B", value: 20 },
{ name: "C", value: 15 },
];
</script>
<template>
<VPlot :width="680">
<PlotBarY :data="data" x="name" y="value" />
</VPlot>
</template>