Getting Started
Setup
Configure the Vite plugin for mark components and register VPlot globally or locally to start building charts in your Vue 3 app.
After installation, configure your project to use Vue Plot.
Vite plugin configuration
If you use mark components as children (<PlotBarY>, <PlotDot>, etc.), configure Vite to recognize them as custom elements:
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { plotCustomElement } from '@memotux/vue-plot'
export default defineConfig({
plugins: [
vue({
template: plotCustomElement.template,
}),
],
})
This step is only required when using mark components as children. If you prefer to pass marks via the
marks prop, you can skip this configuration.Component registration
Choose one of the following methods to use <VPlot> in your components.
Global registration (Vue plugin)
Registers <VPlot> globally across your application:
main.ts
import { createApp } from 'vue'
import { VuePlot } from '@memotux/vue-plot'
import App from './App.vue'
const app = createApp(App)
app.use(VuePlot)
app.mount('#app')
Local registration
Import <VPlot> directly in individual components without global registration:
App.vue
<script setup lang="ts">
import { VPlot } from '@memotux/vue-plot'
</script>
<template>
<VPlot :width="680" :marks="[]" />
</template>
Summary
| Setup step | Required when |
|---|---|
| Vite plugin config | Using <Plot*> mark components as children |
| Global registration | Using <VPlot> across many components |
| Local registration | Using <VPlot> in a few components |
What's next?
- Marks as Children — Template-based mark definition
- Marks as Props — Functional mark definition