[{"data":1,"prerenderedAt":1099},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-introduction":60,"-getting-started-introduction-surround":1096},[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":10,"body":62,"description":1088,"extension":1089,"links":1090,"meta":1091,"navigation":260,"path":11,"seo":1092,"stem":12,"__hash__":1095},"docs\u002F1.getting-started\u002F1.introduction.md",{"type":63,"value":64,"toc":1078},"minimark",[65,77,82,85,361,379,383,390,442,446,449,454,460,696,700,707,1038,1042,1058,1062,1074],[66,67,68,69,76],"p",{},"Vue Plot is a set of Vue 3 components for building data visualizations with ",[70,71,75],"a",{"href":72,"rel":73},"https:\u002F\u002Fobservablehq.com\u002Fplot\u002F",[74],"nofollow","Observable Plot",".",[78,79,81],"h2",{"id":80},"what-is-vue-plot","What is Vue Plot?",[66,83,84],{},"Vue Plot wraps Observable Plot's grammar of graphics into idiomatic Vue components. Instead of imperatively building charts, you declare your visualization using Vue's template syntax.",[86,87,93],"pre",{"className":88,"code":89,"filename":90,"language":91,"meta":92,"style":92},"language-vue shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\u003Cscript setup lang=\"ts\">\nconst data = [\n  { name: \"A\", value: 28 },\n  { name: \"B\", value: 55 },\n  { name: \"C\", value: 42 },\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","",[94,95,96,132,149,185,212,239,245,255,262,272,294,342,352],"code",{"__ignoreMap":92},[97,98,101,105,109,113,116,119,123,127,129],"span",{"class":99,"line":100},"line",1,[97,102,104],{"class":103},"s4RQF","\u003C",[97,106,108],{"class":107},"sv6DF","script",[97,110,112],{"class":111},"sWKss"," setup",[97,114,115],{"class":111}," lang",[97,117,118],{"class":103},"=",[97,120,122],{"class":121},"sou9m","\"",[97,124,126],{"class":125},"s9-zz","ts",[97,128,122],{"class":121},[97,130,131],{"class":103},">\n",[97,133,135,138,142,145],{"class":99,"line":134},2,[97,136,137],{"class":111},"const",[97,139,141],{"class":140},"sOCQP"," data ",[97,143,118],{"class":144},"sqN5v",[97,146,148],{"class":147},"sfkeP"," [\n",[97,150,152,155,159,162,165,168,170,173,176,178,182],{"class":99,"line":151},3,[97,153,154],{"class":103},"  {",[97,156,158],{"class":157},"sNH7Q"," name",[97,160,161],{"class":103},":",[97,163,164],{"class":121}," \"",[97,166,167],{"class":125},"A",[97,169,122],{"class":121},[97,171,172],{"class":103},",",[97,174,175],{"class":157}," value",[97,177,161],{"class":103},[97,179,181],{"class":180},"svr3b"," 28",[97,183,184],{"class":103}," },\n",[97,186,188,190,192,194,196,199,201,203,205,207,210],{"class":99,"line":187},4,[97,189,154],{"class":103},[97,191,158],{"class":157},[97,193,161],{"class":103},[97,195,164],{"class":121},[97,197,198],{"class":125},"B",[97,200,122],{"class":121},[97,202,172],{"class":103},[97,204,175],{"class":157},[97,206,161],{"class":103},[97,208,209],{"class":180}," 55",[97,211,184],{"class":103},[97,213,215,217,219,221,223,226,228,230,232,234,237],{"class":99,"line":214},5,[97,216,154],{"class":103},[97,218,158],{"class":157},[97,220,161],{"class":103},[97,222,164],{"class":121},[97,224,225],{"class":125},"C",[97,227,122],{"class":121},[97,229,172],{"class":103},[97,231,175],{"class":157},[97,233,161],{"class":103},[97,235,236],{"class":180}," 42",[97,238,184],{"class":103},[97,240,242],{"class":99,"line":241},6,[97,243,244],{"class":147},"]\n",[97,246,248,251,253],{"class":99,"line":247},7,[97,249,250],{"class":103},"\u003C\u002F",[97,252,108],{"class":107},[97,254,131],{"class":103},[97,256,258],{"class":99,"line":257},8,[97,259,261],{"emptyLinePlaceholder":260},true,"\n",[97,263,265,267,270],{"class":99,"line":264},9,[97,266,104],{"class":103},[97,268,269],{"class":107},"template",[97,271,131],{"class":103},[97,273,275,278,280,283,285,287,290,292],{"class":99,"line":274},10,[97,276,277],{"class":103},"  \u003C",[97,279,49],{"class":107},[97,281,282],{"class":111}," :width",[97,284,118],{"class":103},[97,286,122],{"class":121},[97,288,289],{"class":125},"680",[97,291,122],{"class":121},[97,293,131],{"class":103},[97,295,297,300,303,306,308,310,313,315,318,320,322,325,327,330,332,334,337,339],{"class":99,"line":296},11,[97,298,299],{"class":103},"    \u003C",[97,301,302],{"class":107},"PlotBarY",[97,304,305],{"class":111}," :data",[97,307,118],{"class":103},[97,309,122],{"class":121},[97,311,312],{"class":125},"data",[97,314,122],{"class":121},[97,316,317],{"class":111}," x",[97,319,118],{"class":103},[97,321,122],{"class":121},[97,323,324],{"class":125},"name",[97,326,122],{"class":121},[97,328,329],{"class":111}," y",[97,331,118],{"class":103},[97,333,122],{"class":121},[97,335,336],{"class":125},"value",[97,338,122],{"class":121},[97,340,341],{"class":103}," \u002F>\n",[97,343,345,348,350],{"class":99,"line":344},12,[97,346,347],{"class":103},"  \u003C\u002F",[97,349,49],{"class":107},[97,351,131],{"class":103},[97,353,355,357,359],{"class":99,"line":354},13,[97,356,250],{"class":103},[97,358,269],{"class":107},[97,360,131],{"class":103},[66,362,363,364,367,368,371,372,371,375,378],{},"Each mark from Observable Plot maps to a ",[94,365,366],{},"\u003CPlot*>"," component — ",[94,369,370],{},"\u003CPlotBarY>",", ",[94,373,374],{},"\u003CPlotDot>",[94,376,377],{},"\u003CPlotLine>",", and many more.",[78,380,382],{"id":381},"why-use-vue-plot","Why use Vue Plot?",[66,384,385,386,389],{},"Observable Plot is comprehensive, but using it from Vue requires boilerplate — refs, ",[94,387,388],{},"onMounted",", manual DOM manipulation. Vue Plot eliminates that:",[391,392,393,406],"table",{},[394,395,396],"thead",{},[397,398,399,403],"tr",{},[400,401,402],"th",{},"Without Vue Plot",[400,404,405],{},"With Vue Plot",[407,408,409,418,426,434],"tbody",{},[397,410,411,415],{},[412,413,414],"td",{},"Manual DOM mounting",[412,416,417],{},"Declarative template",[397,419,420,423],{},[412,421,422],{},"Imperative mark creation",[412,424,425],{},"Component props",[397,427,428,431],{},[412,429,430],{},"Reactive wrappers needed",[412,432,433],{},"Built-in reactivity",[397,435,436,439],{},[412,437,438],{},"No type inference",[412,440,441],{},"Full TypeScript support",[78,443,445],{"id":444},"two-usage-patterns","Two usage patterns",[66,447,448],{},"Vue Plot supports two ways to define marks:",[450,451,453],"h3",{"id":452},"as-template-components","As template components",[66,455,456,457,459],{},"Use ",[94,458,366],{}," tags directly in your template. This is the most Vue-native approach:",[86,461,463],{"className":88,"code":462,"filename":90,"language":91,"meta":92,"style":92},"\u003Cscript setup lang=\"ts\">\nconst data = [\n  { name: \"A\", value: 28 },\n  { name: \"B\", value: 55 },\n  { name: \"C\", value: 42 },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\">\n    \u003CPlotBarY :data=\"data\" x=\"name\" y=\"value\" \u002F>\n    \u003CPlotRuleY :data=\"[0]\" stroke=\"gray\" \u002F>\n  \u003C\u002FVPlot>\n\u003C\u002Ftemplate>\n",[94,464,465,485,495,519,543,567,571,579,583,591,609,647,679,687],{"__ignoreMap":92},[97,466,467,469,471,473,475,477,479,481,483],{"class":99,"line":100},[97,468,104],{"class":103},[97,470,108],{"class":107},[97,472,112],{"class":111},[97,474,115],{"class":111},[97,476,118],{"class":103},[97,478,122],{"class":121},[97,480,126],{"class":125},[97,482,122],{"class":121},[97,484,131],{"class":103},[97,486,487,489,491,493],{"class":99,"line":134},[97,488,137],{"class":111},[97,490,141],{"class":140},[97,492,118],{"class":144},[97,494,148],{"class":147},[97,496,497,499,501,503,505,507,509,511,513,515,517],{"class":99,"line":151},[97,498,154],{"class":103},[97,500,158],{"class":157},[97,502,161],{"class":103},[97,504,164],{"class":121},[97,506,167],{"class":125},[97,508,122],{"class":121},[97,510,172],{"class":103},[97,512,175],{"class":157},[97,514,161],{"class":103},[97,516,181],{"class":180},[97,518,184],{"class":103},[97,520,521,523,525,527,529,531,533,535,537,539,541],{"class":99,"line":187},[97,522,154],{"class":103},[97,524,158],{"class":157},[97,526,161],{"class":103},[97,528,164],{"class":121},[97,530,198],{"class":125},[97,532,122],{"class":121},[97,534,172],{"class":103},[97,536,175],{"class":157},[97,538,161],{"class":103},[97,540,209],{"class":180},[97,542,184],{"class":103},[97,544,545,547,549,551,553,555,557,559,561,563,565],{"class":99,"line":214},[97,546,154],{"class":103},[97,548,158],{"class":157},[97,550,161],{"class":103},[97,552,164],{"class":121},[97,554,225],{"class":125},[97,556,122],{"class":121},[97,558,172],{"class":103},[97,560,175],{"class":157},[97,562,161],{"class":103},[97,564,236],{"class":180},[97,566,184],{"class":103},[97,568,569],{"class":99,"line":241},[97,570,244],{"class":147},[97,572,573,575,577],{"class":99,"line":247},[97,574,250],{"class":103},[97,576,108],{"class":107},[97,578,131],{"class":103},[97,580,581],{"class":99,"line":257},[97,582,261],{"emptyLinePlaceholder":260},[97,584,585,587,589],{"class":99,"line":264},[97,586,104],{"class":103},[97,588,269],{"class":107},[97,590,131],{"class":103},[97,592,593,595,597,599,601,603,605,607],{"class":99,"line":274},[97,594,277],{"class":103},[97,596,49],{"class":107},[97,598,282],{"class":111},[97,600,118],{"class":103},[97,602,122],{"class":121},[97,604,289],{"class":125},[97,606,122],{"class":121},[97,608,131],{"class":103},[97,610,611,613,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645],{"class":99,"line":296},[97,612,299],{"class":103},[97,614,302],{"class":107},[97,616,305],{"class":111},[97,618,118],{"class":103},[97,620,122],{"class":121},[97,622,312],{"class":125},[97,624,122],{"class":121},[97,626,317],{"class":111},[97,628,118],{"class":103},[97,630,122],{"class":121},[97,632,324],{"class":125},[97,634,122],{"class":121},[97,636,329],{"class":111},[97,638,118],{"class":103},[97,640,122],{"class":121},[97,642,336],{"class":125},[97,644,122],{"class":121},[97,646,341],{"class":103},[97,648,649,651,654,656,658,660,663,665,668,670,672,675,677],{"class":99,"line":344},[97,650,299],{"class":103},[97,652,653],{"class":107},"PlotRuleY",[97,655,305],{"class":111},[97,657,118],{"class":103},[97,659,122],{"class":121},[97,661,662],{"class":125},"[0]",[97,664,122],{"class":121},[97,666,667],{"class":111}," stroke",[97,669,118],{"class":103},[97,671,122],{"class":121},[97,673,674],{"class":125},"gray",[97,676,122],{"class":121},[97,678,341],{"class":103},[97,680,681,683,685],{"class":99,"line":354},[97,682,347],{"class":103},[97,684,49],{"class":107},[97,686,131],{"class":103},[97,688,690,692,694],{"class":99,"line":689},14,[97,691,250],{"class":103},[97,693,269],{"class":107},[97,695,131],{"class":103},[450,697,699],{"id":698},"as-functional-props","As functional props",[66,701,702,703,706],{},"Pass marks from ",[94,704,705],{},"@observablehq\u002Fplot"," as props. This pattern is useful when building charts programmatically:",[86,708,710],{"className":88,"code":709,"filename":90,"language":91,"meta":92,"style":92},"\u003Cscript setup lang=\"ts\">\nimport { barY, ruleY } from '@observablehq\u002Fplot'\n\nconst data = [\n  { name: \"A\", value: 28 },\n  { name: \"B\", value: 55 },\n  { name: \"C\", value: 42 },\n]\n\nconst options = {\n  width: 680,\n  marks: [\n    barY(data, { x: 'name', y: 'value' }),\n    ruleY([0], { stroke: 'gray' }),\n  ],\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot v-bind=\"options\" \u002F>\n\u003C\u002Ftemplate>\n",[94,711,712,732,764,768,778,802,826,850,854,858,870,883,892,937,971,979,985,994,999,1008,1029],{"__ignoreMap":92},[97,713,714,716,718,720,722,724,726,728,730],{"class":99,"line":100},[97,715,104],{"class":103},[97,717,108],{"class":107},[97,719,112],{"class":111},[97,721,115],{"class":111},[97,723,118],{"class":103},[97,725,122],{"class":121},[97,727,126],{"class":125},[97,729,122],{"class":121},[97,731,131],{"class":103},[97,733,734,738,741,744,746,749,752,756,759,761],{"class":99,"line":134},[97,735,737],{"class":736},"su7sr","import",[97,739,740],{"class":103}," {",[97,742,743],{"class":140}," barY",[97,745,172],{"class":103},[97,747,748],{"class":140}," ruleY",[97,750,751],{"class":103}," }",[97,753,755],{"class":754},"seCTJ"," from",[97,757,758],{"class":121}," '",[97,760,705],{"class":125},[97,762,763],{"class":121},"'\n",[97,765,766],{"class":99,"line":151},[97,767,261],{"emptyLinePlaceholder":260},[97,769,770,772,774,776],{"class":99,"line":187},[97,771,137],{"class":111},[97,773,141],{"class":140},[97,775,118],{"class":144},[97,777,148],{"class":147},[97,779,780,782,784,786,788,790,792,794,796,798,800],{"class":99,"line":214},[97,781,154],{"class":103},[97,783,158],{"class":157},[97,785,161],{"class":103},[97,787,164],{"class":121},[97,789,167],{"class":125},[97,791,122],{"class":121},[97,793,172],{"class":103},[97,795,175],{"class":157},[97,797,161],{"class":103},[97,799,181],{"class":180},[97,801,184],{"class":103},[97,803,804,806,808,810,812,814,816,818,820,822,824],{"class":99,"line":241},[97,805,154],{"class":103},[97,807,158],{"class":157},[97,809,161],{"class":103},[97,811,164],{"class":121},[97,813,198],{"class":125},[97,815,122],{"class":121},[97,817,172],{"class":103},[97,819,175],{"class":157},[97,821,161],{"class":103},[97,823,209],{"class":180},[97,825,184],{"class":103},[97,827,828,830,832,834,836,838,840,842,844,846,848],{"class":99,"line":247},[97,829,154],{"class":103},[97,831,158],{"class":157},[97,833,161],{"class":103},[97,835,164],{"class":121},[97,837,225],{"class":125},[97,839,122],{"class":121},[97,841,172],{"class":103},[97,843,175],{"class":157},[97,845,161],{"class":103},[97,847,236],{"class":180},[97,849,184],{"class":103},[97,851,852],{"class":99,"line":257},[97,853,244],{"class":147},[97,855,856],{"class":99,"line":264},[97,857,261],{"emptyLinePlaceholder":260},[97,859,860,862,865,867],{"class":99,"line":274},[97,861,137],{"class":111},[97,863,864],{"class":140}," options ",[97,866,118],{"class":144},[97,868,869],{"class":103}," {\n",[97,871,872,875,877,880],{"class":99,"line":296},[97,873,874],{"class":157},"  width",[97,876,161],{"class":103},[97,878,879],{"class":180}," 680",[97,881,882],{"class":103},",\n",[97,884,885,888,890],{"class":99,"line":344},[97,886,887],{"class":157},"  marks",[97,889,161],{"class":103},[97,891,148],{"class":147},[97,893,894,898,901,903,905,907,909,911,913,915,918,920,922,924,926,928,930,932,935],{"class":99,"line":354},[97,895,897],{"class":896},"sfbsL","    barY",[97,899,900],{"class":147},"(",[97,902,312],{"class":140},[97,904,172],{"class":103},[97,906,740],{"class":103},[97,908,317],{"class":157},[97,910,161],{"class":103},[97,912,758],{"class":121},[97,914,324],{"class":125},[97,916,917],{"class":121},"'",[97,919,172],{"class":103},[97,921,329],{"class":157},[97,923,161],{"class":103},[97,925,758],{"class":121},[97,927,336],{"class":125},[97,929,917],{"class":121},[97,931,751],{"class":103},[97,933,934],{"class":147},")",[97,936,882],{"class":103},[97,938,939,942,945,948,951,953,955,957,959,961,963,965,967,969],{"class":99,"line":689},[97,940,941],{"class":896},"    ruleY",[97,943,944],{"class":147},"([",[97,946,947],{"class":180},"0",[97,949,950],{"class":147},"]",[97,952,172],{"class":103},[97,954,740],{"class":103},[97,956,667],{"class":157},[97,958,161],{"class":103},[97,960,758],{"class":121},[97,962,674],{"class":125},[97,964,917],{"class":121},[97,966,751],{"class":103},[97,968,934],{"class":147},[97,970,882],{"class":103},[97,972,974,977],{"class":99,"line":973},15,[97,975,976],{"class":147},"  ]",[97,978,882],{"class":103},[97,980,982],{"class":99,"line":981},16,[97,983,984],{"class":103},"}\n",[97,986,988,990,992],{"class":99,"line":987},17,[97,989,250],{"class":103},[97,991,108],{"class":107},[97,993,131],{"class":103},[97,995,997],{"class":99,"line":996},18,[97,998,261],{"emptyLinePlaceholder":260},[97,1000,1002,1004,1006],{"class":99,"line":1001},19,[97,1003,104],{"class":103},[97,1005,269],{"class":107},[97,1007,131],{"class":103},[97,1009,1011,1013,1015,1018,1020,1022,1025,1027],{"class":99,"line":1010},20,[97,1012,277],{"class":103},[97,1014,49],{"class":107},[97,1016,1017],{"class":111}," v-bind",[97,1019,118],{"class":103},[97,1021,122],{"class":121},[97,1023,1024],{"class":125},"options",[97,1026,122],{"class":121},[97,1028,341],{"class":103},[97,1030,1032,1034,1036],{"class":99,"line":1031},21,[97,1033,250],{"class":103},[97,1035,269],{"class":107},[97,1037,131],{"class":103},[78,1039,1041],{"id":1040},"requirements","Requirements",[1043,1044,1045,1052],"ul",{},[1046,1047,1048],"li",{},[1049,1050,1051],"strong",{},"Vue 3.5+",[1046,1053,1054,1057],{},[1049,1055,1056],{},"Observable Plot 0.6.17+"," (peer dependency)",[78,1059,1061],{"id":1060},"whats-next","What's next?",[1043,1063,1064,1069],{},[1046,1065,1066,1068],{},[70,1067,14],{"href":15}," — Install Vue Plot in your project",[1046,1070,1071,1073],{},[70,1072,18],{"href":19}," — Configure Vite and register components",[1075,1076,1077],"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 .sOCQP, html code.shiki .sOCQP{--shiki-light:#545464;--shiki-default:#EEFFFF;--shiki-dark:#C5C9C5}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);}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 .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 .sfbsL, html code.shiki .sfbsL{--shiki-light:#4D699B;--shiki-default:#82AAFF;--shiki-dark:#8BA4B0}",{"title":92,"searchDepth":134,"depth":134,"links":1079},[1080,1081,1082,1086,1087],{"id":80,"depth":134,"text":81},{"id":381,"depth":134,"text":382},{"id":444,"depth":134,"text":445,"children":1083},[1084,1085],{"id":452,"depth":151,"text":453},{"id":698,"depth":151,"text":699},{"id":1040,"depth":134,"text":1041},{"id":1060,"depth":134,"text":1061},"Learn what Vue Plot is, how it wraps Observable Plot into Vue 3 components, and the two usage patterns — template marks and functional props.\n","md",null,{},{"title":1093,"description":1094},"Introduction — What is Vue Plot and How It Works","Discover what Vue Plot is, why it beats raw Observable Plot from Vue, and the two ways to build charts — template components or functional props.","1Q5ox_e_QdqiGIRK2JVujK-uQRYxIKkMlL7RomoqEfc",[1090,1097],{"title":14,"path":15,"stem":16,"description":1098,"children":-1},"Install @memotux\u002Fvue-plot and its @observablehq\u002Fplot peer dependency using pnpm, npm, or yarn, then verify the installation.\n",1787848462538]