[{"data":1,"prerenderedAt":1864},["ShallowReactive",2],{"navigation_docs":3,"-guide-marks-as-props":60,"-guide-marks-as-props-surround":1859},[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":32,"body":62,"description":1851,"extension":1852,"links":1853,"meta":1854,"navigation":184,"path":33,"seo":1855,"stem":34,"__hash__":1858},"docs\u002F2.guide\u002F2.marks-as-props.md",{"type":63,"value":64,"toc":1842},"minimark",[65,78,83,451,455,458,490,494,500,913,917,920,1326,1330,1336,1720,1735,1739,1822,1826,1838],[66,67,68,69,73,74,77],"p",{},"Pass marks from ",[70,71,72],"code",{},"@observablehq\u002Fplot"," through the ",[70,75,76],{},"marks"," prop. This functional pattern does not require the Vite plugin configuration.",[79,80,82],"h2",{"id":81},"basic-example","Basic example",[84,85,91],"pre",{"className":86,"code":87,"filename":88,"language":89,"meta":90,"style":90},"language-vue shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\u003Cscript setup lang=\"ts\">\nimport { VPlot } from '@memotux\u002Fvue-plot'\nimport { barY } from '@observablehq\u002Fplot'\n\nconst data = [\n  { name: 'A', value: 10 },\n  { name: 'B', value: 20 },\n  { name: 'C', value: 15 },\n]\n\nconst options = {\n  width: 680,\n  marks: [barY(data, { x: 'name', y: 'value' })],\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot v-bind=\"options\" \u002F>\n\u003C\u002Ftemplate>\n","App.vue","vue","",[70,92,93,129,159,179,186,202,238,265,292,298,303,316,330,388,394,404,409,419,442],{"__ignoreMap":90},[94,95,98,102,106,110,113,116,120,124,126],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"s4RQF","\u003C",[94,103,105],{"class":104},"sv6DF","script",[94,107,109],{"class":108},"sWKss"," setup",[94,111,112],{"class":108}," lang",[94,114,115],{"class":100},"=",[94,117,119],{"class":118},"sou9m","\"",[94,121,123],{"class":122},"s9-zz","ts",[94,125,119],{"class":118},[94,127,128],{"class":100},">\n",[94,130,132,136,139,143,146,150,153,156],{"class":96,"line":131},2,[94,133,135],{"class":134},"su7sr","import",[94,137,138],{"class":100}," {",[94,140,142],{"class":141},"sOCQP"," VPlot",[94,144,145],{"class":100}," }",[94,147,149],{"class":148},"seCTJ"," from",[94,151,152],{"class":118}," '",[94,154,155],{"class":122},"@memotux\u002Fvue-plot",[94,157,158],{"class":118},"'\n",[94,160,162,164,166,169,171,173,175,177],{"class":96,"line":161},3,[94,163,135],{"class":134},[94,165,138],{"class":100},[94,167,168],{"class":141}," barY",[94,170,145],{"class":100},[94,172,149],{"class":148},[94,174,152],{"class":118},[94,176,72],{"class":122},[94,178,158],{"class":118},[94,180,182],{"class":96,"line":181},4,[94,183,185],{"emptyLinePlaceholder":184},true,"\n",[94,187,189,192,195,198],{"class":96,"line":188},5,[94,190,191],{"class":108},"const",[94,193,194],{"class":141}," data ",[94,196,115],{"class":197},"sqN5v",[94,199,201],{"class":200},"sfkeP"," [\n",[94,203,205,208,212,215,217,220,223,226,229,231,235],{"class":96,"line":204},6,[94,206,207],{"class":100},"  {",[94,209,211],{"class":210},"sNH7Q"," name",[94,213,214],{"class":100},":",[94,216,152],{"class":118},[94,218,219],{"class":122},"A",[94,221,222],{"class":118},"'",[94,224,225],{"class":100},",",[94,227,228],{"class":210}," value",[94,230,214],{"class":100},[94,232,234],{"class":233},"svr3b"," 10",[94,236,237],{"class":100}," },\n",[94,239,241,243,245,247,249,252,254,256,258,260,263],{"class":96,"line":240},7,[94,242,207],{"class":100},[94,244,211],{"class":210},[94,246,214],{"class":100},[94,248,152],{"class":118},[94,250,251],{"class":122},"B",[94,253,222],{"class":118},[94,255,225],{"class":100},[94,257,228],{"class":210},[94,259,214],{"class":100},[94,261,262],{"class":233}," 20",[94,264,237],{"class":100},[94,266,268,270,272,274,276,279,281,283,285,287,290],{"class":96,"line":267},8,[94,269,207],{"class":100},[94,271,211],{"class":210},[94,273,214],{"class":100},[94,275,152],{"class":118},[94,277,278],{"class":122},"C",[94,280,222],{"class":118},[94,282,225],{"class":100},[94,284,228],{"class":210},[94,286,214],{"class":100},[94,288,289],{"class":233}," 15",[94,291,237],{"class":100},[94,293,295],{"class":96,"line":294},9,[94,296,297],{"class":200},"]\n",[94,299,301],{"class":96,"line":300},10,[94,302,185],{"emptyLinePlaceholder":184},[94,304,306,308,311,313],{"class":96,"line":305},11,[94,307,191],{"class":108},[94,309,310],{"class":141}," options ",[94,312,115],{"class":197},[94,314,315],{"class":100}," {\n",[94,317,319,322,324,327],{"class":96,"line":318},12,[94,320,321],{"class":210},"  width",[94,323,214],{"class":100},[94,325,326],{"class":233}," 680",[94,328,329],{"class":100},",\n",[94,331,333,336,338,341,345,348,351,353,355,358,360,362,365,367,369,372,374,376,379,381,383,386],{"class":96,"line":332},13,[94,334,335],{"class":210},"  marks",[94,337,214],{"class":100},[94,339,340],{"class":200}," [",[94,342,344],{"class":343},"sfbsL","barY",[94,346,347],{"class":200},"(",[94,349,350],{"class":141},"data",[94,352,225],{"class":100},[94,354,138],{"class":100},[94,356,357],{"class":210}," x",[94,359,214],{"class":100},[94,361,152],{"class":118},[94,363,364],{"class":122},"name",[94,366,222],{"class":118},[94,368,225],{"class":100},[94,370,371],{"class":210}," y",[94,373,214],{"class":100},[94,375,152],{"class":118},[94,377,378],{"class":122},"value",[94,380,222],{"class":118},[94,382,145],{"class":100},[94,384,385],{"class":200},")]",[94,387,329],{"class":100},[94,389,391],{"class":96,"line":390},14,[94,392,393],{"class":100},"}\n",[94,395,397,400,402],{"class":96,"line":396},15,[94,398,399],{"class":100},"\u003C\u002F",[94,401,105],{"class":104},[94,403,128],{"class":100},[94,405,407],{"class":96,"line":406},16,[94,408,185],{"emptyLinePlaceholder":184},[94,410,412,414,417],{"class":96,"line":411},17,[94,413,101],{"class":100},[94,415,416],{"class":104},"template",[94,418,128],{"class":100},[94,420,422,425,427,430,432,434,437,439],{"class":96,"line":421},18,[94,423,424],{"class":100},"  \u003C",[94,426,49],{"class":104},[94,428,429],{"class":108}," v-bind",[94,431,115],{"class":100},[94,433,119],{"class":118},[94,435,436],{"class":122},"options",[94,438,119],{"class":118},[94,440,441],{"class":100}," \u002F>\n",[94,443,445,447,449],{"class":96,"line":444},19,[94,446,399],{"class":100},[94,448,416],{"class":104},[94,450,128],{"class":100},[79,452,454],{"id":453},"when-to-use-this-pattern","When to use this pattern",[66,456,457],{},"Choose marks-as-props when:",[459,460,461,470,480,483],"ul",{},[462,463,464,465,469],"li",{},"Building charts ",[466,467,468],"strong",{},"programmatically"," from configuration objects",[462,471,472,473,476,477],{},"Sharing chart configurations as ",[466,474,475],{},"JSON"," or ",[466,478,479],{},"computed data",[462,481,482],{},"You want to skip the Vite custom element configuration",[462,484,485,486,489],{},"Working with ",[466,487,488],{},"dynamic mark selection"," based on user input",[79,491,493],{"id":492},"multiple-marks","Multiple marks",[66,495,496,497,499],{},"Combine multiple mark functions in the ",[70,498,76],{}," array:",[84,501,503],{"className":86,"code":502,"filename":88,"language":89,"meta":90,"style":90},"\u003Cscript setup lang=\"ts\">\nimport { VPlot } from '@memotux\u002Fvue-plot'\nimport { barY, ruleY, text } from '@observablehq\u002Fplot'\n\nconst data = [\n  { name: 'A', value: 10 },\n  { name: 'B', value: 20 },\n  { name: 'C', value: 15 },\n]\n\nconst options = {\n  width: 680,\n  height: 400,\n  marks: [\n    barY(data, { x: 'name', y: 'value' }),\n    ruleY([0], { stroke: 'gray' }),\n    text(data, { x: 'name', y: 'value', dy: -8, textAnchor: 'middle' }),\n  ],\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot v-bind=\"options\" \u002F>\n\u003C\u002Ftemplate>\n",[70,504,505,525,543,571,575,585,609,633,657,661,665,675,685,697,705,747,783,851,858,862,871,876,885,904],{"__ignoreMap":90},[94,506,507,509,511,513,515,517,519,521,523],{"class":96,"line":97},[94,508,101],{"class":100},[94,510,105],{"class":104},[94,512,109],{"class":108},[94,514,112],{"class":108},[94,516,115],{"class":100},[94,518,119],{"class":118},[94,520,123],{"class":122},[94,522,119],{"class":118},[94,524,128],{"class":100},[94,526,527,529,531,533,535,537,539,541],{"class":96,"line":131},[94,528,135],{"class":134},[94,530,138],{"class":100},[94,532,142],{"class":141},[94,534,145],{"class":100},[94,536,149],{"class":148},[94,538,152],{"class":118},[94,540,155],{"class":122},[94,542,158],{"class":118},[94,544,545,547,549,551,553,556,558,561,563,565,567,569],{"class":96,"line":161},[94,546,135],{"class":134},[94,548,138],{"class":100},[94,550,168],{"class":141},[94,552,225],{"class":100},[94,554,555],{"class":141}," ruleY",[94,557,225],{"class":100},[94,559,560],{"class":141}," text",[94,562,145],{"class":100},[94,564,149],{"class":148},[94,566,152],{"class":118},[94,568,72],{"class":122},[94,570,158],{"class":118},[94,572,573],{"class":96,"line":181},[94,574,185],{"emptyLinePlaceholder":184},[94,576,577,579,581,583],{"class":96,"line":188},[94,578,191],{"class":108},[94,580,194],{"class":141},[94,582,115],{"class":197},[94,584,201],{"class":200},[94,586,587,589,591,593,595,597,599,601,603,605,607],{"class":96,"line":204},[94,588,207],{"class":100},[94,590,211],{"class":210},[94,592,214],{"class":100},[94,594,152],{"class":118},[94,596,219],{"class":122},[94,598,222],{"class":118},[94,600,225],{"class":100},[94,602,228],{"class":210},[94,604,214],{"class":100},[94,606,234],{"class":233},[94,608,237],{"class":100},[94,610,611,613,615,617,619,621,623,625,627,629,631],{"class":96,"line":240},[94,612,207],{"class":100},[94,614,211],{"class":210},[94,616,214],{"class":100},[94,618,152],{"class":118},[94,620,251],{"class":122},[94,622,222],{"class":118},[94,624,225],{"class":100},[94,626,228],{"class":210},[94,628,214],{"class":100},[94,630,262],{"class":233},[94,632,237],{"class":100},[94,634,635,637,639,641,643,645,647,649,651,653,655],{"class":96,"line":267},[94,636,207],{"class":100},[94,638,211],{"class":210},[94,640,214],{"class":100},[94,642,152],{"class":118},[94,644,278],{"class":122},[94,646,222],{"class":118},[94,648,225],{"class":100},[94,650,228],{"class":210},[94,652,214],{"class":100},[94,654,289],{"class":233},[94,656,237],{"class":100},[94,658,659],{"class":96,"line":294},[94,660,297],{"class":200},[94,662,663],{"class":96,"line":300},[94,664,185],{"emptyLinePlaceholder":184},[94,666,667,669,671,673],{"class":96,"line":305},[94,668,191],{"class":108},[94,670,310],{"class":141},[94,672,115],{"class":197},[94,674,315],{"class":100},[94,676,677,679,681,683],{"class":96,"line":318},[94,678,321],{"class":210},[94,680,214],{"class":100},[94,682,326],{"class":233},[94,684,329],{"class":100},[94,686,687,690,692,695],{"class":96,"line":332},[94,688,689],{"class":210},"  height",[94,691,214],{"class":100},[94,693,694],{"class":233}," 400",[94,696,329],{"class":100},[94,698,699,701,703],{"class":96,"line":390},[94,700,335],{"class":210},[94,702,214],{"class":100},[94,704,201],{"class":200},[94,706,707,710,712,714,716,718,720,722,724,726,728,730,732,734,736,738,740,742,745],{"class":96,"line":396},[94,708,709],{"class":343},"    barY",[94,711,347],{"class":200},[94,713,350],{"class":141},[94,715,225],{"class":100},[94,717,138],{"class":100},[94,719,357],{"class":210},[94,721,214],{"class":100},[94,723,152],{"class":118},[94,725,364],{"class":122},[94,727,222],{"class":118},[94,729,225],{"class":100},[94,731,371],{"class":210},[94,733,214],{"class":100},[94,735,152],{"class":118},[94,737,378],{"class":122},[94,739,222],{"class":118},[94,741,145],{"class":100},[94,743,744],{"class":200},")",[94,746,329],{"class":100},[94,748,749,752,755,758,761,763,765,768,770,772,775,777,779,781],{"class":96,"line":406},[94,750,751],{"class":343},"    ruleY",[94,753,754],{"class":200},"([",[94,756,757],{"class":233},"0",[94,759,760],{"class":200},"]",[94,762,225],{"class":100},[94,764,138],{"class":100},[94,766,767],{"class":210}," stroke",[94,769,214],{"class":100},[94,771,152],{"class":118},[94,773,774],{"class":122},"gray",[94,776,222],{"class":118},[94,778,145],{"class":100},[94,780,744],{"class":200},[94,782,329],{"class":100},[94,784,785,788,790,792,794,796,798,800,802,804,806,808,810,812,814,816,818,820,823,825,828,831,833,836,838,840,843,845,847,849],{"class":96,"line":411},[94,786,787],{"class":343},"    text",[94,789,347],{"class":200},[94,791,350],{"class":141},[94,793,225],{"class":100},[94,795,138],{"class":100},[94,797,357],{"class":210},[94,799,214],{"class":100},[94,801,152],{"class":118},[94,803,364],{"class":122},[94,805,222],{"class":118},[94,807,225],{"class":100},[94,809,371],{"class":210},[94,811,214],{"class":100},[94,813,152],{"class":118},[94,815,378],{"class":122},[94,817,222],{"class":118},[94,819,225],{"class":100},[94,821,822],{"class":210}," dy",[94,824,214],{"class":100},[94,826,827],{"class":197}," -",[94,829,830],{"class":233},"8",[94,832,225],{"class":100},[94,834,835],{"class":210}," textAnchor",[94,837,214],{"class":100},[94,839,152],{"class":118},[94,841,842],{"class":122},"middle",[94,844,222],{"class":118},[94,846,145],{"class":100},[94,848,744],{"class":200},[94,850,329],{"class":100},[94,852,853,856],{"class":96,"line":421},[94,854,855],{"class":200},"  ]",[94,857,329],{"class":100},[94,859,860],{"class":96,"line":444},[94,861,393],{"class":100},[94,863,865,867,869],{"class":96,"line":864},20,[94,866,399],{"class":100},[94,868,105],{"class":104},[94,870,128],{"class":100},[94,872,874],{"class":96,"line":873},21,[94,875,185],{"emptyLinePlaceholder":184},[94,877,879,881,883],{"class":96,"line":878},22,[94,880,101],{"class":100},[94,882,416],{"class":104},[94,884,128],{"class":100},[94,886,888,890,892,894,896,898,900,902],{"class":96,"line":887},23,[94,889,424],{"class":100},[94,891,49],{"class":104},[94,893,429],{"class":108},[94,895,115],{"class":100},[94,897,119],{"class":118},[94,899,436],{"class":122},[94,901,119],{"class":118},[94,903,441],{"class":100},[94,905,907,909,911],{"class":96,"line":906},24,[94,908,399],{"class":100},[94,910,416],{"class":104},[94,912,128],{"class":100},[79,914,916],{"id":915},"programmatic-chart-building","Programmatic chart building",[66,918,919],{},"This pattern works well when building charts from configuration:",[84,921,923],{"className":86,"code":922,"filename":88,"language":89,"meta":90,"style":90},"\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { VPlot } from '@memotux\u002Fvue-plot'\nimport * as Plot from '@observablehq\u002Fplot'\n\nconst props = defineProps({\n  chartType: String,\n  data: Array,\n})\n\nconst chartConfig = computed(() => {\n  const markFn = {\n    bar: Plot.barY,\n    dot: Plot.dot,\n    line: Plot.lineY,\n    area: Plot.areaY,\n  }[props.chartType] ?? Plot.barY\n\n  return {\n    width: 680,\n    marks: [markFn(props.data, { x: 'name', y: 'value' })],\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot v-bind=\"chartConfig\" \u002F>\n\u003C\u002Ftemplate>\n",[70,924,925,945,964,982,1004,1008,1025,1037,1049,1057,1061,1082,1095,1112,1128,1144,1160,1189,1193,1201,1212,1264,1269,1275,1283,1288,1297,1317],{"__ignoreMap":90},[94,926,927,929,931,933,935,937,939,941,943],{"class":96,"line":97},[94,928,101],{"class":100},[94,930,105],{"class":104},[94,932,109],{"class":108},[94,934,112],{"class":108},[94,936,115],{"class":100},[94,938,119],{"class":118},[94,940,123],{"class":122},[94,942,119],{"class":118},[94,944,128],{"class":100},[94,946,947,949,951,954,956,958,960,962],{"class":96,"line":131},[94,948,135],{"class":134},[94,950,138],{"class":100},[94,952,953],{"class":141}," computed",[94,955,145],{"class":100},[94,957,149],{"class":148},[94,959,152],{"class":118},[94,961,89],{"class":122},[94,963,158],{"class":118},[94,965,966,968,970,972,974,976,978,980],{"class":96,"line":161},[94,967,135],{"class":134},[94,969,138],{"class":100},[94,971,142],{"class":141},[94,973,145],{"class":100},[94,975,149],{"class":148},[94,977,152],{"class":118},[94,979,155],{"class":122},[94,981,158],{"class":118},[94,983,984,986,990,993,996,998,1000,1002],{"class":96,"line":181},[94,985,135],{"class":134},[94,987,989],{"class":988},"sAUSp"," *",[94,991,992],{"class":148}," as",[94,994,995],{"class":141}," Plot",[94,997,149],{"class":148},[94,999,152],{"class":118},[94,1001,72],{"class":122},[94,1003,158],{"class":118},[94,1005,1006],{"class":96,"line":188},[94,1007,185],{"emptyLinePlaceholder":184},[94,1009,1010,1012,1015,1017,1020,1022],{"class":96,"line":204},[94,1011,191],{"class":108},[94,1013,1014],{"class":141}," props ",[94,1016,115],{"class":197},[94,1018,1019],{"class":343}," defineProps",[94,1021,347],{"class":200},[94,1023,1024],{"class":100},"{\n",[94,1026,1027,1030,1032,1035],{"class":96,"line":240},[94,1028,1029],{"class":210},"  chartType",[94,1031,214],{"class":100},[94,1033,1034],{"class":141}," String",[94,1036,329],{"class":100},[94,1038,1039,1042,1044,1047],{"class":96,"line":267},[94,1040,1041],{"class":210},"  data",[94,1043,214],{"class":100},[94,1045,1046],{"class":141}," Array",[94,1048,329],{"class":100},[94,1050,1051,1054],{"class":96,"line":294},[94,1052,1053],{"class":100},"}",[94,1055,1056],{"class":200},")\n",[94,1058,1059],{"class":96,"line":300},[94,1060,185],{"emptyLinePlaceholder":184},[94,1062,1063,1065,1068,1070,1072,1074,1077,1080],{"class":96,"line":305},[94,1064,191],{"class":108},[94,1066,1067],{"class":141}," chartConfig ",[94,1069,115],{"class":197},[94,1071,953],{"class":343},[94,1073,347],{"class":200},[94,1075,1076],{"class":100},"()",[94,1078,1079],{"class":108}," =>",[94,1081,315],{"class":100},[94,1083,1084,1087,1090,1093],{"class":96,"line":318},[94,1085,1086],{"class":108},"  const",[94,1088,1089],{"class":141}," markFn",[94,1091,1092],{"class":197}," =",[94,1094,315],{"class":100},[94,1096,1097,1100,1102,1104,1107,1110],{"class":96,"line":332},[94,1098,1099],{"class":210},"    bar",[94,1101,214],{"class":100},[94,1103,995],{"class":141},[94,1105,1106],{"class":100},".",[94,1108,344],{"class":1109},"smkSw",[94,1111,329],{"class":100},[94,1113,1114,1117,1119,1121,1123,1126],{"class":96,"line":390},[94,1115,1116],{"class":210},"    dot",[94,1118,214],{"class":100},[94,1120,995],{"class":141},[94,1122,1106],{"class":100},[94,1124,1125],{"class":1109},"dot",[94,1127,329],{"class":100},[94,1129,1130,1133,1135,1137,1139,1142],{"class":96,"line":396},[94,1131,1132],{"class":210},"    line",[94,1134,214],{"class":100},[94,1136,995],{"class":141},[94,1138,1106],{"class":100},[94,1140,1141],{"class":1109},"lineY",[94,1143,329],{"class":100},[94,1145,1146,1149,1151,1153,1155,1158],{"class":96,"line":406},[94,1147,1148],{"class":210},"    area",[94,1150,214],{"class":100},[94,1152,995],{"class":141},[94,1154,1106],{"class":100},[94,1156,1157],{"class":1109},"areaY",[94,1159,329],{"class":100},[94,1161,1162,1165,1169,1172,1174,1177,1179,1182,1184,1186],{"class":96,"line":411},[94,1163,1164],{"class":100},"  }",[94,1166,1168],{"class":1167},"s7e5W","[",[94,1170,1171],{"class":141},"props",[94,1173,1106],{"class":100},[94,1175,1176],{"class":1109},"chartType",[94,1178,760],{"class":1167},[94,1180,1181],{"class":197}," ??",[94,1183,995],{"class":141},[94,1185,1106],{"class":100},[94,1187,1188],{"class":1109},"barY\n",[94,1190,1191],{"class":96,"line":421},[94,1192,185],{"emptyLinePlaceholder":184},[94,1194,1195,1199],{"class":96,"line":444},[94,1196,1198],{"class":1197},"s--4S","  return",[94,1200,315],{"class":100},[94,1202,1203,1206,1208,1210],{"class":96,"line":864},[94,1204,1205],{"class":210},"    width",[94,1207,214],{"class":100},[94,1209,326],{"class":233},[94,1211,329],{"class":100},[94,1213,1214,1217,1219,1221,1224,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262],{"class":96,"line":873},[94,1215,1216],{"class":210},"    marks",[94,1218,214],{"class":100},[94,1220,340],{"class":1167},[94,1222,1223],{"class":343},"markFn",[94,1225,347],{"class":1167},[94,1227,1171],{"class":141},[94,1229,1106],{"class":100},[94,1231,350],{"class":1109},[94,1233,225],{"class":100},[94,1235,138],{"class":100},[94,1237,357],{"class":210},[94,1239,214],{"class":100},[94,1241,152],{"class":118},[94,1243,364],{"class":122},[94,1245,222],{"class":118},[94,1247,225],{"class":100},[94,1249,371],{"class":210},[94,1251,214],{"class":100},[94,1253,152],{"class":118},[94,1255,378],{"class":122},[94,1257,222],{"class":118},[94,1259,145],{"class":100},[94,1261,385],{"class":1167},[94,1263,329],{"class":100},[94,1265,1266],{"class":96,"line":878},[94,1267,1268],{"class":100},"  }\n",[94,1270,1271,1273],{"class":96,"line":887},[94,1272,1053],{"class":100},[94,1274,1056],{"class":200},[94,1276,1277,1279,1281],{"class":96,"line":906},[94,1278,399],{"class":100},[94,1280,105],{"class":104},[94,1282,128],{"class":100},[94,1284,1286],{"class":96,"line":1285},25,[94,1287,185],{"emptyLinePlaceholder":184},[94,1289,1291,1293,1295],{"class":96,"line":1290},26,[94,1292,101],{"class":100},[94,1294,416],{"class":104},[94,1296,128],{"class":100},[94,1298,1300,1302,1304,1306,1308,1310,1313,1315],{"class":96,"line":1299},27,[94,1301,424],{"class":100},[94,1303,49],{"class":104},[94,1305,429],{"class":108},[94,1307,115],{"class":100},[94,1309,119],{"class":118},[94,1311,1312],{"class":122},"chartConfig",[94,1314,119],{"class":118},[94,1316,441],{"class":100},[94,1318,1320,1322,1324],{"class":96,"line":1319},28,[94,1321,399],{"class":100},[94,1323,416],{"class":104},[94,1325,128],{"class":100},[79,1327,1329],{"id":1328},"using-with-reactive-data","Using with reactive data",[66,1331,1332,1333,1335],{},"The ",[70,1334,76],{}," prop is reactive — when you update the marks array, the plot re-renders:",[84,1337,1339],{"className":86,"code":1338,"filename":88,"language":89,"meta":90,"style":90},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { VPlot } from '@memotux\u002Fvue-plot'\nimport { barY } from '@observablehq\u002Fplot'\n\nconst data = ref([\n  { name: 'A', value: 10 },\n  { name: 'B', value: 20 },\n])\n\nconst marks = computed(() => [\n  barY(data.value, { x: 'name', y: 'value' }),\n])\n\nfunction addEntry() {\n  data.value = [...data.value, { name: 'D', value: 15 }]\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\" :marks=\"marks\" \u002F>\n  \u003Cbutton @click=\"addEntry\">Add Entry\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[70,1340,1341,1361,1384,1402,1420,1424,1437,1461,1485,1490,1494,1513,1558,1562,1566,1578,1626,1630,1638,1642,1650,1681,1712],{"__ignoreMap":90},[94,1342,1343,1345,1347,1349,1351,1353,1355,1357,1359],{"class":96,"line":97},[94,1344,101],{"class":100},[94,1346,105],{"class":104},[94,1348,109],{"class":108},[94,1350,112],{"class":108},[94,1352,115],{"class":100},[94,1354,119],{"class":118},[94,1356,123],{"class":122},[94,1358,119],{"class":118},[94,1360,128],{"class":100},[94,1362,1363,1365,1367,1370,1372,1374,1376,1378,1380,1382],{"class":96,"line":131},[94,1364,135],{"class":134},[94,1366,138],{"class":100},[94,1368,1369],{"class":141}," ref",[94,1371,225],{"class":100},[94,1373,953],{"class":141},[94,1375,145],{"class":100},[94,1377,149],{"class":148},[94,1379,152],{"class":118},[94,1381,89],{"class":122},[94,1383,158],{"class":118},[94,1385,1386,1388,1390,1392,1394,1396,1398,1400],{"class":96,"line":161},[94,1387,135],{"class":134},[94,1389,138],{"class":100},[94,1391,142],{"class":141},[94,1393,145],{"class":100},[94,1395,149],{"class":148},[94,1397,152],{"class":118},[94,1399,155],{"class":122},[94,1401,158],{"class":118},[94,1403,1404,1406,1408,1410,1412,1414,1416,1418],{"class":96,"line":181},[94,1405,135],{"class":134},[94,1407,138],{"class":100},[94,1409,168],{"class":141},[94,1411,145],{"class":100},[94,1413,149],{"class":148},[94,1415,152],{"class":118},[94,1417,72],{"class":122},[94,1419,158],{"class":118},[94,1421,1422],{"class":96,"line":188},[94,1423,185],{"emptyLinePlaceholder":184},[94,1425,1426,1428,1430,1432,1434],{"class":96,"line":204},[94,1427,191],{"class":108},[94,1429,194],{"class":141},[94,1431,115],{"class":197},[94,1433,1369],{"class":343},[94,1435,1436],{"class":200},"([\n",[94,1438,1439,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459],{"class":96,"line":240},[94,1440,207],{"class":100},[94,1442,211],{"class":210},[94,1444,214],{"class":100},[94,1446,152],{"class":118},[94,1448,219],{"class":122},[94,1450,222],{"class":118},[94,1452,225],{"class":100},[94,1454,228],{"class":210},[94,1456,214],{"class":100},[94,1458,234],{"class":233},[94,1460,237],{"class":100},[94,1462,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483],{"class":96,"line":267},[94,1464,207],{"class":100},[94,1466,211],{"class":210},[94,1468,214],{"class":100},[94,1470,152],{"class":118},[94,1472,251],{"class":122},[94,1474,222],{"class":118},[94,1476,225],{"class":100},[94,1478,228],{"class":210},[94,1480,214],{"class":100},[94,1482,262],{"class":233},[94,1484,237],{"class":100},[94,1486,1487],{"class":96,"line":294},[94,1488,1489],{"class":200},"])\n",[94,1491,1492],{"class":96,"line":300},[94,1493,185],{"emptyLinePlaceholder":184},[94,1495,1496,1498,1501,1503,1505,1507,1509,1511],{"class":96,"line":305},[94,1497,191],{"class":108},[94,1499,1500],{"class":141}," marks ",[94,1502,115],{"class":197},[94,1504,953],{"class":343},[94,1506,347],{"class":200},[94,1508,1076],{"class":100},[94,1510,1079],{"class":108},[94,1512,201],{"class":200},[94,1514,1515,1518,1520,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556],{"class":96,"line":318},[94,1516,1517],{"class":343},"  barY",[94,1519,347],{"class":200},[94,1521,350],{"class":141},[94,1523,1106],{"class":100},[94,1525,378],{"class":1109},[94,1527,225],{"class":100},[94,1529,138],{"class":100},[94,1531,357],{"class":210},[94,1533,214],{"class":100},[94,1535,152],{"class":118},[94,1537,364],{"class":122},[94,1539,222],{"class":118},[94,1541,225],{"class":100},[94,1543,371],{"class":210},[94,1545,214],{"class":100},[94,1547,152],{"class":118},[94,1549,378],{"class":122},[94,1551,222],{"class":118},[94,1553,145],{"class":100},[94,1555,744],{"class":200},[94,1557,329],{"class":100},[94,1559,1560],{"class":96,"line":332},[94,1561,1489],{"class":200},[94,1563,1564],{"class":96,"line":390},[94,1565,185],{"emptyLinePlaceholder":184},[94,1567,1568,1571,1574,1576],{"class":96,"line":396},[94,1569,1570],{"class":108},"function",[94,1572,1573],{"class":343}," addEntry",[94,1575,1076],{"class":100},[94,1577,315],{"class":100},[94,1579,1580,1582,1584,1586,1588,1590,1593,1595,1597,1599,1601,1603,1605,1607,1609,1612,1614,1616,1618,1620,1622,1624],{"class":96,"line":406},[94,1581,1041],{"class":141},[94,1583,1106],{"class":100},[94,1585,378],{"class":1109},[94,1587,1092],{"class":197},[94,1589,340],{"class":1167},[94,1591,1592],{"class":197},"...",[94,1594,350],{"class":141},[94,1596,1106],{"class":100},[94,1598,378],{"class":1109},[94,1600,225],{"class":100},[94,1602,138],{"class":100},[94,1604,211],{"class":210},[94,1606,214],{"class":100},[94,1608,152],{"class":118},[94,1610,1611],{"class":122},"D",[94,1613,222],{"class":118},[94,1615,225],{"class":100},[94,1617,228],{"class":210},[94,1619,214],{"class":100},[94,1621,289],{"class":233},[94,1623,145],{"class":100},[94,1625,297],{"class":1167},[94,1627,1628],{"class":96,"line":411},[94,1629,393],{"class":100},[94,1631,1632,1634,1636],{"class":96,"line":421},[94,1633,399],{"class":100},[94,1635,105],{"class":104},[94,1637,128],{"class":100},[94,1639,1640],{"class":96,"line":444},[94,1641,185],{"emptyLinePlaceholder":184},[94,1643,1644,1646,1648],{"class":96,"line":864},[94,1645,101],{"class":100},[94,1647,416],{"class":104},[94,1649,128],{"class":100},[94,1651,1652,1654,1656,1659,1661,1663,1666,1668,1671,1673,1675,1677,1679],{"class":96,"line":873},[94,1653,424],{"class":100},[94,1655,49],{"class":104},[94,1657,1658],{"class":108}," :width",[94,1660,115],{"class":100},[94,1662,119],{"class":118},[94,1664,1665],{"class":122},"680",[94,1667,119],{"class":118},[94,1669,1670],{"class":108}," :marks",[94,1672,115],{"class":100},[94,1674,119],{"class":118},[94,1676,76],{"class":122},[94,1678,119],{"class":118},[94,1680,441],{"class":100},[94,1682,1683,1685,1688,1691,1693,1695,1698,1700,1703,1706,1708,1710],{"class":96,"line":878},[94,1684,424],{"class":100},[94,1686,1687],{"class":104},"button",[94,1689,1690],{"class":108}," @click",[94,1692,115],{"class":100},[94,1694,119],{"class":118},[94,1696,1697],{"class":122},"addEntry",[94,1699,119],{"class":118},[94,1701,1702],{"class":100},">",[94,1704,1705],{"class":141},"Add Entry",[94,1707,399],{"class":100},[94,1709,1687],{"class":104},[94,1711,128],{"class":100},[94,1713,1714,1716,1718],{"class":96,"line":887},[94,1715,399],{"class":100},[94,1717,416],{"class":104},[94,1719,128],{"class":100},[1721,1722,1723,1724,1726,1727,1730,1731,1734],"note",{},"When using reactive data with the ",[70,1725,76],{}," prop, wrap the marks in a ",[70,1728,1729],{},"computed"," so they update when data changes. See ",[1732,1733,36],"a",{"href":37}," for full patterns.",[79,1736,1738],{"id":1737},"comparison-with-children-pattern","Comparison with children pattern",[1740,1741,1742,1756],"table",{},[1743,1744,1745],"thead",{},[1746,1747,1748,1752,1754],"tr",{},[1749,1750,1751],"th",{},"Aspect",[1749,1753,32],{},[1749,1755,28],{},[1757,1758,1759,1771,1780,1794,1805],"tbody",{},[1746,1760,1761,1765,1768],{},[1762,1763,1764],"td",{},"Vite config required",[1762,1766,1767],{},"No",[1762,1769,1770],{},"Yes",[1746,1772,1773,1776,1778],{},[1762,1774,1775],{},"Vue-native syntax",[1762,1777,1767],{},[1762,1779,1770],{},[1746,1781,1782,1785,1788],{},[1762,1783,1784],{},"Programmatic building",[1762,1786,1787],{},"Natural",[1762,1789,1790,1791],{},"Requires ",[70,1792,1793],{},"h()",[1746,1795,1796,1799,1802],{},[1762,1797,1798],{},"TypeScript inference",[1762,1800,1801],{},"Mark functions typed",[1762,1803,1804],{},"Component props typed",[1746,1806,1807,1810,1813],{},[1762,1808,1809],{},"Dynamic mark selection",[1762,1811,1812],{},"Easy",[1762,1814,1790,1815,1818,1819],{},[70,1816,1817],{},"v-if","\u002F",[70,1820,1821],{},"v-for",[79,1823,1825],{"id":1824},"whats-next","What's next?",[459,1827,1828,1833],{},[462,1829,1830,1832],{},[1732,1831,36],{"href":37}," — Update plots dynamically",[462,1834,1835,1837],{},[1732,1836,40],{"href":41}," — Nuxt module setup",[1839,1840,1841],"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 pre.shiki code .sfbsL, html code.shiki .sfbsL{--shiki-light:#4D699B;--shiki-default:#82AAFF;--shiki-dark:#8BA4B0}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 .sAUSp, html code.shiki .sAUSp{--shiki-light:#CC6D00;--shiki-default:#89DDFF;--shiki-dark:#B6927B}html pre.shiki code .smkSw, html code.shiki .smkSw{--shiki-light:#77713F;--shiki-default:#EEFFFF;--shiki-dark:#C4B28A}html pre.shiki code .s7e5W, html code.shiki .s7e5W{--shiki-light:#4E8CA2;--shiki-default:#F07178;--shiki-dark:#9E9B93}html pre.shiki code .s--4S, html code.shiki .s--4S{--shiki-light:#624C83;--shiki-light-font-weight:bold;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-weight:inherit;--shiki-default-font-style:italic;--shiki-dark:#8992A7;--shiki-dark-font-weight:bold;--shiki-dark-font-style:inherit}",{"title":90,"searchDepth":131,"depth":131,"links":1843},[1844,1845,1846,1847,1848,1849,1850],{"id":81,"depth":131,"text":82},{"id":453,"depth":131,"text":454},{"id":492,"depth":131,"text":493},{"id":915,"depth":131,"text":916},{"id":1328,"depth":131,"text":1329},{"id":1737,"depth":131,"text":1738},{"id":1824,"depth":131,"text":1825},"Pass Observable Plot mark functions as props to build charts programmatically, with dynamic mark selection and no Vite plugin required.\n","md",null,{},{"title":1856,"description":1857},"Marks as Props — Programmatic Chart Building with Vue Plot","Pass Observable Plot mark functions through the marks prop to build charts programmatically from config, with full reactivity and dynamic mark selection.","I0l35BMnaOBG9nIZ04t0dxVLtHeHvOq8XUkubuVfAOA",[1860,1862],{"title":28,"path":29,"stem":30,"description":1861,"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",{"title":36,"path":37,"stem":38,"description":1863,"children":-1},"Bind reactive Vue refs and computed properties to Vue Plot marks so charts update automatically when data changes, filters, or swaps datasets.\n",1787848462538]