Nuxt Charts

Common errors

• ReferenceError: LineChart is not defined

  cause The `nuxt-charts` module was not correctly added to the `modules` array in `nuxt.config.ts`.
  fix Ensure `modules: ['nuxt-charts']` is present in your `nuxt.config.ts` file.

• Error: Cannot find module 'vue-chrts' or its corresponding type declarations.

  cause The underlying `vue-chrts` package, which `nuxt-charts` depends on, was not installed.
  fix Install `vue-chrts` manually: `npm install vue-chrts` or `pnpm add vue-chrts` or `yarn add vue-chrts`.

• Error: 'to-px' error in console or during build.

  cause This issue typically arises when using pnpm due to its stricter dependency hoisting, preventing `nuxt-charts` from accessing its internal `@unovis/ts` dependency correctly.
  fix Add `shamefully-hoist=true` to your `.npmrc` file (create if it doesn't exist) or explicitly install `@unovis/ts` as a direct dependency: `pnpm add @unovis/ts`.

Warnings

• gotcha When using pnpm as a package manager, you might encounter a 'to-px' error due to how pnpm hoists dependencies.
  Fix: To resolve this, add `shamefully-hoist=true` to your `.npmrc` file, or explicitly install `@unovis/ts` as a direct dependency in your project: `pnpm add @unovis/ts`.
• gotcha Although `nuxt-charts` auto-imports its components, some documentation examples or older patterns might show explicit imports from `vue-chrts` (e.g., `import { LineChart } from 'vue-chrts';`). This can lead to confusion and unnecessary imports.
  Fix: Always prefer using the auto-imported components directly in your Vue templates (e.g., `<LineChart />`) without any explicit script imports, as this is the intended and most efficient way within a Nuxt module context. Only explicitly import from `vue-chrts` if you have disabled Nuxt auto-imports or for specific advanced scenarios.
• gotcha Nuxt 4 introduces shallow reactivity by default for `useAsyncData` and `useFetch`. If chart data is fetched using these composables without `.value` or deep reactivity enabled, chart updates might not be fully reactive.
  Fix: Ensure that data bound to chart props is deeply reactive if nested changes are expected to trigger updates. Use `toRaw()` for passing non-reactive objects if reactivity is not needed, or explicitly use `.value` for refs. Consider `watch` or `watchEffect` for complex reactivity scenarios, or configure deep reactivity for `useAsyncData`/`useFetch` if necessary.

Install

• npm install nuxt-charts npm
• yarn add nuxt-charts yarn
• pnpm add nuxt-charts pnpm

Imports

• defineNuxtConfig
  wrong:

  const defineNuxtConfig = require('nuxt/config')

  correct:

  import { defineNuxtConfig } from 'nuxt/config'

  Standard Nuxt 3 ESM import for module configuration. CommonJS `require` is not supported in Nuxt 3 configuration files.
• LineChart
  wrong:

  import { LineChart } from 'vue-chrts'; // If using the Nuxt module, components are auto-imported

  correct:

  <LineChart ... />

  When `nuxt-charts` is properly configured as a module, all its exposed chart components (e.g., LineChart, BarChart) are auto-imported and can be used directly in your Vue templates without explicit script imports. The README example shows a direct `vue-chrts` import, but for a Nuxt module, auto-import is the intended and idiomatic way. Explicit imports are only necessary if auto-imports are disabled or for specific edge cases.
• LegendPosition
  wrong:

  import { LegendPosition } from 'nuxt-charts'

  correct:

  import type { LegendPosition } from '#nuxt-charts/types'

  Nuxt modules typically expose types via a virtual import path (e.g., `#nuxt-charts/types`) to ensure proper type inference and auto-completion within a Nuxt project. Direct import from 'nuxt-charts' might not yield correct types or tree-shaking benefits.

Quickstart

This quickstart demonstrates how to enable the `nuxt-charts` module in `nuxt.config.ts` and then use both `LineChart` and `BarChart` components directly in a Vue component. It highlights the auto-import functionality for chart components and provides example data and categories.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-charts'
  ]
});

// app.vue (or any Nuxt page/component)
<template>
  <div class="chart-wrapper">
    <LineChart
      :data="data"
      :categories="categories"
      :height="300"
      :xFormatter="xFormatter"
      xLabel="Month"
      yLabel="Amount"
    />
    <BarChart
      :data="barData"
      :categories="barCategories"
      :height="250"
      xLabel="Product"
      yLabel="Revenue"
    />
  </div>
</template>

<script setup lang="ts">
// Chart components like LineChart and BarChart are auto-imported by the Nuxt module

const data = [
  { month: 'Jan', sales: 100, profit: 50 },
  { month: 'Feb', sales: 120, profit: 55 },
  { month: 'Mar', sales: 180, profit: 80 },
  { month: 'Apr', sales: 110, profit: 40 },
  { month: 'May', sales: 90, profit: 30 }
];

const categories = {
  sales: {
    name: 'Sales',
    color: '#3b82f6'
  },
  profit: {
    name: 'Profit',
    color: '#10b981'
  }
};

const xFormatter = (i: number) => data[i].month;

const barData = [
  { product: 'A', revenue: 200 },
  { product: 'B', revenue: 300 },
  { product: 'C', revenue: 150 }
];

const barCategories = {
  revenue: {
    name: 'Total Revenue',
    color: '#fbbf24'
  }
};
</script>

<style scoped>
.chart-wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
</style>