Vue
Vue 3 bindings over the shared LiveChart engine
Import <LiveChart /> from livecharts/vue. Same canvas engine as React — Composition API wrapper, SFC-friendly props.
Live previews in these docs use the shared engine via React bindings. Copy the Vue snippets — they match the public livecharts/vue API.
Install
npm install livechartsPeer: Vue ≥ 3.4.
Bundle size
Same published package as React — pick the livecharts/vue entry. Sizes update automatically when the package builds.
| Import | Minified | Gzip | Notes |
|---|---|---|---|
livecharts | 134 KB | 29 KB | Engine + theme helpers |
livecharts/react | 159 KB | 34 KB | React binding (engine inlined; react is peer) |
livecharts/vue | 164 KB | 35 KB | Vue binding (engine inlined; vue is peer) |
livecharts/data | 2.8 KB | 0.9 KB | Helpers only — no canvas engine |
Measured from published ESM build (ESM dist, gzip -9; framework peers not included). v0.1.2 · React / Vue are peer dependencies and are not included.
Package layout
| Import | What you get |
|---|---|
livecharts/vue | <LiveChart />, LiveChartTransition, useLiveChartEngine |
livecharts | LiveChartEngine, theme helpers, shared types |
livecharts/data | createWalker, aggregateCandles |
Quick example
<script setup lang="ts">
import { LiveChart } from "livecharts/vue";
import type { LiveChartPoint } from "livecharts/vue";
import { ref } from "vue";
const data = ref<LiveChartPoint[]>([]);
const value = ref(0);
// push points from your feed — WebSocket, polling, etc.
</script>
<template>
<div style="height: 200px">
<LiveChart :data="data" :value="value" color="#3b82f6" theme="light" />
</div>
</template>The component fills its parent. Set a height on the wrapper.
Under SSR (Nuxt), wrap the chart in ClientOnly — see Getting started.
Attribution
Same engine as the React docs — based on Liveline by Benji Taylor (MIT). See Introduction → Attribution.