Nuxt Vue Plot

Nuxt module for @memotux/vue-plot — declarative data visualization with Observable Plot.

• ✨  Release Notes

Features

• ⛰  Auto-imports VPlot component
• 🚠  Configures isCustomElement for Plot* tags
• 🌲  Optimizes Vite dependencies for @observablehq/plot

Quick Setup

Install @memotux/vue-plot and @observablehq/plot as they are required peer dependencies:

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

Install the module to your Nuxt application with one command:

npx nuxt module add @memotux/nuxt-vue-plot

That's it! You can now use VPlot in your Nuxt app ✨

<script setup>
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>

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch