[{"data":1,"prerenderedAt":491},["ShallowReactive",2],{"navigation_docs":3,"-vue-installation":81,"-vue-installation-surround":486},[4,41,62],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":40},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,15,20,25,30,35],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fguide\u002Fintroduction","1.guide\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"How it works","\u002Fguide\u002Fhow-it-works","1.guide\u002F2.how-it-works","i-lucide-workflow",{"title":21,"path":22,"stem":23,"icon":24},"Data modes","\u002Fguide\u002Fdata-modes","1.guide\u002F3.data-modes","i-lucide-git-fork",{"title":26,"path":27,"stem":28,"icon":29},"Options","\u002Fguide\u002Foptions","1.guide\u002F4.options","i-lucide-settings-2",{"title":31,"path":32,"stem":33,"icon":34},"Gradients","\u002Fguide\u002Fgradients","1.guide\u002F5.gradients","i-lucide-palette",{"title":36,"path":37,"stem":38,"icon":39},"WebSocket protocol","\u002Fguide\u002Fwebsocket-protocol","1.guide\u002F6.websocket-protocol","i-lucide-radio",false,{"title":42,"icon":43,"path":44,"stem":45,"children":46,"page":40},"Core","i-lucide-box","\u002Fcore","2.core",[47,52,57],{"title":48,"path":49,"stem":50,"icon":51},"Installation","\u002Fcore\u002Finstallation","2.core\u002F1.installation","i-lucide-download",{"title":53,"path":54,"stem":55,"icon":56},"API reference","\u002Fcore\u002Fapi","2.core\u002F2.api","i-lucide-code",{"title":58,"path":59,"stem":60,"icon":61},"Audio engines","\u002Fcore\u002Faudio-engines","2.core\u002F3.audio-engines","i-lucide-audio-lines",{"title":63,"icon":64,"path":65,"stem":66,"children":67,"page":40},"Vue","i-simple-icons-vuedotjs","\u002Fvue","3.vue",[68,71,76],{"title":48,"path":69,"stem":70,"icon":51},"\u002Fvue\u002Finstallation","3.vue\u002F1.installation",{"title":72,"path":73,"stem":74,"icon":75},"Props, events & methods","\u002Fvue\u002Fprops","3.vue\u002F2.props","i-lucide-sliders-horizontal",{"title":77,"path":78,"stem":79,"icon":80},"Composables","\u002Fvue\u002Fcomposables","3.vue\u002F3.composables","i-lucide-plug",{"id":82,"title":48,"body":83,"description":479,"extension":480,"links":481,"meta":482,"navigation":483,"path":69,"seo":484,"stem":70,"__hash__":485},"docs\u002F3.vue\u002F1.installation.md",{"type":84,"value":85,"toc":474},"minimark",[86,91,149,153,162,402,408,412,416,426,453,471],[87,88,90],"h2",{"id":89},"install","Install",[92,93,94,120,135],"code-group",{},[95,96,102],"pre",{"className":97,"code":98,"filename":99,"language":100,"meta":101,"style":101},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add fft-visualizer-vue\n","pnpm","bash","",[103,104,105],"code",{"__ignoreMap":101},[106,107,110,113,117],"span",{"class":108,"line":109},"line",1,[106,111,99],{"class":112},"sBMFI",[106,114,116],{"class":115},"sfazB"," add",[106,118,119],{"class":115}," fft-visualizer-vue\n",[95,121,124],{"className":97,"code":122,"filename":123,"language":100,"meta":101,"style":101},"npm install fft-visualizer-vue\n","npm",[103,125,126],{"__ignoreMap":101},[106,127,128,130,133],{"class":108,"line":109},[106,129,123],{"class":112},[106,131,132],{"class":115}," install",[106,134,119],{"class":115},[95,136,139],{"className":97,"code":137,"filename":138,"language":100,"meta":101,"style":101},"yarn add fft-visualizer-vue\n","yarn",[103,140,141],{"__ignoreMap":101},[106,142,143,145,147],{"class":108,"line":109},[106,144,138],{"class":112},[106,146,116],{"class":115},[106,148,119],{"class":115},[87,150,152],{"id":151},"quick-start","Quick start",[154,155,156,157,161],"p",{},"The fastest way to see something is ",[158,159,160],"strong",{},"local mode"," — capture the microphone and visualize\nit entirely in the browser, no backend required:",[95,163,167],{"className":164,"code":165,"language":166,"meta":101,"style":101},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { FFTVisualizer } from 'fft-visualizer-vue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"viz\">\n    \u003CFFTVisualizer mode=\"local\" :bands=\"40\" gradient=\"aurora\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n\u002F* The component fills its container — give it a height *\u002F\n.viz { width: 100%; height: 240px; }\n\u003C\u002Fstyle>\n","vue",[103,168,169,186,215,225,232,242,267,315,325,334,339,349,356,393],{"__ignoreMap":101},[106,170,171,175,179,183],{"class":108,"line":109},[106,172,174],{"class":173},"sMK4o","\u003C",[106,176,178],{"class":177},"swJcz","script",[106,180,182],{"class":181},"spNyl"," setup",[106,184,185],{"class":173},">\n",[106,187,189,193,196,200,203,206,209,212],{"class":108,"line":188},2,[106,190,192],{"class":191},"s7zQu","import",[106,194,195],{"class":173}," {",[106,197,199],{"class":198},"sTEyZ"," FFTVisualizer",[106,201,202],{"class":173}," }",[106,204,205],{"class":191}," from",[106,207,208],{"class":173}," '",[106,210,211],{"class":115},"fft-visualizer-vue",[106,213,214],{"class":173},"'\n",[106,216,218,221,223],{"class":108,"line":217},3,[106,219,220],{"class":173},"\u003C\u002F",[106,222,178],{"class":177},[106,224,185],{"class":173},[106,226,228],{"class":108,"line":227},4,[106,229,231],{"emptyLinePlaceholder":230},true,"\n",[106,233,235,237,240],{"class":108,"line":234},5,[106,236,174],{"class":173},[106,238,239],{"class":177},"template",[106,241,185],{"class":173},[106,243,245,248,251,254,257,260,263,265],{"class":108,"line":244},6,[106,246,247],{"class":173},"  \u003C",[106,249,250],{"class":177},"div",[106,252,253],{"class":181}," class",[106,255,256],{"class":173},"=",[106,258,259],{"class":173},"\"",[106,261,262],{"class":115},"viz",[106,264,259],{"class":173},[106,266,185],{"class":173},[106,268,270,273,276,279,281,283,286,288,291,293,295,298,300,303,305,307,310,312],{"class":108,"line":269},7,[106,271,272],{"class":173},"    \u003C",[106,274,275],{"class":177},"FFTVisualizer",[106,277,278],{"class":181}," mode",[106,280,256],{"class":173},[106,282,259],{"class":173},[106,284,285],{"class":115},"local",[106,287,259],{"class":173},[106,289,290],{"class":181}," :bands",[106,292,256],{"class":173},[106,294,259],{"class":173},[106,296,297],{"class":115},"40",[106,299,259],{"class":173},[106,301,302],{"class":181}," gradient",[106,304,256],{"class":173},[106,306,259],{"class":173},[106,308,309],{"class":115},"aurora",[106,311,259],{"class":173},[106,313,314],{"class":173}," \u002F>\n",[106,316,318,321,323],{"class":108,"line":317},8,[106,319,320],{"class":173},"  \u003C\u002F",[106,322,250],{"class":177},[106,324,185],{"class":173},[106,326,328,330,332],{"class":108,"line":327},9,[106,329,220],{"class":173},[106,331,239],{"class":177},[106,333,185],{"class":173},[106,335,337],{"class":108,"line":336},10,[106,338,231],{"emptyLinePlaceholder":230},[106,340,342,344,347],{"class":108,"line":341},11,[106,343,174],{"class":173},[106,345,346],{"class":177},"style",[106,348,185],{"class":173},[106,350,352],{"class":108,"line":351},12,[106,353,355],{"class":354},"sHwdD","\u002F* The component fills its container — give it a height *\u002F\n",[106,357,359,362,364,366,370,373,377,380,383,385,388,390],{"class":108,"line":358},13,[106,360,361],{"class":173},".",[106,363,262],{"class":112},[106,365,195],{"class":173},[106,367,369],{"class":368},"sqsOY"," width",[106,371,372],{"class":173},":",[106,374,376],{"class":375},"sbssI"," 100%",[106,378,379],{"class":173},";",[106,381,382],{"class":368}," height",[106,384,372],{"class":173},[106,386,387],{"class":375}," 240px",[106,389,379],{"class":173},[106,391,392],{"class":173}," }\n",[106,394,396,398,400],{"class":108,"line":395},14,[106,397,220],{"class":173},[106,399,346],{"class":177},[106,401,185],{"class":173},[154,403,404,405,361],{},"The browser prompts for microphone permission on mount. To capture tab or system audio\ninstead of the mic, set ",[103,406,407],{},"audio-source=\"display\"",[409,410,411],"note",{},"The component fills its container, so the wrapper needs a defined height.",[87,413,415],{"id":414},"nuxt","Nuxt",[154,417,418,419,422,423,372],{},"The component is SSR-safe (all browser access is deferred to ",[103,420,421],{},"onMounted","), but it renders\nnothing meaningful on the server — wrap it in ",[103,424,425],{},"\u003CClientOnly>",[95,427,429],{"className":164,"code":428,"language":166,"meta":101,"style":101},"\u003CClientOnly>\n  \u003CFFTVisualizer mode=\"local\" \u002F>\n\u003C\u002FClientOnly>\n",[103,430,431,440,445],{"__ignoreMap":101},[106,432,433,435,438],{"class":108,"line":109},[106,434,174],{"class":173},[106,436,437],{"class":177},"ClientOnly",[106,439,185],{"class":173},[106,441,442],{"class":108,"line":188},[106,443,444],{"class":198},"  \u003CFFTVisualizer mode=\"local\" \u002F>\n",[106,446,447,449,451],{"class":108,"line":217},[106,448,220],{"class":173},[106,450,437],{"class":177},[106,452,185],{"class":173},[409,454,455,458,459,463,464,467,468,470],{},[103,456,457],{},"mode=\"local\""," is one of three ",[460,461,462],"a",{"href":22},"data modes",". Every prop maps to a shared\n",[460,465,466],{"href":27},"option","; see ",[460,469,72],{"href":73}," for the Vue-specific API.",[346,472,473],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":101,"searchDepth":188,"depth":188,"links":475},[476,477,478],{"id":89,"depth":188,"text":90},{"id":151,"depth":188,"text":152},{"id":414,"depth":188,"text":415},"Install the package and render your first spectrum in under a minute.","md",null,{},{"icon":51},{"title":48,"description":479},"wsPAmQq7xwklAe9_11BweSeU0qrHbYgAXo6xzO4_Jo0",[487,489],{"title":58,"path":59,"stem":60,"description":488,"icon":61,"children":-1},"Standalone FFT pipelines — local capture, client-side FFT of a PCM stream, PCM decoding, and the raw WASM processor.",{"title":72,"path":73,"stem":74,"description":490,"icon":75,"children":-1},"The Vue component API — props, emitted events, exposed methods, and slots.",1784963432760]