vue-frappe

vue-frappe

Vue 3 component wrapper for Frappe Charts — typed, tested, tree-shakeable, and built for modern tooling.

npm install vue-frappe frappe-charts
# or: yarn add vue-frappe frappe-charts
# or: pnpm add vue-frappe frappe-charts

Why this package?

Quick start

Local registration

<script setup lang="ts">
import { VueFrappe } from 'vue-frappe'
import type { Dataset } from 'vue-frappe'

const labels = [
  '12am-3am',
  '3am-6am',
  '6am-9am',
  '9am-12pm',
  '12pm-3pm',
  '3pm-6pm',
  '6pm-9pm',
  '9pm-12am',
]

const dataSets: Dataset[] = [
  {
    name: 'Bar Chart',
    chartType: 'bar',
    values: [25, 40, 30, 35, 8, 52, 17, -4],
  },
  {
    name: 'Line Chart',
    chartType: 'line',
    values: [25, 50, -10, 15, 18, 32, 27, 14],
  },
]
</script>

<template>
  <VueFrappe
    title="A statistical chart"
    type="axis-mixed"
    :labels="labels"
    :height="300"
    :colors="['#03a87c', '#ffa3ef']"
    :data-sets="dataSets"
  />
</template>

Plugin (global)

import { createApp } from 'vue'
import { VueFrappePlugin } from 'vue-frappe'
import App from './App.vue'

createApp(App).use(VueFrappePlugin).mount('#app')

<template>
  <vue-frappe type="bar" :labels="['A', 'B']" :data-sets="[{ values: [1, 2] }]" />
</template>

Styles: Frappe Charts injects styles from its package build. If charts look unstyled in your setup, check the Frappe Charts docs for your installed version.

Props

Data props (labels, dataSets, yMarkers, yRegions, dataPoints, dates) call chart.update() when they change. Structural props (type, height, colors, options objects, …) re-create the chart.

Events

<VueFrappe
  is-navigable
  :labels="labels"
  :data-sets="dataSets"
  @ready="onReady"
  @data-select="onSelect"
/>

Exposed methods (template ref)

<script setup lang="ts">
import { ref } from 'vue'
import { VueFrappe, type VueFrappeExpose } from 'vue-frappe'

const chartRef = ref<VueFrappeExpose | null>(null)

function exportSvg() {
  chartRef.value?.export()
}
</script>

<template>
  <VueFrappe ref="chartRef" type="line" :labels="labels" :data-sets="dataSets" />
  <button type="button" @click="exportSvg">Export</button>
</template>

Heatmap example

<script setup lang="ts">
const dataPoints: Record<string, number> = {
  '2024-01-15': 4,
  '2024-02-02': 2,
  '2024-06-18': 7,
}
</script>

<template>
  <VueFrappe
    type="heatmap"
    :data-points="dataPoints"
    :start-date="new Date('2024-01-01')"
    :end-date="new Date('2024-12-31')"
    count-label="Commits"
    :height="200"
    :colors="['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']"
  />
</template>

Tooling

Pre-commit hooks run lint-staged (ESLint + Prettier) via simple-git-hooks.
Before a PR or release, run npm run preflight.

Upgrading

vue-frappe follows Semantic Versioning and increments versions as MAJOR.MINOR.PATCH.

• Major versions may contain breaking changes — follow the upgrade guide.
• Minor and patch versions should never contain breaking changes.

Release notes live on the GitHub Releases page (created automatically when you push a v* tag).

Contributing

Thank you for considering contributing to vue-frappe! The contribution guide can be found here.

npm install
npm run preflight

License

vue-frappe is open-sourced software licensed under the MIT license.