nuxt-module_skill

Overview

This skill integrates the nuxt-charts module into Nuxt applications to build interactive charts quickly. It provides automatic global imports for Vue 3 chart components and common enums/types so you can drop charts into pages without manual imports. It’s built to work with client-side rendering and play nicely with Nuxt composables and UI components.

How this skill works

Install the nuxt-charts module and add it to nuxt.config; the module auto-imports chart components (LineChart, BarChart, AreaChart, etc.) and enums like CurveType and LegendPosition. Charts render client-side, so use Nuxt's ClientOnly wrapper for SSR-safe rendering and use useFetch or useAsyncData to supply chart data. You can still import types explicitly for stricter TypeScript safety.

When to use it

• You need fast, zero-import chart components in a Nuxt 3 / Vue 3 project.
• Building dashboards or reporting pages that fetch data from APIs.
• Embedding charts inside Nuxt UI components like cards or layout primitives.
• Prototyping visualizations where you want sensible defaults and quick setup.
• When you prefer client-side rendering for interactive chart behavior.

Best practices

• Wrap charts in <ClientOnly> with a lightweight fallback for SSR compatibility.
• Use useFetch or useAsyncData to load and transform API data before rendering charts.
• Centralize colors/formatters in a composable (e.g., useChartConfig) for reuse and consistency.
• Use provided enums (CurveType, LegendPosition) for predictable visual behavior.
• Import types explicitly when you need strict TypeScript interfaces for data and categories.

Example use cases

• Sales dashboard showing revenue and profit using LineChart with custom xFormatter and legend placement.
• Monthly performance card inside a Nuxt UI UCard using BarChart and currency formatter.
• Async data visualization fetching time-series data with useAsyncData and transforming it for charts.
• Composable-driven color palettes and formatters shared across multiple chart components.
• Client-only rendering for complex charts (e.g., SankeyChart, DagreGraph) to avoid SSR issues.