[{"data":1,"prerenderedAt":513},["ShallowReactive",2],{"navigation_docs":3,"landing":60},[4,22,43],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Getting Started","\u002Fgetting-started","1.getting-started",[9,13,17],{"title":10,"path":11,"stem":12},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction",{"title":14,"path":15,"stem":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":18,"path":19,"stem":20},"Setup","\u002Fgetting-started\u002Fsetup","1.getting-started\u002F3.setup",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Guide","\u002Fguide","2.guide",[27,31,35,39],{"title":28,"path":29,"stem":30},"Marks as Children","\u002Fguide\u002Fmarks-as-children","2.guide\u002F1.marks-as-children",{"title":32,"path":33,"stem":34},"Marks as Props","\u002Fguide\u002Fmarks-as-props","2.guide\u002F2.marks-as-props",{"title":36,"path":37,"stem":38},"Reactive Data","\u002Fguide\u002Freactive-data","2.guide\u002F3.reactive-data",{"title":40,"path":41,"stem":42},"Nuxt Integration","\u002Fguide\u002Fnuxt-integration","2.guide\u002F4.nuxt-integration",{"title":44,"path":45,"stem":46,"children":47,"page":21},"Api","\u002Fapi","3.api",[48,52,56],{"title":49,"path":50,"stem":51},"VPlot","\u002Fapi\u002Fvplot","3.api\u002F1.vplot",{"title":53,"path":54,"stem":55},"Mark Components","\u002Fapi\u002Fmark-components","3.api\u002F2.mark-components",{"title":57,"path":58,"stem":59},"TypeScript Types","\u002Fapi\u002Ftypes","3.api\u002F3.types",{"id":61,"title":62,"body":63,"description":504,"extension":505,"meta":506,"navigation":258,"path":507,"seo":508,"stem":511,"__hash__":512},"landing\u002Findex.md","Data Visualizations for Vue",{"type":64,"value":65,"toc":502},"minimark",[66,125,134,169,489,498],[67,68,69,94,97,111],"u-page-hero",{},[70,71,73,79],"template",{"v-slot:title":72},"",[74,75],"app-icon",{"className":76},[77,78],"h-98","mx-auto",[80,81,82,88,89],"p",{},[83,84,87],"span",{"className":85},[86],"text-primary","Vue"," ",[83,90,93],{"className":91},[92],"text-secondary","Plot",[70,95,96],{"v-slot:description":72},"Vue Plot wraps Observable Plot's grammar of graphics into idiomatic Vue components. Build charts, plots, and data visualizations using Vue templates, reactive data, and composables.",[70,98,99,100,110],{"v-slot:headline":72},"Vue components for building data visualizations with ",[101,102,106],"a",{"href":103,"rel":104},"https:\u002F\u002Fgithub.com\u002Fobservablehq\u002Fplot",[105],"nofollow",[107,108,109],"code",{},"@observablehq\u002Fplot",".",[70,112,113,119],{"v-slot:links":72},[114,115],"u-button",{"icon":116,"label":117,"size":118,"to":11},"i-ph-arrow-right","Get Started","lg",[114,120],{"icon":121,"label":122,"size":118,"to":123,"variant":124},"i-ph-github-logo","View on GitHub","https:\u002F\u002Fgithub.com\u002Fmemotux\u002Fvue-plot","outline",[126,127,131],"u-page-section",{"title":128,"description":129,"orientation":130},"62 marks, one component model","Every Observable Plot mark maps to a declarative Vue component — reactive, type-safe, and composable.","horizontal",[132,133],"app-showcase-chart",{},[126,135,137],{"title":136},"Why Vue Plot?",[70,138,139,145,150,155,160,164],{"v-slot:features":72},[140,141],"u-page-feature",{"description":142,"icon":143,"title":144},"Access the full grammar of graphics — 62 mark types from area charts to waffle plots.","i-ph-chart-bar","Observable Plot Power",[140,146],{"description":147,"icon":148,"title":149},"Use marks as template components or functional props — whichever fits your style.","i-ph-puzzle-piece","Vue-Native API",[140,151],{"description":152,"icon":153,"title":154},"Bind reactive data and re-render plots automatically.","i-ph-arrows-clockwise","Reactive by Default",[140,156],{"description":157,"icon":158,"title":159},"Full type inference for all mark options and plot configuration.","i-ph-file-ts","TypeScript First",[140,161],{"description":162,"icon":163,"title":40},"Nuxt module with auto-imports and devtools support.","i-ph-cube",[140,165],{"description":166,"icon":167,"title":168},"No bundled visualization engine — uses Observable Plot as a peer dependency.","i-ph-feather","Lightweight",[126,170,172,175],{":ui":171},"{\"body\": \"grid lg:grid-cols-2 items-center gap-4\"}",[70,173,174],{"v-slot:title":72},"Quick Start",[70,176,177,486],{"v-slot:body":72},[178,179,184],"pre",{"className":180,"code":181,"filename":182,"language":183,"meta":72,"style":72},"language-vue shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\u003Cscript setup lang=\"ts\">\nimport { VPlot } from \"@memotux\u002Fvue-plot\";\n\nconst data = [\n  { name: \"A\", value: 10 },\n  { name: \"B\", value: 20 },\n  { name: \"C\", value: 15 },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\">\n    \u003CPlotBarY :data=\"data\" x=\"name\" y=\"value\" \u002F>\n  \u003C\u002FVPlot>\n\u003C\u002Ftemplate>\n","App.vue","vue",[107,185,186,221,253,260,276,311,338,365,373,383,388,397,419,467,477],{"__ignoreMap":72},[83,187,190,194,198,202,205,208,212,216,218],{"class":188,"line":189},"line",1,[83,191,193],{"class":192},"s4RQF","\u003C",[83,195,197],{"class":196},"sv6DF","script",[83,199,201],{"class":200},"sWKss"," setup",[83,203,204],{"class":200}," lang",[83,206,207],{"class":192},"=",[83,209,211],{"class":210},"sou9m","\"",[83,213,215],{"class":214},"s9-zz","ts",[83,217,211],{"class":210},[83,219,220],{"class":192},">\n",[83,222,224,228,231,235,238,242,245,248,250],{"class":188,"line":223},2,[83,225,227],{"class":226},"su7sr","import",[83,229,230],{"class":192}," {",[83,232,234],{"class":233},"sOCQP"," VPlot",[83,236,237],{"class":192}," }",[83,239,241],{"class":240},"seCTJ"," from",[83,243,244],{"class":210}," \"",[83,246,247],{"class":214},"@memotux\u002Fvue-plot",[83,249,211],{"class":210},[83,251,252],{"class":192},";\n",[83,254,256],{"class":188,"line":255},3,[83,257,259],{"emptyLinePlaceholder":258},true,"\n",[83,261,263,266,269,272],{"class":188,"line":262},4,[83,264,265],{"class":200},"const",[83,267,268],{"class":233}," data ",[83,270,207],{"class":271},"sqN5v",[83,273,275],{"class":274},"sfkeP"," [\n",[83,277,279,282,286,289,291,294,296,299,302,304,308],{"class":188,"line":278},5,[83,280,281],{"class":192},"  {",[83,283,285],{"class":284},"sNH7Q"," name",[83,287,288],{"class":192},":",[83,290,244],{"class":210},[83,292,293],{"class":214},"A",[83,295,211],{"class":210},[83,297,298],{"class":192},",",[83,300,301],{"class":284}," value",[83,303,288],{"class":192},[83,305,307],{"class":306},"svr3b"," 10",[83,309,310],{"class":192}," },\n",[83,312,314,316,318,320,322,325,327,329,331,333,336],{"class":188,"line":313},6,[83,315,281],{"class":192},[83,317,285],{"class":284},[83,319,288],{"class":192},[83,321,244],{"class":210},[83,323,324],{"class":214},"B",[83,326,211],{"class":210},[83,328,298],{"class":192},[83,330,301],{"class":284},[83,332,288],{"class":192},[83,334,335],{"class":306}," 20",[83,337,310],{"class":192},[83,339,341,343,345,347,349,352,354,356,358,360,363],{"class":188,"line":340},7,[83,342,281],{"class":192},[83,344,285],{"class":284},[83,346,288],{"class":192},[83,348,244],{"class":210},[83,350,351],{"class":214},"C",[83,353,211],{"class":210},[83,355,298],{"class":192},[83,357,301],{"class":284},[83,359,288],{"class":192},[83,361,362],{"class":306}," 15",[83,364,310],{"class":192},[83,366,368,371],{"class":188,"line":367},8,[83,369,370],{"class":274},"]",[83,372,252],{"class":192},[83,374,376,379,381],{"class":188,"line":375},9,[83,377,378],{"class":192},"\u003C\u002F",[83,380,197],{"class":196},[83,382,220],{"class":192},[83,384,386],{"class":188,"line":385},10,[83,387,259],{"emptyLinePlaceholder":258},[83,389,391,393,395],{"class":188,"line":390},11,[83,392,193],{"class":192},[83,394,70],{"class":196},[83,396,220],{"class":192},[83,398,400,403,405,408,410,412,415,417],{"class":188,"line":399},12,[83,401,402],{"class":192},"  \u003C",[83,404,49],{"class":196},[83,406,407],{"class":200}," :width",[83,409,207],{"class":192},[83,411,211],{"class":210},[83,413,414],{"class":214},"680",[83,416,211],{"class":210},[83,418,220],{"class":192},[83,420,422,425,428,431,433,435,438,440,443,445,447,450,452,455,457,459,462,464],{"class":188,"line":421},13,[83,423,424],{"class":192},"    \u003C",[83,426,427],{"class":196},"PlotBarY",[83,429,430],{"class":200}," :data",[83,432,207],{"class":192},[83,434,211],{"class":210},[83,436,437],{"class":214},"data",[83,439,211],{"class":210},[83,441,442],{"class":200}," x",[83,444,207],{"class":192},[83,446,211],{"class":210},[83,448,449],{"class":214},"name",[83,451,211],{"class":210},[83,453,454],{"class":200}," y",[83,456,207],{"class":192},[83,458,211],{"class":210},[83,460,461],{"class":214},"value",[83,463,211],{"class":210},[83,465,466],{"class":192}," \u002F>\n",[83,468,470,473,475],{"class":188,"line":469},14,[83,471,472],{"class":192},"  \u003C\u002F",[83,474,49],{"class":196},[83,476,220],{"class":192},[83,478,480,482,484],{"class":188,"line":479},15,[83,481,378],{"class":192},[83,483,70],{"class":196},[83,485,220],{"class":192},[487,488],"app-quick-start-live",{},[126,490,492],{"title":491},"Ready to start?",[70,493,494],{"v-slot:links":72},[114,495],{"icon":496,"label":497,"size":118,"to":15},"i-ph-download","Installation Guide",[499,500,501],"style",{},"html pre.shiki code .s4RQF, html code.shiki .s4RQF{--shiki-light:#4E8CA2;--shiki-default:#89DDFF;--shiki-dark:#9E9B93}html pre.shiki code .sv6DF, html code.shiki .sv6DF{--shiki-light:#77713F;--shiki-default:#F07178;--shiki-dark:#C4B28A}html pre.shiki code .sWKss, html code.shiki .sWKss{--shiki-light:#624C83;--shiki-default:#C792EA;--shiki-dark:#8992A7}html pre.shiki code .sou9m, html code.shiki .sou9m{--shiki-light:#6F894E;--shiki-default:#89DDFF;--shiki-dark:#8A9A7B}html pre.shiki code .s9-zz, html code.shiki .s9-zz{--shiki-light:#6F894E;--shiki-default:#C3E88D;--shiki-dark:#8A9A7B}html pre.shiki code .su7sr, html code.shiki .su7sr{--shiki-light:#CC6D00;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#B6927B;--shiki-dark-font-style:inherit}html pre.shiki code .sOCQP, html code.shiki .sOCQP{--shiki-light:#545464;--shiki-default:#EEFFFF;--shiki-dark:#C5C9C5}html pre.shiki code .seCTJ, html code.shiki .seCTJ{--shiki-light:#624C83;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#8992A7;--shiki-dark-font-style:inherit}html pre.shiki code .sqN5v, html code.shiki .sqN5v{--shiki-light:#77713F;--shiki-default:#89DDFF;--shiki-dark:#C4B28A}html pre.shiki code .sfkeP, html code.shiki .sfkeP{--shiki-light:#4E8CA2;--shiki-default:#EEFFFF;--shiki-dark:#9E9B93}html pre.shiki code .sNH7Q, html code.shiki .sNH7Q{--shiki-light:#545464;--shiki-default:#F07178;--shiki-dark:#C5C9C5}html pre.shiki code .svr3b, html code.shiki .svr3b{--shiki-light:#B35B79;--shiki-default:#F78C6C;--shiki-dark:#A292A3}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":72,"searchDepth":223,"depth":223,"links":503},[],"Build reactive, type-safe data visualizations with Vue 3 components that wrap Observable Plot's grammar of graphics. Works with Nuxt.\n","md",{},"\u002F",{"title":509,"description":510},"Vue Plot — Declarative Data Visualization for Vue & Nuxt","Vue Plot wraps Observable Plot's grammar of graphics in idiomatic Vue 3 components — declarative, reactive, and fully type-safe.\n","index","_5fjtNVgL-PP22R2o8Q61USj7sAwSn4ccdnbcDNqjdw",1787848462163]