nuxt-charts

library2.1.4jsnpmunverified

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`.

web-framework http-networking

npm install nuxt-charts

package ↗

INSTALL

IMPORT

SIG · NUXT-CHARTS

nuxt-charts

web-frameworkjavascriptv2.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

defineNuxtConfig

✓ import { defineNuxtConfig } from 'nuxt/config'

✗ const defineNuxtConfig = require('nuxt/config')

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

LineChart

✓ <LineChart ... />

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

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

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

✗ import { LegendPosition } from 'nuxt-charts'

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.

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>

Debug

Known issues

gotchaWhen 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`.

affects: >=2.0.0

gotchaAlthough `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.

affects: >=2.0.0

gotchaNuxt 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.

affects: >=2.0.0

Errors

Common errors & fixes

ReferenceError: LineChart is not defined

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.

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.

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`.

Upgrade

Version history

2.1.4latest on npm

Audit

Dependencies

vue-chrtsrequiredCore charting library that `nuxt-charts` wraps and re-exports components from. Essential for chart rendering.

@unovis/tsoptionalUnderlying charting library dependency; required directly by pnpm users to avoid 'to-px' error or if not using `shamefully-hoist=true`.

nuxtrequiredRuntime peer dependency as `nuxt-charts` is a Nuxt module.

Agent activity

2 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/nuxt-charts ↗