Nuxt Integration

Vue Plot includes a Nuxt module that registers components and configures custom-element compilation.

Installation

Install the Nuxt module and its dependencies:

pnpm add @memotux/nuxt-vue-plot @memotux/vue-plot @observablehq/plot

npm install @memotux/nuxt-vue-plot @memotux/vue-plot @observablehq/plot

yarn add @memotux/nuxt-vue-plot @memotux/vue-plot @observablehq/plot

Module registration

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@memotux/nuxt-vue-plot'],
})

That's it. The module automatically:

• Registers <VPlot> globally
• Configures custom element compilation for <Plot*> tags

Usage in Nuxt

Once the module is registered, use Vue Plot components directly in any page or component:

<!-- pages/charts.vue -->
<script setup lang="ts">
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>

No imports needed — the module handles registration.

Server-side rendering

Vue Plot supports Nuxt's SSR. SSR renders the chart container; Observable Plot's DOM rendering happens client-side after hydration.

To ensure charts render only on the client:

<template>
  <ClientOnly>
    <VPlot :width="680">
      <PlotBarY :data="data" x="name" y="value" />
    </VPlot>
  </ClientOnly>
</template>

Module options

The Nuxt module currently has no configuration options. All plot options are passed via component props.

Development

To develop with the Nuxt module locally:

# In the vue-plot repository root
pnpm nuxt dev

This runs the Nuxt playground at http://localhost:3000.

What's next?

• API Reference — Full component API
• Mark Components — All available marks