{"id":11472,"library":"nuxt-charts","title":"Nuxt Charts","description":"Nuxt Charts is a Nuxt 3 module (current stable version 2.1.4) that provides an effortless way to integrate beautiful and responsive charting components into Nuxt applications. It acts as a wrapper around the `vue-chrts` library, which is inspired by Tremor and built on top of Unovis, offering a variety of chart types including Line, Bar, Area, Stacked Area, and Donut charts. The module leverages Nuxt's auto-import feature for its components and types, simplifying the development experience. It is designed with Vue 3 and TypeScript, focusing on customizability and an intuitive API. While `nuxt-charts` doesn't have a fixed public release cadence, it typically aligns with the Nuxt ecosystem's rapid development. Its key differentiator lies in providing a 'Nuxt-native' charting solution, abstracting away direct component imports from `vue-chrts` and integrating seamlessly with the Nuxt development workflow, which differentiates it from general Vue charting libraries like `vue-chartjs` or `vue-chartkick`.","status":"active","version":"2.1.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install nuxt-charts","lang":"bash","label":"npm"},{"cmd":"yarn add nuxt-charts","lang":"bash","label":"yarn"},{"cmd":"pnpm add nuxt-charts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core charting library that `nuxt-charts` wraps and re-exports components from. Essential for chart rendering.","package":"vue-chrts","optional":false},{"reason":"Underlying charting library dependency; required directly by pnpm users to avoid 'to-px' error or if not using `shamefully-hoist=true`.","package":"@unovis/ts","optional":true},{"reason":"Runtime peer dependency as `nuxt-charts` is a Nuxt module.","package":"nuxt","optional":false}],"imports":[{"note":"Standard Nuxt 3 ESM import for module configuration. CommonJS `require` is not supported in Nuxt 3 configuration files.","wrong":"const defineNuxtConfig = require('nuxt/config')","symbol":"defineNuxtConfig","correct":"import { defineNuxtConfig } from 'nuxt/config'"},{"note":"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.","wrong":"import { LineChart } from 'vue-chrts'; // If using the Nuxt module, components are auto-imported","symbol":"LineChart","correct":"<LineChart ... />"},{"note":"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.","wrong":"import { LegendPosition } from 'nuxt-charts'","symbol":"LegendPosition","correct":"import type { LegendPosition } from '#nuxt-charts/types'"}],"quickstart":{"code":"// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-charts'\n  ]\n});\n\n// app.vue (or any Nuxt page/component)\n<template>\n  <div class=\"chart-wrapper\">\n    <LineChart\n      :data=\"data\"\n      :categories=\"categories\"\n      :height=\"300\"\n      :xFormatter=\"xFormatter\"\n      xLabel=\"Month\"\n      yLabel=\"Amount\"\n    />\n    <BarChart\n      :data=\"barData\"\n      :categories=\"barCategories\"\n      :height=\"250\"\n      xLabel=\"Product\"\n      yLabel=\"Revenue\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n// Chart components like LineChart and BarChart are auto-imported by the Nuxt module\n\nconst data = [\n  { month: 'Jan', sales: 100, profit: 50 },\n  { month: 'Feb', sales: 120, profit: 55 },\n  { month: 'Mar', sales: 180, profit: 80 },\n  { month: 'Apr', sales: 110, profit: 40 },\n  { month: 'May', sales: 90, profit: 30 }\n];\n\nconst categories = {\n  sales: {\n    name: 'Sales',\n    color: '#3b82f6'\n  },\n  profit: {\n    name: 'Profit',\n    color: '#10b981'\n  }\n};\n\nconst xFormatter = (i: number) => data[i].month;\n\nconst barData = [\n  { product: 'A', revenue: 200 },\n  { product: 'B', revenue: 300 },\n  { product: 'C', revenue: 150 }\n];\n\nconst barCategories = {\n  revenue: {\n    name: 'Total Revenue',\n    color: '#fbbf24'\n  }\n};\n</script>\n\n<style scoped>\n.chart-wrapper {\n  max-width: 800px;\n  margin: 2rem auto;\n  padding: 1rem;\n  border: 1px solid #eee;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"When using pnpm as a package manager, you might encounter a 'to-px' error due to how pnpm hoists dependencies.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `modules: ['nuxt-charts']` is present in your `nuxt.config.ts` file.","cause":"The `nuxt-charts` module was not correctly added to the `modules` array in `nuxt.config.ts`.","error":"ReferenceError: LineChart is not defined"},{"fix":"Install `vue-chrts` manually: `npm install vue-chrts` or `pnpm add vue-chrts` or `yarn add vue-chrts`.","cause":"The underlying `vue-chrts` package, which `nuxt-charts` depends on, was not installed.","error":"Error: Cannot find module 'vue-chrts' or its corresponding type declarations."},{"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`.","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.","error":"Error: 'to-px' error in console or during build."}],"ecosystem":"npm"}