{"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`.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install nuxt-charts"],"cli":null},"imports":["import { defineNuxtConfig } from 'nuxt/config'","<LineChart ... />","import type { LegendPosition } from '#nuxt-charts/types'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}