[{"data":1,"prerenderedAt":661},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-setup":60,"-getting-started-setup-surround":656},[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":18,"body":62,"description":648,"extension":649,"links":650,"meta":651,"navigation":103,"path":19,"seo":652,"stem":20,"__hash__":655},"docs\u002F1.getting-started\u002F3.setup.md",{"type":63,"value":64,"toc":639},"minimark",[65,69,74,86,271,284,288,295,300,306,435,439,445,561,565,616,620,635],[66,67,68],"p",{},"After installation, configure your project to use Vue Plot.",[70,71,73],"h2",{"id":72},"vite-plugin-configuration","Vite plugin configuration",[66,75,76,77,81,82,85],{},"If you use mark components as children (",[78,79,80],"code",{},"\u003CPlotBarY>",", ",[78,83,84],{},"\u003CPlotDot>",", etc.), configure Vite to recognize them as custom elements:",[87,88,94],"pre",{"className":89,"code":90,"filename":91,"language":92,"meta":93,"style":93},"language-ts shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport { plotCustomElement } from '@memotux\u002Fvue-plot'\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: plotCustomElement.template,\n    }),\n  ],\n})\n","vite.config.ts","ts","",[78,95,96,105,138,155,176,181,200,213,223,243,254,262],{"__ignoreMap":93},[97,98,101],"span",{"class":99,"line":100},"line",1,[97,102,104],{"emptyLinePlaceholder":103},true,"\n",[97,106,108,112,116,120,123,127,131,135],{"class":99,"line":107},2,[97,109,111],{"class":110},"su7sr","import",[97,113,115],{"class":114},"s4RQF"," {",[97,117,119],{"class":118},"sOCQP"," defineConfig",[97,121,122],{"class":114}," }",[97,124,126],{"class":125},"seCTJ"," from",[97,128,130],{"class":129},"sou9m"," '",[97,132,134],{"class":133},"s9-zz","vite",[97,136,137],{"class":129},"'\n",[97,139,141,143,146,148,150,153],{"class":99,"line":140},3,[97,142,111],{"class":110},[97,144,145],{"class":118}," vue",[97,147,126],{"class":125},[97,149,130],{"class":129},[97,151,152],{"class":133},"@vitejs\u002Fplugin-vue",[97,154,137],{"class":129},[97,156,158,160,162,165,167,169,171,174],{"class":99,"line":157},4,[97,159,111],{"class":110},[97,161,115],{"class":114},[97,163,164],{"class":118}," plotCustomElement",[97,166,122],{"class":114},[97,168,126],{"class":125},[97,170,130],{"class":129},[97,172,173],{"class":133},"@memotux\u002Fvue-plot",[97,175,137],{"class":129},[97,177,179],{"class":99,"line":178},5,[97,180,104],{"emptyLinePlaceholder":103},[97,182,184,187,190,193,197],{"class":99,"line":183},6,[97,185,186],{"class":125},"export",[97,188,189],{"class":125}," default",[97,191,119],{"class":192},"sfbsL",[97,194,196],{"class":195},"sfkeP","(",[97,198,199],{"class":114},"{\n",[97,201,203,207,210],{"class":99,"line":202},7,[97,204,206],{"class":205},"sNH7Q","  plugins",[97,208,209],{"class":114},":",[97,211,212],{"class":195}," [\n",[97,214,216,219,221],{"class":99,"line":215},8,[97,217,218],{"class":192},"    vue",[97,220,196],{"class":195},[97,222,199],{"class":114},[97,224,226,229,231,233,236,240],{"class":99,"line":225},9,[97,227,228],{"class":205},"      template",[97,230,209],{"class":114},[97,232,164],{"class":118},[97,234,235],{"class":114},".",[97,237,239],{"class":238},"smkSw","template",[97,241,242],{"class":114},",\n",[97,244,246,249,252],{"class":99,"line":245},10,[97,247,248],{"class":114},"    }",[97,250,251],{"class":195},")",[97,253,242],{"class":114},[97,255,257,260],{"class":99,"line":256},11,[97,258,259],{"class":195},"  ]",[97,261,242],{"class":114},[97,263,265,268],{"class":99,"line":264},12,[97,266,267],{"class":114},"}",[97,269,270],{"class":195},")\n",[272,273,274,275,279,280,283],"note",{},"This step is only required when using mark components as ",[276,277,278],"strong",{},"children",". If you prefer to pass marks via the ",[78,281,282],{},"marks"," prop, you can skip this configuration.",[70,285,287],{"id":286},"component-registration","Component registration",[66,289,290,291,294],{},"Choose one of the following methods to use ",[78,292,293],{},"\u003CVPlot>"," in your components.",[296,297,299],"h3",{"id":298},"global-registration-vue-plugin","Global registration (Vue plugin)",[66,301,302,303,305],{},"Registers ",[78,304,293],{}," globally across your application:",[87,307,310],{"className":89,"code":308,"filename":309,"language":92,"meta":93,"style":93},"\nimport { createApp } from 'vue'\nimport { VuePlot } from '@memotux\u002Fvue-plot'\nimport App from '.\u002FApp.vue'\n\nconst app = createApp(App)\napp.use(VuePlot)\napp.mount('#app')\n","main.ts",[78,311,312,316,336,355,371,375,397,414],{"__ignoreMap":93},[97,313,314],{"class":99,"line":100},[97,315,104],{"emptyLinePlaceholder":103},[97,317,318,320,322,325,327,329,331,334],{"class":99,"line":107},[97,319,111],{"class":110},[97,321,115],{"class":114},[97,323,324],{"class":118}," createApp",[97,326,122],{"class":114},[97,328,126],{"class":125},[97,330,130],{"class":129},[97,332,333],{"class":133},"vue",[97,335,137],{"class":129},[97,337,338,340,342,345,347,349,351,353],{"class":99,"line":140},[97,339,111],{"class":110},[97,341,115],{"class":114},[97,343,344],{"class":118}," VuePlot",[97,346,122],{"class":114},[97,348,126],{"class":125},[97,350,130],{"class":129},[97,352,173],{"class":133},[97,354,137],{"class":129},[97,356,357,359,362,364,366,369],{"class":99,"line":157},[97,358,111],{"class":110},[97,360,361],{"class":118}," App",[97,363,126],{"class":125},[97,365,130],{"class":129},[97,367,368],{"class":133},".\u002FApp.vue",[97,370,137],{"class":129},[97,372,373],{"class":99,"line":178},[97,374,104],{"emptyLinePlaceholder":103},[97,376,377,381,384,388,390,392,395],{"class":99,"line":183},[97,378,380],{"class":379},"sWKss","const",[97,382,383],{"class":118}," app ",[97,385,387],{"class":386},"sqN5v","=",[97,389,324],{"class":192},[97,391,196],{"class":195},[97,393,394],{"class":118},"App",[97,396,270],{"class":195},[97,398,399,402,404,407,409,412],{"class":99,"line":202},[97,400,401],{"class":118},"app",[97,403,235],{"class":114},[97,405,406],{"class":192},"use",[97,408,196],{"class":195},[97,410,411],{"class":118},"VuePlot",[97,413,270],{"class":195},[97,415,416,418,420,423,425,428,431,433],{"class":99,"line":215},[97,417,401],{"class":118},[97,419,235],{"class":114},[97,421,422],{"class":192},"mount",[97,424,196],{"class":195},[97,426,427],{"class":129},"'",[97,429,430],{"class":133},"#app",[97,432,427],{"class":129},[97,434,270],{"class":195},[296,436,438],{"id":437},"local-registration","Local registration",[66,440,441,442,444],{},"Import ",[78,443,293],{}," directly in individual components without global registration:",[87,446,450],{"className":447,"code":448,"filename":449,"language":333,"meta":93,"style":93},"language-vue shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\u003Cscript setup lang=\"ts\">\nimport { VPlot } from '@memotux\u002Fvue-plot'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\" :marks=\"[]\" \u002F>\n\u003C\u002Ftemplate>\n","App.vue",[78,451,452,479,498,507,511,519,553],{"__ignoreMap":93},[97,453,454,457,461,464,467,469,472,474,476],{"class":99,"line":100},[97,455,456],{"class":114},"\u003C",[97,458,460],{"class":459},"sv6DF","script",[97,462,463],{"class":379}," setup",[97,465,466],{"class":379}," lang",[97,468,387],{"class":114},[97,470,471],{"class":129},"\"",[97,473,92],{"class":133},[97,475,471],{"class":129},[97,477,478],{"class":114},">\n",[97,480,481,483,485,488,490,492,494,496],{"class":99,"line":107},[97,482,111],{"class":110},[97,484,115],{"class":114},[97,486,487],{"class":118}," VPlot",[97,489,122],{"class":114},[97,491,126],{"class":125},[97,493,130],{"class":129},[97,495,173],{"class":133},[97,497,137],{"class":129},[97,499,500,503,505],{"class":99,"line":140},[97,501,502],{"class":114},"\u003C\u002F",[97,504,460],{"class":459},[97,506,478],{"class":114},[97,508,509],{"class":99,"line":157},[97,510,104],{"emptyLinePlaceholder":103},[97,512,513,515,517],{"class":99,"line":178},[97,514,456],{"class":114},[97,516,239],{"class":459},[97,518,478],{"class":114},[97,520,521,524,526,529,531,533,536,538,541,543,545,548,550],{"class":99,"line":183},[97,522,523],{"class":114},"  \u003C",[97,525,49],{"class":459},[97,527,528],{"class":379}," :width",[97,530,387],{"class":114},[97,532,471],{"class":129},[97,534,535],{"class":133},"680",[97,537,471],{"class":129},[97,539,540],{"class":379}," :marks",[97,542,387],{"class":114},[97,544,471],{"class":129},[97,546,547],{"class":133},"[]",[97,549,471],{"class":129},[97,551,552],{"class":114}," \u002F>\n",[97,554,555,557,559],{"class":99,"line":202},[97,556,502],{"class":114},[97,558,239],{"class":459},[97,560,478],{"class":114},[70,562,564],{"id":563},"summary","Summary",[566,567,568,581],"table",{},[569,570,571],"thead",{},[572,573,574,578],"tr",{},[575,576,577],"th",{},"Setup step",[575,579,580],{},"Required when",[582,583,584,597,607],"tbody",{},[572,585,586,590],{},[587,588,589],"td",{},"Vite plugin config",[587,591,592,593,596],{},"Using ",[78,594,595],{},"\u003CPlot*>"," mark components as children",[572,598,599,602],{},[587,600,601],{},"Global registration",[587,603,592,604,606],{},[78,605,293],{}," across many components",[572,608,609,611],{},[587,610,438],{},[587,612,592,613,615],{},[78,614,293],{}," in a few components",[70,617,619],{"id":618},"whats-next","What's next?",[621,622,623,630],"ul",{},[624,625,626,629],"li",{},[627,628,28],"a",{"href":29}," — Template-based mark definition",[624,631,632,634],{},[627,633,32],{"href":33}," — Functional mark definition",[636,637,638],"style",{},"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 .s4RQF, html code.shiki .s4RQF{--shiki-light:#4E8CA2;--shiki-default:#89DDFF;--shiki-dark:#9E9B93}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 .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 .sfbsL, html code.shiki .sfbsL{--shiki-light:#4D699B;--shiki-default:#82AAFF;--shiki-dark:#8BA4B0}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 .smkSw, html code.shiki .smkSw{--shiki-light:#77713F;--shiki-default:#EEFFFF;--shiki-dark:#C4B28A}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);}html pre.shiki code .sWKss, html code.shiki .sWKss{--shiki-light:#624C83;--shiki-default:#C792EA;--shiki-dark:#8992A7}html pre.shiki code .sqN5v, html code.shiki .sqN5v{--shiki-light:#77713F;--shiki-default:#89DDFF;--shiki-dark:#C4B28A}html pre.shiki code .sv6DF, html code.shiki .sv6DF{--shiki-light:#77713F;--shiki-default:#F07178;--shiki-dark:#C4B28A}",{"title":93,"searchDepth":107,"depth":107,"links":640},[641,642,646,647],{"id":72,"depth":107,"text":73},{"id":286,"depth":107,"text":287,"children":643},[644,645],{"id":298,"depth":140,"text":299},{"id":437,"depth":140,"text":438},{"id":563,"depth":107,"text":564},{"id":618,"depth":107,"text":619},"Configure the Vite plugin for mark components and register VPlot globally or locally to start building charts in your Vue 3 app.\n","md",null,{},{"title":653,"description":654},"Setup — Configure Vite and Register Components","Configure the Vite plugin for mark components and register VPlot globally via the Vue plugin or locally per component to start charting.\n","K_Gls9YJFvrJ5IxcFN4B1t0LzkDAvb-8dwCpvIWdZ24",[657,659],{"title":14,"path":15,"stem":16,"description":658,"children":-1},"Install @memotux\u002Fvue-plot and its @observablehq\u002Fplot peer dependency using pnpm, npm, or yarn, then verify the installation.\n",{"title":28,"path":29,"stem":30,"description":660,"children":-1},"Define Observable Plot marks as Vue template components with the Plot prefix, stack multiple marks, and understand the children-over-props rule.\n",1787848462538]