[{"data":1,"prerenderedAt":163},["ShallowReactive",2],{"article-\u002Fblog\u002Ffrom-nuxt-charts-to-a-complete-dashboard":3,"related-\u002Fblog\u002Ffrom-nuxt-charts-to-a-complete-dashboard":26,"mdc-ultolo-key":27},{"slug":4,"title":5,"description":6,"body":7,"category":8,"sources":9,"date":16,"tags":17,"language":22,"draft":23,"project":24,"path":25},"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",[10,13],{"label":11,"url":12},"My Nuxt UI \u002F Nuxt Charts dashboard update on X","https:\u002F\u002Fx.com\u002FDennisAdriaans\u002Fstatus\u002F2054139267899678987",{"label":14,"url":15},"Nuxt Charts — blocks and templates","https:\u002F\u002Fnuxtcharts.com","2026-10-12",[18,19,20,21],"Nuxt UI","Nuxt Charts","dashboards","interface design","en",false,"nuxt-charts","\u002Fblog\u002Ffrom-nuxt-charts-to-a-complete-dashboard",[],{"data":28,"body":29},{},{"type":30,"children":31},"root",[32,40,45,52,57,62,67,73,78,83,108,113,119,124,129,142,148,153,158],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","I 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.",{"type":33,"tag":34,"props":41,"children":42},{},[43],{"type":38,"value":44},"This is an expansion of that dashboard theme, rather than a transcript of the post.",{"type":33,"tag":46,"props":47,"children":49},"h2",{"id":48},"start-with-the-question-a-screen-answers",[50],{"type":38,"value":51},"Start with the question a screen answers",{"type":33,"tag":34,"props":53,"children":54},{},[55],{"type":38,"value":56},"A 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.",{"type":33,"tag":34,"props":58,"children":59},{},[60],{"type":38,"value":61},"For 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.",{"type":33,"tag":34,"props":63,"children":64},{},[65],{"type":38,"value":66},"Three attractive charts can still leave the question unanswered if each uses a different time window or leaves its units unclear.",{"type":33,"tag":46,"props":68,"children":70},{"id":69},"a-chart-needs-its-neighbors",[71],{"type":38,"value":72},"A chart needs its neighbors",{"type":33,"tag":34,"props":74,"children":75},{},[76],{"type":38,"value":77},"A 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.",{"type":33,"tag":34,"props":79,"children":80},{},[81],{"type":38,"value":82},"The visual hierarchy can then stay quiet:",{"type":33,"tag":84,"props":85,"children":86},"ol",{},[87,93,98,103],{"type":33,"tag":88,"props":89,"children":90},"li",{},[91],{"type":38,"value":92},"State the main question or status.",{"type":33,"tag":88,"props":94,"children":95},{},[96],{"type":38,"value":97},"Show the evidence in a chart or table.",{"type":33,"tag":88,"props":99,"children":100},{},[101],{"type":38,"value":102},"Explain the relevant change.",{"type":33,"tag":88,"props":104,"children":105},{},[106],{"type":38,"value":107},"Offer a sensible next step.",{"type":33,"tag":34,"props":109,"children":110},{},[111],{"type":38,"value":112},"For a job dashboard, that might mean a backlog trend, the oldest waiting job and a link to inspect the queue.",{"type":33,"tag":46,"props":114,"children":116},{"id":115},"reusable-blocks-carry-the-relationship",[117],{"type":38,"value":118},"Reusable blocks carry the relationship",{"type":33,"tag":34,"props":120,"children":121},{},[122],{"type":38,"value":123},"A 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.",{"type":33,"tag":34,"props":125,"children":126},{},[127],{"type":38,"value":128},"Templates 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.",{"type":33,"tag":34,"props":130,"children":131},{},[132,134,140],{"type":38,"value":133},"That is why ",{"type":33,"tag":135,"props":136,"children":138},"a",{"href":137},"\u002Fprojects\u002Fnuxt-charts",[139],{"type":38,"value":19},{"type":38,"value":141}," includes more than individual chart components.",{"type":33,"tag":46,"props":143,"children":145},{"id":144},"a-demo-is-a-starting-point",[146],{"type":38,"value":147},"A demo is a starting point",{"type":33,"tag":34,"props":149,"children":150},{},[151],{"type":38,"value":152},"A polished screenshot shows one state. A real product also needs loading, empty and error states, along with sensible behavior on smaller screens.",{"type":33,"tag":34,"props":154,"children":155},{},[156],{"type":38,"value":157},"Those states belong to the interface’s design. They determine whether someone can understand what is happening when the perfect sample data is gone.",{"type":33,"tag":34,"props":159,"children":160},{},[161],{"type":38,"value":162},"My focus is to make a good starting point that developers can turn into the dashboard their application actually needs.",1794481660968]