[{"data":1,"prerenderedAt":730},["ShallowReactive",2],{"navigation_docs":3,"-guide-nuxt-integration":60,"-guide-nuxt-integration-surround":725},[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":40,"body":62,"description":717,"extension":718,"links":719,"meta":720,"navigation":418,"path":41,"seo":721,"stem":42,"__hash__":724},"docs\u002F2.guide\u002F4.nuxt-integration.md",{"type":63,"value":64,"toc":708},"minimark",[65,69,73,76,148,152,159,223,226,244,248,251,519,522,526,529,532,637,644,648,651,655,658,679,686,690,704],[66,67,68],"p",{},"Vue Plot includes a Nuxt module that registers components and configures custom-element compilation.",[70,71,14],"h2",{"id":72},"installation",[66,74,75],{},"Install the Nuxt module and its dependencies:",[77,78,79,111,130],"code-group",{},[80,81,87],"pre",{"className":82,"code":83,"filename":84,"language":85,"meta":86,"style":86},"language-bash shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","pnpm add @memotux\u002Fnuxt-vue-plot @memotux\u002Fvue-plot @observablehq\u002Fplot\n","pnpm","bash","",[88,89,90],"code",{"__ignoreMap":86},[91,92,95,98,102,105,108],"span",{"class":93,"line":94},"line",1,[91,96,84],{"class":97},"shhQM",[91,99,101],{"class":100},"s9-zz"," add",[91,103,104],{"class":100}," @memotux\u002Fnuxt-vue-plot",[91,106,107],{"class":100}," @memotux\u002Fvue-plot",[91,109,110],{"class":100}," @observablehq\u002Fplot\n",[80,112,115],{"className":82,"code":113,"filename":114,"language":85,"meta":86,"style":86},"npm install @memotux\u002Fnuxt-vue-plot @memotux\u002Fvue-plot @observablehq\u002Fplot\n","npm",[88,116,117],{"__ignoreMap":86},[91,118,119,121,124,126,128],{"class":93,"line":94},[91,120,114],{"class":97},[91,122,123],{"class":100}," install",[91,125,104],{"class":100},[91,127,107],{"class":100},[91,129,110],{"class":100},[80,131,134],{"className":82,"code":132,"filename":133,"language":85,"meta":86,"style":86},"yarn add @memotux\u002Fnuxt-vue-plot @memotux\u002Fvue-plot @observablehq\u002Fplot\n","yarn",[88,135,136],{"__ignoreMap":86},[91,137,138,140,142,144,146],{"class":93,"line":94},[91,139,133],{"class":97},[91,141,101],{"class":100},[91,143,104],{"class":100},[91,145,107],{"class":100},[91,147,110],{"class":100},[70,149,151],{"id":150},"module-registration","Module registration",[66,153,154,155,158],{},"Add the module to your ",[88,156,157],{},"nuxt.config.ts",":",[80,160,164],{"className":161,"code":162,"filename":157,"language":163,"meta":86,"style":86},"language-ts shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","export default defineNuxtConfig({\n  modules: ['@memotux\u002Fnuxt-vue-plot'],\n})\n","ts",[88,165,166,187,214],{"__ignoreMap":86},[91,167,168,172,175,179,183],{"class":93,"line":94},[91,169,171],{"class":170},"seCTJ","export",[91,173,174],{"class":170}," default",[91,176,178],{"class":177},"sfbsL"," defineNuxtConfig",[91,180,182],{"class":181},"sfkeP","(",[91,184,186],{"class":185},"s4RQF","{\n",[91,188,190,194,196,199,203,206,208,211],{"class":93,"line":189},2,[91,191,193],{"class":192},"sNH7Q","  modules",[91,195,158],{"class":185},[91,197,198],{"class":181}," [",[91,200,202],{"class":201},"sou9m","'",[91,204,205],{"class":100},"@memotux\u002Fnuxt-vue-plot",[91,207,202],{"class":201},[91,209,210],{"class":181},"]",[91,212,213],{"class":185},",\n",[91,215,217,220],{"class":93,"line":216},3,[91,218,219],{"class":185},"}",[91,221,222],{"class":181},")\n",[66,224,225],{},"That's it. The module automatically:",[227,228,229,237],"ul",{},[230,231,232,233,236],"li",{},"Registers ",[88,234,235],{},"\u003CVPlot>"," globally",[230,238,239,240,243],{},"Configures custom element compilation for ",[88,241,242],{},"\u003CPlot*>"," tags",[70,245,247],{"id":246},"usage-in-nuxt","Usage in Nuxt",[66,249,250],{},"Once the module is registered, use Vue Plot components directly in any page or component:",[80,252,257],{"className":253,"code":254,"filename":255,"language":256,"meta":86,"style":86},"language-vue shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\u003C!-- pages\u002Fcharts.vue -->\n\u003Cscript setup lang=\"ts\">\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","pages\u002Fcharts.vue","vue",[88,258,259,265,294,309,343,370,397,403,413,420,430,452,500,510],{"__ignoreMap":86},[91,260,261],{"class":93,"line":94},[91,262,264],{"class":263},"snOLt","\u003C!-- pages\u002Fcharts.vue -->\n",[91,266,267,270,274,278,281,284,287,289,291],{"class":93,"line":189},[91,268,269],{"class":185},"\u003C",[91,271,273],{"class":272},"sv6DF","script",[91,275,277],{"class":276},"sWKss"," setup",[91,279,280],{"class":276}," lang",[91,282,283],{"class":185},"=",[91,285,286],{"class":201},"\"",[91,288,163],{"class":100},[91,290,286],{"class":201},[91,292,293],{"class":185},">\n",[91,295,296,299,303,306],{"class":93,"line":216},[91,297,298],{"class":276},"const",[91,300,302],{"class":301},"sOCQP"," data ",[91,304,283],{"class":305},"sqN5v",[91,307,308],{"class":181}," [\n",[91,310,312,315,318,320,323,326,328,331,334,336,340],{"class":93,"line":311},4,[91,313,314],{"class":185},"  {",[91,316,317],{"class":192}," name",[91,319,158],{"class":185},[91,321,322],{"class":201}," '",[91,324,325],{"class":100},"A",[91,327,202],{"class":201},[91,329,330],{"class":185},",",[91,332,333],{"class":192}," value",[91,335,158],{"class":185},[91,337,339],{"class":338},"svr3b"," 10",[91,341,342],{"class":185}," },\n",[91,344,346,348,350,352,354,357,359,361,363,365,368],{"class":93,"line":345},5,[91,347,314],{"class":185},[91,349,317],{"class":192},[91,351,158],{"class":185},[91,353,322],{"class":201},[91,355,356],{"class":100},"B",[91,358,202],{"class":201},[91,360,330],{"class":185},[91,362,333],{"class":192},[91,364,158],{"class":185},[91,366,367],{"class":338}," 20",[91,369,342],{"class":185},[91,371,373,375,377,379,381,384,386,388,390,392,395],{"class":93,"line":372},6,[91,374,314],{"class":185},[91,376,317],{"class":192},[91,378,158],{"class":185},[91,380,322],{"class":201},[91,382,383],{"class":100},"C",[91,385,202],{"class":201},[91,387,330],{"class":185},[91,389,333],{"class":192},[91,391,158],{"class":185},[91,393,394],{"class":338}," 15",[91,396,342],{"class":185},[91,398,400],{"class":93,"line":399},7,[91,401,402],{"class":181},"]\n",[91,404,406,409,411],{"class":93,"line":405},8,[91,407,408],{"class":185},"\u003C\u002F",[91,410,273],{"class":272},[91,412,293],{"class":185},[91,414,416],{"class":93,"line":415},9,[91,417,419],{"emptyLinePlaceholder":418},true,"\n",[91,421,423,425,428],{"class":93,"line":422},10,[91,424,269],{"class":185},[91,426,427],{"class":272},"template",[91,429,293],{"class":185},[91,431,433,436,438,441,443,445,448,450],{"class":93,"line":432},11,[91,434,435],{"class":185},"  \u003C",[91,437,49],{"class":272},[91,439,440],{"class":276}," :width",[91,442,283],{"class":185},[91,444,286],{"class":201},[91,446,447],{"class":100},"680",[91,449,286],{"class":201},[91,451,293],{"class":185},[91,453,455,458,461,464,466,468,471,473,476,478,480,483,485,488,490,492,495,497],{"class":93,"line":454},12,[91,456,457],{"class":185},"    \u003C",[91,459,460],{"class":272},"PlotBarY",[91,462,463],{"class":276}," :data",[91,465,283],{"class":185},[91,467,286],{"class":201},[91,469,470],{"class":100},"data",[91,472,286],{"class":201},[91,474,475],{"class":276}," x",[91,477,283],{"class":185},[91,479,286],{"class":201},[91,481,482],{"class":100},"name",[91,484,286],{"class":201},[91,486,487],{"class":276}," y",[91,489,283],{"class":185},[91,491,286],{"class":201},[91,493,494],{"class":100},"value",[91,496,286],{"class":201},[91,498,499],{"class":185}," \u002F>\n",[91,501,503,506,508],{"class":93,"line":502},13,[91,504,505],{"class":185},"  \u003C\u002F",[91,507,49],{"class":272},[91,509,293],{"class":185},[91,511,513,515,517],{"class":93,"line":512},14,[91,514,408],{"class":185},[91,516,427],{"class":272},[91,518,293],{"class":185},[66,520,521],{},"No imports needed — the module handles registration.",[70,523,525],{"id":524},"server-side-rendering","Server-side rendering",[66,527,528],{},"Vue Plot supports Nuxt's SSR. SSR renders the chart container; Observable Plot's DOM rendering happens client-side after hydration.",[66,530,531],{},"To ensure charts render only on the client:",[80,533,536],{"className":253,"code":534,"filename":535,"language":256,"meta":86,"style":86},"\u003Ctemplate>\n  \u003CClientOnly>\n    \u003CVPlot :width=\"680\">\n      \u003CPlotBarY :data=\"data\" x=\"name\" y=\"value\" \u002F>\n    \u003C\u002FVPlot>\n  \u003C\u002FClientOnly>\n\u003C\u002Ftemplate>\n","App.vue",[88,537,538,546,555,573,612,621,629],{"__ignoreMap":86},[91,539,540,542,544],{"class":93,"line":94},[91,541,269],{"class":185},[91,543,427],{"class":272},[91,545,293],{"class":185},[91,547,548,550,553],{"class":93,"line":189},[91,549,435],{"class":185},[91,551,552],{"class":272},"ClientOnly",[91,554,293],{"class":185},[91,556,557,559,561,563,565,567,569,571],{"class":93,"line":216},[91,558,457],{"class":185},[91,560,49],{"class":272},[91,562,440],{"class":276},[91,564,283],{"class":185},[91,566,286],{"class":201},[91,568,447],{"class":100},[91,570,286],{"class":201},[91,572,293],{"class":185},[91,574,575,578,580,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610],{"class":93,"line":311},[91,576,577],{"class":185},"      \u003C",[91,579,460],{"class":272},[91,581,463],{"class":276},[91,583,283],{"class":185},[91,585,286],{"class":201},[91,587,470],{"class":100},[91,589,286],{"class":201},[91,591,475],{"class":276},[91,593,283],{"class":185},[91,595,286],{"class":201},[91,597,482],{"class":100},[91,599,286],{"class":201},[91,601,487],{"class":276},[91,603,283],{"class":185},[91,605,286],{"class":201},[91,607,494],{"class":100},[91,609,286],{"class":201},[91,611,499],{"class":185},[91,613,614,617,619],{"class":93,"line":345},[91,615,616],{"class":185},"    \u003C\u002F",[91,618,49],{"class":272},[91,620,293],{"class":185},[91,622,623,625,627],{"class":93,"line":372},[91,624,505],{"class":185},[91,626,552],{"class":272},[91,628,293],{"class":185},[91,630,631,633,635],{"class":93,"line":399},[91,632,408],{"class":185},[91,634,427],{"class":272},[91,636,293],{"class":185},[638,639,640,641,643],"note",{},"The ",[88,642,552],{}," component is built into Nuxt — no additional imports required.",[70,645,647],{"id":646},"module-options","Module options",[66,649,650],{},"The Nuxt module currently has no configuration options. All plot options are passed via component props.",[70,652,654],{"id":653},"development","Development",[66,656,657],{},"To develop with the Nuxt module locally:",[80,659,662],{"className":82,"code":660,"filename":661,"language":85,"meta":86,"style":86},"# In the vue-plot repository root\npnpm nuxt dev\n","terminal",[88,663,664,669],{"__ignoreMap":86},[91,665,666],{"class":93,"line":94},[91,667,668],{"class":263},"# In the vue-plot repository root\n",[91,670,671,673,676],{"class":93,"line":189},[91,672,84],{"class":97},[91,674,675],{"class":100}," nuxt",[91,677,678],{"class":100}," dev\n",[66,680,681,682,685],{},"This runs the Nuxt playground at ",[88,683,684],{},"http:\u002F\u002Flocalhost:3000",".",[70,687,689],{"id":688},"whats-next","What's next?",[227,691,692,699],{},[230,693,694,698],{},[695,696,697],"a",{"href":50},"API Reference"," — Full component API",[230,700,701,703],{},[695,702,53],{"href":54}," — All available marks",[705,706,707],"style",{},"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}html pre.shiki code .sfkeP, html code.shiki .sfkeP{--shiki-light:#4E8CA2;--shiki-default:#EEFFFF;--shiki-dark:#9E9B93}html pre.shiki code .s4RQF, html code.shiki .s4RQF{--shiki-light:#4E8CA2;--shiki-default:#89DDFF;--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 .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 .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 .snOLt, html code.shiki .snOLt{--shiki-light:#716E61;--shiki-light-font-style:inherit;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#737C73;--shiki-dark-font-style:inherit}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 .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 .svr3b, html code.shiki .svr3b{--shiki-light:#B35B79;--shiki-default:#F78C6C;--shiki-dark:#A292A3}html pre.shiki code .shhQM, html code.shiki .shhQM{--shiki-light:#597B75;--shiki-default:#FFCB6B;--shiki-dark:#8EA4A2}",{"title":86,"searchDepth":189,"depth":189,"links":709},[710,711,712,713,714,715,716],{"id":72,"depth":189,"text":14},{"id":150,"depth":189,"text":151},{"id":246,"depth":189,"text":247},{"id":524,"depth":189,"text":525},{"id":646,"depth":189,"text":647},{"id":653,"depth":189,"text":654},{"id":688,"depth":189,"text":689},"Install and configure the @memotux\u002Fnuxt-vue-plot module for auto-imports, custom-element compilation, and SSR-compatible chart rendering in Nuxt.\n","md",null,{},{"title":722,"description":723},"Nuxt Integration — Set Up the Vue Plot Nuxt Module","Add the @memotux\u002Fnuxt-vue-plot module for auto-imports, custom-element compilation, and SSR, then render charts client-only with ClientOnly.","mOp1ructCVy-H316tcz_4Hrjxmlocjoy7oNHZpnPZr4",[726,728],{"title":36,"path":37,"stem":38,"description":727,"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",{"title":49,"path":50,"stem":51,"description":729,"children":-1},"Explore the VPlot component API — props from Observable Plot's PlotOptions, the marks prop, responsive sizing, and usage examples.\n",1787848462538]