[{"data":1,"prerenderedAt":159},["ShallowReactive",2],{"project-\u002Fprojects\u002Fnuxt-charts":3,"project-writing-\u002Fprojects\u002Fnuxt-charts":26,"mdc-50hr00-key":60},{"slug":4,"title":5,"description":6,"body":7,"category":8,"sources":9,"name":16,"order":17,"status":18,"stack":19,"website":12,"repository":23,"featured":24,"path":25},"nuxt-charts","Nuxt Charts — a project by Dennis Adriaansen","Charts, reusable blocks and dashboard templates for Vue and Nuxt developers.","\n## Why I built Nuxt Charts\n\nI’m Dennis Adriaansen, known as Dennis Adriaans in the Nuxt community. Nuxt Charts started with a practical need: an error dashboard I was building needed clear, attractive charts that felt at home in Vue.\n\nI wanted a shorter path from application data to a useful interface. That became the focus of Nuxt Charts: familiar components, careful visual defaults and room to customize.\n\n## A library, then the rest of the screen\n\nThe work includes chart components, reusable blocks and dashboard templates. Charts cover trends, comparisons, proportions and flows; blocks and templates put them into the context of a working interface.\n\nThe underlying visualization work uses Unovis. The Vue package, [vue-chrts](https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fvue-chrts), is open source. Nuxt Charts adds a Nuxt-focused entry point, examples and a broader collection of interface work.\n\n## What matters to me\n\n- Make the data easy to read before adding decoration.\n- Use defaults that fit a real application.\n- Keep types and component APIs understandable.\n- Let developers adapt a chart to their product’s visual language.\n\nFor the current chart catalog, setup instructions and commercial template details, visit [Nuxt Charts](https:\u002F\u002Fnuxtcharts.com). For the starting point, read [why I built Nuxt Charts](\u002Fblog\u002Fwhy-i-built-nuxt-charts).\n","Data visualization",[10,13],{"label":11,"url":12},"Nuxt Charts — current library, blocks and templates","https:\u002F\u002Fnuxtcharts.com",{"label":14,"url":15},"My original DEV article: Why I’m Building Nuxt Charts","https:\u002F\u002Fdev.to\u002Fdennisadriaans\u002Fwhy-im-building-nuxt-charts-4dlj","Nuxt Charts",1,"Active",[20,21,22],"Vue","Nuxt","Unovis","https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fvue-chrts",false,"\u002Fprojects\u002Fnuxt-charts",[27,46],{"slug":28,"title":29,"description":30,"body":31,"category":32,"sources":33,"date":39,"tags":40,"language":44,"draft":24,"project":4,"path":45},"from-nuxt-charts-to-a-complete-dashboard","From Nuxt Charts to a complete dashboard","Expanding a public Nuxt UI dashboard update into the design decisions around charts, context and useful interfaces.","\nI shared a work-in-progress dashboard using Nuxt UI and Nuxt Charts on X. A short update can show the interface; a longer article has room to explain the decisions around it.\n\nThis is an expansion of that dashboard theme, rather than a transcript of the post.\n\n## Start with the question a screen answers\n\nA dashboard should help someone understand a situation or choose a next step. Before deciding how many cards it needs, decide what its reader is trying to find out.\n\nFor example, a team looking at background jobs may want to know whether work is building up. Queue depth, processing time and failed jobs answer different parts of that question.\n\nThree attractive charts can still leave the question unanswered if each uses a different time window or leaves its units unclear.\n\n## A chart needs its neighbors\n\nA chart title should say what is being measured. The surrounding copy should provide the time window and comparison. A nearby action should relate to what the reader has learned.\n\nThe visual hierarchy can then stay quiet:\n\n1. State the main question or status.\n2. Show the evidence in a chart or table.\n3. Explain the relevant change.\n4. Offer a sensible next step.\n\nFor a job dashboard, that might mean a backlog trend, the oldest waiting job and a link to inspect the queue.\n\n## Reusable blocks carry the relationship\n\nA chart component is one reusable piece. A block can preserve the relationship between a heading, a value, a chart, a legend and a small explanation.\n\nTemplates take that one level further by arranging those pieces across a screen. The developer can then adapt the data and behavior rather than reworking the same layout decisions each time.\n\nThat is why [Nuxt Charts](\u002Fprojects\u002Fnuxt-charts) includes more than individual chart components.\n\n## A demo is a starting point\n\nA polished screenshot shows one state. A real product also needs loading, empty and error states, along with sensible behavior on smaller screens.\n\nThose states belong to the interface’s design. They determine whether someone can understand what is happening when the perfect sample data is gone.\n\nMy focus is to make a good starting point that developers can turn into the dashboard their application actually needs.\n","Design & dashboards",[34,37],{"label":35,"url":36},"My Nuxt UI \u002F Nuxt Charts dashboard update on X","https:\u002F\u002Fx.com\u002FDennisAdriaans\u002Fstatus\u002F2054139267899678987",{"label":38,"url":12},"Nuxt Charts — blocks and templates","2026-10-12",[41,16,42,43],"Nuxt UI","dashboards","interface design","en","\u002Fblog\u002Ffrom-nuxt-charts-to-a-complete-dashboard",{"slug":47,"title":48,"description":49,"body":50,"category":51,"sources":52,"date":39,"tags":57,"language":44,"draft":24,"project":4,"path":59},"why-i-built-nuxt-charts","Why I built Nuxt Charts","The practical problem behind Nuxt Charts, and how a chart library grew into reusable blocks and dashboard templates.","\nNuxt Charts began inside another project. I was building Nuxt Error, an error dashboard for Nuxt applications, and needed charts that were informative and looked right in the interface.\n\nI liked the polished visualization work I saw in the React ecosystem. Working in Vue and Nuxt, I wanted an equally straightforward way to get to a finished result.\n\nThat need became Nuxt Charts. I’m Dennis Adriaansen — also known as Dennis Adriaans in the Nuxt community — and this is one of the projects that best captures how I like to build.\n\n## The chart is only part of the work\n\nA dashboard needs more than a line on a screen. It needs a clear label, a sensible scale, useful formatting and a layout that makes the data’s context visible.\n\nConsider a chart of completed jobs. A line can show the trend, but a reader still needs to know the time window and whether the values are totals or rates. A tooltip cannot do all that work for the page.\n\nMy aim is to make the ordinary parts of that interface easier to assemble, so a developer can spend more time on what the application needs to communicate.\n\n## Defaults should get you started\n\nNuxt Charts connects Vue chart components, built around Unovis, to a Nuxt-focused experience. The work now also includes reusable blocks and dashboard templates.\n\nA useful default gives a developer something coherent to begin with. Customization lets it fit the product: color, spacing, number formatting and the relationship between a chart and the rest of a screen.\n\nThose two needs belong together. A component should be quick to use without forcing every application to look identical.\n\n## From one need to a reusable piece\n\nThe original problem was specific to one dashboard. The reusable part was the path from typed data to a readable chart.\n\nThat is the pattern I keep looking for in my projects: solve a real problem, identify the repeated work and make that piece easier to use again.\n\nFor the current examples and documentation, visit [Nuxt Charts](https:\u002F\u002Fnuxtcharts.com). For a longer view of the project, see [the Nuxt Charts project page](\u002Fprojects\u002Fnuxt-charts).\n","Nuxt & Vue",[53,55],{"label":54,"url":15},"My original article on DEV",{"label":56,"url":12},"Nuxt Charts — current library and examples",[16,20,22,58],"developer experience","\u002Fblog\u002Fwhy-i-built-nuxt-charts",{"data":61,"body":62},{},{"type":63,"children":64},"root",[65,72,78,83,89,94,109,115,140],{"type":66,"tag":67,"props":68,"children":69},"element","h2",{"id":47},[70],{"type":71,"value":48},"text",{"type":66,"tag":73,"props":74,"children":75},"p",{},[76],{"type":71,"value":77},"I’m Dennis Adriaansen, known as Dennis Adriaans in the Nuxt community. Nuxt Charts started with a practical need: an error dashboard I was building needed clear, attractive charts that felt at home in Vue.",{"type":66,"tag":73,"props":79,"children":80},{},[81],{"type":71,"value":82},"I wanted a shorter path from application data to a useful interface. That became the focus of Nuxt Charts: familiar components, careful visual defaults and room to customize.",{"type":66,"tag":67,"props":84,"children":86},{"id":85},"a-library-then-the-rest-of-the-screen",[87],{"type":71,"value":88},"A library, then the rest of the screen",{"type":66,"tag":73,"props":90,"children":91},{},[92],{"type":71,"value":93},"The work includes chart components, reusable blocks and dashboard templates. Charts cover trends, comparisons, proportions and flows; blocks and templates put them into the context of a working interface.",{"type":66,"tag":73,"props":95,"children":96},{},[97,99,107],{"type":71,"value":98},"The underlying visualization work uses Unovis. The Vue package, ",{"type":66,"tag":100,"props":101,"children":104},"a",{"href":23,"rel":102},[103],"nofollow",[105],{"type":71,"value":106},"vue-chrts",{"type":71,"value":108},", is open source. Nuxt Charts adds a Nuxt-focused entry point, examples and a broader collection of interface work.",{"type":66,"tag":67,"props":110,"children":112},{"id":111},"what-matters-to-me",[113],{"type":71,"value":114},"What matters to me",{"type":66,"tag":116,"props":117,"children":118},"ul",{},[119,125,130,135],{"type":66,"tag":120,"props":121,"children":122},"li",{},[123],{"type":71,"value":124},"Make the data easy to read before adding decoration.",{"type":66,"tag":120,"props":126,"children":127},{},[128],{"type":71,"value":129},"Use defaults that fit a real application.",{"type":66,"tag":120,"props":131,"children":132},{},[133],{"type":71,"value":134},"Keep types and component APIs understandable.",{"type":66,"tag":120,"props":136,"children":137},{},[138],{"type":71,"value":139},"Let developers adapt a chart to their product’s visual language.",{"type":66,"tag":73,"props":141,"children":142},{},[143,145,150,152,157],{"type":71,"value":144},"For the current chart catalog, setup instructions and commercial template details, visit ",{"type":66,"tag":100,"props":146,"children":148},{"href":12,"rel":147},[103],[149],{"type":71,"value":16},{"type":71,"value":151},". For the starting point, read ",{"type":66,"tag":100,"props":153,"children":154},{"href":59},[155],{"type":71,"value":156},"why I built Nuxt Charts",{"type":71,"value":158},".",1794481660794]