[{"data":1,"prerenderedAt":347},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":60,"-getting-started-installation-surround":342},[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":14,"body":62,"description":333,"extension":334,"links":335,"meta":336,"navigation":337,"path":15,"seo":338,"stem":16,"__hash__":341},"docs\u002F1.getting-started\u002F2.installation.md",{"type":63,"value":64,"toc":325},"minimark",[65,69,134,146,151,154,186,189,193,196,213,217,272,276,282,310,314,321],[66,67,68],"p",{},"Install Vue Plot and its peer dependency:",[70,71,72,101,118],"code-group",{},[73,74,80],"pre",{"className":75,"code":76,"filename":77,"language":78,"meta":79,"style":79},"language-bash shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","pnpm add @memotux\u002Fvue-plot @observablehq\u002Fplot\n","pnpm","bash","",[81,82,83],"code",{"__ignoreMap":79},[84,85,88,91,95,98],"span",{"class":86,"line":87},"line",1,[84,89,77],{"class":90},"shhQM",[84,92,94],{"class":93},"s9-zz"," add",[84,96,97],{"class":93}," @memotux\u002Fvue-plot",[84,99,100],{"class":93}," @observablehq\u002Fplot\n",[73,102,105],{"className":75,"code":103,"filename":104,"language":78,"meta":79,"style":79},"npm install @memotux\u002Fvue-plot @observablehq\u002Fplot\n","npm",[81,106,107],{"__ignoreMap":79},[84,108,109,111,114,116],{"class":86,"line":87},[84,110,104],{"class":90},[84,112,113],{"class":93}," install",[84,115,97],{"class":93},[84,117,100],{"class":93},[73,119,122],{"className":75,"code":120,"filename":121,"language":78,"meta":79,"style":79},"yarn add @memotux\u002Fvue-plot @observablehq\u002Fplot\n","yarn",[81,123,124],{"__ignoreMap":79},[84,125,126,128,130,132],{"class":86,"line":87},[84,127,121],{"class":90},[84,129,94],{"class":93},[84,131,97],{"class":93},[84,133,100],{"class":93},[135,136,137,140,141,145],"warning",{},[81,138,139],{},"@observablehq\u002Fplot"," is a ",[142,143,144],"strong",{},"required peer dependency",". It is NOT bundled with Vue Plot — you must install it separately.",[147,148,150],"h2",{"id":149},"prerequisites","Prerequisites",[66,152,153],{},"Before installing, make sure your project meets these requirements:",[155,156,157,164,174],"ul",{},[158,159,160,163],"li",{},[142,161,162],{},"Node.js"," 18 or later (Node 20+ recommended).",[158,165,166,169,170,173],{},[142,167,168],{},"Vue"," 3.5 or later, or ",[142,171,172],{},"Nuxt"," 3.12 \u002F 4.x if you are using the Nuxt module.",[158,175,176,177,179,180,182,183,185],{},"A package manager: ",[81,178,77],{}," (used in this monorepo), ",[81,181,104],{},", or ",[81,184,121],{},".",[66,187,188],{},"Vue Plot relies on Observable Plot as a peer dependency, so your package manager should warn you if it is missing.",[147,190,192],{"id":191},"verify-installation","Verify installation",[66,194,195],{},"After installing, verify both packages are present:",[73,197,200],{"className":75,"code":198,"filename":199,"language":78,"meta":79,"style":79},"npm ls @memotux\u002Fvue-plot @observablehq\u002Fplot\n","terminal",[81,201,202],{"__ignoreMap":79},[84,203,204,206,209,211],{"class":86,"line":87},[84,205,104],{"class":90},[84,207,208],{"class":93}," ls",[84,210,97],{"class":93},[84,212,100],{"class":93},[147,214,216],{"id":215},"package-versions","Package versions",[218,219,220,233],"table",{},[221,222,223],"thead",{},[224,225,226,230],"tr",{},[227,228,229],"th",{},"Package",[227,231,232],{},"Minimum Version",[234,235,236,249,260],"tbody",{},[224,237,238,244],{},[239,240,241],"td",{},[81,242,243],{},"@memotux\u002Fvue-plot",[239,245,246],{},[81,247,248],{},"0.4.2",[224,250,251,255],{},[239,252,253],{},[81,254,139],{},[239,256,257],{},[81,258,259],{},"0.6.17",[224,261,262,267],{},[239,263,264],{},[81,265,266],{},"vue",[239,268,269],{},[81,270,271],{},"3.5.0",[147,273,275],{"id":274},"troubleshooting","Troubleshooting",[66,277,278,279,281],{},"If ",[81,280,49],{}," or the mark components are not available after installation, check the following:",[155,283,284,292,295],{},[158,285,286,287,289,290,185],{},"Verify that ",[81,288,139],{}," is installed at the same level as ",[81,291,243],{},[158,293,294],{},"If you see a \"Cannot find module\" error, reinstall dependencies and clear your lockfile.",[158,296,297,298,301,302,305,306,309],{},"For Vite projects, remember to configure ",[81,299,300],{},"isCustomElement"," so Vue treats ",[81,303,304],{},"\u003CPlot*>"," tags as custom elements (see ",[307,308,18],"a",{"href":19},").",[147,311,313],{"id":312},"whats-next","What's next?",[155,315,316],{},[158,317,318,320],{},[307,319,18],{"href":19}," — Configure Vite and register components",[322,323,324],"style",{},"html pre.shiki code .shhQM, html code.shiki .shhQM{--shiki-light:#597B75;--shiki-default:#FFCB6B;--shiki-dark:#8EA4A2}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);}",{"title":79,"searchDepth":326,"depth":326,"links":327},2,[328,329,330,331,332],{"id":149,"depth":326,"text":150},{"id":191,"depth":326,"text":192},{"id":215,"depth":326,"text":216},{"id":274,"depth":326,"text":275},{"id":312,"depth":326,"text":313},"Install @memotux\u002Fvue-plot and its @observablehq\u002Fplot peer dependency using pnpm, npm, or yarn, then verify the installation.\n","md",null,{},true,{"title":339,"description":340},"Installation — Install Vue Plot and Dependencies","Install @memotux\u002Fvue-plot and its required @observablehq\u002Fplot peer dependency with pnpm, npm, or yarn, then verify the packages are present.","QLkicC7VPr7o6Xs8WqDRDfYcQIVTYTv30GEiWPhN020",[343,345],{"title":10,"path":11,"stem":12,"description":344,"children":-1},"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",{"title":18,"path":19,"stem":20,"description":346,"children":-1},"Configure the Vite plugin for mark components and register VPlot globally or locally to start building charts in your Vue 3 app.\n",1787848462538]