Setup

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:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { plotCustomElement } from '@memotux/vue-plot'

export default defineConfig({
  plugins: [
    vue({
      template: plotCustomElement.template,
    }),
  ],
})

Server-side rendering

During SSR only the chart container is rendered — the <div data-plot-id> wrapper. Observable Plot's SVG rendering runs client-side after the component mounts (onMounted), so the server payload never carries chart geometry.

In Nuxt, use the Nuxt integration and wrap charts in <ClientOnly>. Raw <Plot*> custom-element tags are not compiled on the server, so without <ClientOnly> they would ship in the server payload without meaning.

Component registration

Choose one of the following methods to use <VPlot> in your components.

Global registration (Vue plugin)

Registers <VPlot> globally across your application:

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:

<script setup lang="ts">
import { VPlot } from '@memotux/vue-plot'
</script>

<template>
  <VPlot :width="680" :marks="[]" />
</template>

Summary

What's next?

• Marks as Children — Template-based mark definition
• Marks as Props — Functional mark definition