[{"data":1,"prerenderedAt":612},["ShallowReactive",2],{"navigation_docs":3,"-nuxt":37,"-nuxt-surround":607},[4,9,20,32],{"title":5,"path":6,"stem":7,"icon":8},"Getting started","\u002Fgetting-started","0.getting-started","i-lucide-rocket",{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":19},"Functions","i-lucide-function-square","\u002Ffunctions","1.functions",[15],{"title":16,"path":17,"stem":18},"useBarcodeDetector","\u002Ffunctions\u002Fuse-barcode-detector","1.functions\u002F1.use-barcode-detector",false,{"title":21,"path":22,"stem":23,"children":24,"icon":27},"Nuxt","\u002Fnuxt","2.nuxt\u002F1.index",[25,28],{"title":26,"path":22,"stem":23,"icon":27},"Module","i-simple-icons-nuxtdotjs",{"title":29,"path":30,"stem":31,"icon":27},"Nuxt UI integration","\u002Fnuxt\u002Fnuxt-ui","2.nuxt\u002F2.nuxt-ui",{"title":33,"path":34,"stem":35,"icon":36},"Compatibility & polyfill","\u002Fcompatibility","3.compatibility","i-lucide-globe",{"id":38,"title":26,"body":39,"description":600,"extension":601,"links":602,"meta":603,"navigation":604,"path":22,"seo":605,"stem":23,"__hash__":606},"docs\u002F2.nuxt\u002F1.index.md",{"type":40,"value":41,"toc":593},"minimark",[42,47,55,60,130,134,188,192,199,249,253,455,458,462,472,541,555,562,589],[43,44,46],"h1",{"id":45},"nuxt-module","Nuxt module",[48,49,50,54],"p",{},[51,52,53],"code",{},"@orbisk\u002Fnuxt-barcode-detection"," registers the composable as an auto-import and the scanner + overlay as global components, so you can drop them anywhere in your Nuxt app without importing.",[56,57,59],"h2",{"id":58},"setup","Setup",[61,62,68],"pre",{"className":63,"code":64,"filename":65,"language":66,"meta":67,"style":67},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@orbisk\u002Fnuxt-barcode-detection'],\n})\n","nuxt.config.ts","ts","",[51,69,70,94,121],{"__ignoreMap":67},[71,72,75,79,82,86,90],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"s7zQu","export",[71,80,81],{"class":77}," default",[71,83,85],{"class":84},"s2Zo4"," defineNuxtConfig",[71,87,89],{"class":88},"sTEyZ","(",[71,91,93],{"class":92},"sMK4o","{\n",[71,95,97,101,104,107,110,113,115,118],{"class":73,"line":96},2,[71,98,100],{"class":99},"swJcz","  modules",[71,102,103],{"class":92},":",[71,105,106],{"class":88}," [",[71,108,109],{"class":92},"'",[71,111,53],{"class":112},"sfazB",[71,114,109],{"class":92},[71,116,117],{"class":88},"]",[71,119,120],{"class":92},",\n",[71,122,124,127],{"class":73,"line":123},3,[71,125,126],{"class":92},"}",[71,128,129],{"class":88},")\n",[56,131,133],{"id":132},"what-you-get","What you get",[135,136,137,152,160,168],"ul",{},[138,139,140,145,146,151],"li",{},[141,142,143],"strong",{},[51,144,16],{}," — auto-imported composable. See ",[147,148,149],"a",{"href":17},[51,150,16],{}," for the full reference.",[138,153,154,159],{},[141,155,156],{},[51,157,158],{},"\u003CUseBarcodeDetector \u002F>"," — drop-in scanner component, registered globally.",[138,161,162,167],{},[141,163,164],{},[51,165,166],{},"\u003CBarcodeDetectorOverlay \u002F>"," — standalone SVG overlay drawing accepted (green) and rejected (red) barcode polygons. Registered globally.",[138,169,170,175,176,184,185,187],{},[141,171,172],{},[51,173,174],{},"\u003CUBarcodeInput \u002F>"," — opt-in input field paired with a scan button. Only registered when ",[147,177,181],{"href":178,"rel":179},"https:\u002F\u002Fui.nuxt.com",[180],"nofollow",[51,182,183],{},"@nuxt\u002Fui"," is present in your app. See the ",[147,186,29],{"href":30}," page for the full reference.",[56,189,191],{"id":190},"options","Options",[48,193,194,195,198],{},"Configure the module under the ",[51,196,197],{},"barcodeDetection"," key.",[200,201,202,221],"table",{},[203,204,205],"thead",{},[206,207,208,212,215,218],"tr",{},[209,210,211],"th",{},"Option",[209,213,214],{},"Type",[209,216,217],{},"Default",[209,219,220],{},"Description",[222,223,224],"tbody",{},[206,225,226,232,237,242],{},[227,228,229],"td",{},[51,230,231],{},"polyfill",[227,233,234],{},[51,235,236],{},"boolean",[227,238,239],{},[51,240,241],{},"false",[227,243,244,245,248],{},"Register a client plugin that loads the ",[51,246,247],{},"barcode-detector"," polyfill on demand.",[56,250,252],{"id":251},"usage","Usage",[61,254,259],{"className":255,"code":256,"filename":257,"language":258,"meta":67,"style":67},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUseBarcodeDetector v-slot=\"{ start, stop, isActive, detected }\">\n    \u003Cbutton @click=\"isActive ? stop() : start()\">\n      {{ isActive ? 'Stop' : 'Start camera' }}\n    \u003C\u002Fbutton>\n    \u003Cul>\n      \u003Cli v-for=\"b in detected\" :key=\"b.rawValue\">\n        \u003Cstrong>{{ b.format }}\u003C\u002Fstrong> — \u003Ccode>{{ b.rawValue }}\u003C\u002Fcode>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n","pages\u002Fscan.vue","vue",[51,260,261,272,297,319,325,335,344,378,417,427,436,446],{"__ignoreMap":67},[71,262,263,266,269],{"class":73,"line":74},[71,264,265],{"class":92},"\u003C",[71,267,268],{"class":99},"template",[71,270,271],{"class":92},">\n",[71,273,274,277,280,284,287,290,293,295],{"class":73,"line":96},[71,275,276],{"class":92},"  \u003C",[71,278,279],{"class":99},"UseBarcodeDetector",[71,281,283],{"class":282},"spNyl"," v-slot",[71,285,286],{"class":92},"=",[71,288,289],{"class":92},"\"",[71,291,292],{"class":112},"{ start, stop, isActive, detected }",[71,294,289],{"class":92},[71,296,271],{"class":92},[71,298,299,302,305,308,310,312,315,317],{"class":73,"line":123},[71,300,301],{"class":92},"    \u003C",[71,303,304],{"class":99},"button",[71,306,307],{"class":282}," @click",[71,309,286],{"class":92},[71,311,289],{"class":92},[71,313,314],{"class":112},"isActive ? stop() : start()",[71,316,289],{"class":92},[71,318,271],{"class":92},[71,320,322],{"class":73,"line":321},4,[71,323,324],{"class":88},"      {{ isActive ? 'Stop' : 'Start camera' }}\n",[71,326,328,331,333],{"class":73,"line":327},5,[71,329,330],{"class":92},"    \u003C\u002F",[71,332,304],{"class":99},[71,334,271],{"class":92},[71,336,338,340,342],{"class":73,"line":337},6,[71,339,301],{"class":92},[71,341,135],{"class":99},[71,343,271],{"class":92},[71,345,347,350,352,355,357,359,362,364,367,369,371,374,376],{"class":73,"line":346},7,[71,348,349],{"class":92},"      \u003C",[71,351,138],{"class":99},[71,353,354],{"class":282}," v-for",[71,356,286],{"class":92},[71,358,289],{"class":92},[71,360,361],{"class":112},"b in detected",[71,363,289],{"class":92},[71,365,366],{"class":282}," :key",[71,368,286],{"class":92},[71,370,289],{"class":92},[71,372,373],{"class":112},"b.rawValue",[71,375,289],{"class":92},[71,377,271],{"class":92},[71,379,381,384,386,389,392,395,397,399,402,404,406,408,411,413,415],{"class":73,"line":380},8,[71,382,383],{"class":92},"        \u003C",[71,385,141],{"class":99},[71,387,388],{"class":92},">",[71,390,391],{"class":88},"{{ b.format }}",[71,393,394],{"class":92},"\u003C\u002F",[71,396,141],{"class":99},[71,398,388],{"class":92},[71,400,401],{"class":88}," — ",[71,403,265],{"class":92},[71,405,51],{"class":99},[71,407,388],{"class":92},[71,409,410],{"class":88},"{{ b.rawValue }}",[71,412,394],{"class":92},[71,414,51],{"class":99},[71,416,271],{"class":92},[71,418,420,423,425],{"class":73,"line":419},9,[71,421,422],{"class":92},"      \u003C\u002F",[71,424,138],{"class":99},[71,426,271],{"class":92},[71,428,430,432,434],{"class":73,"line":429},10,[71,431,330],{"class":92},[71,433,135],{"class":99},[71,435,271],{"class":92},[71,437,439,442,444],{"class":73,"line":438},11,[71,440,441],{"class":92},"  \u003C\u002F",[71,443,279],{"class":99},[71,445,271],{"class":92},[71,447,449,451,453],{"class":73,"line":448},12,[71,450,394],{"class":92},[71,452,268],{"class":99},[71,454,271],{"class":92},[48,456,457],{},"No imports needed — the composable and components are auto-registered.",[56,459,461],{"id":460},"polyfill-on-the-client","Polyfill on the client",[48,463,464,465,468,469,471],{},"To support browsers without a native ",[51,466,467],{},"BarcodeDetector"," (Firefox, Safari, desktop Linux Chromium), enable the ",[51,470,231],{}," option:",[61,473,475],{"className":63,"code":474,"filename":65,"language":66,"meta":67,"style":67},"export default defineNuxtConfig({\n  modules: ['@orbisk\u002Fnuxt-barcode-detection'],\n  barcodeDetection: {\n    polyfill: true,\n  },\n})\n",[51,476,477,489,507,517,530,535],{"__ignoreMap":67},[71,478,479,481,483,485,487],{"class":73,"line":74},[71,480,78],{"class":77},[71,482,81],{"class":77},[71,484,85],{"class":84},[71,486,89],{"class":88},[71,488,93],{"class":92},[71,490,491,493,495,497,499,501,503,505],{"class":73,"line":96},[71,492,100],{"class":99},[71,494,103],{"class":92},[71,496,106],{"class":88},[71,498,109],{"class":92},[71,500,53],{"class":112},[71,502,109],{"class":92},[71,504,117],{"class":88},[71,506,120],{"class":92},[71,508,509,512,514],{"class":73,"line":123},[71,510,511],{"class":99},"  barcodeDetection",[71,513,103],{"class":92},[71,515,516],{"class":92}," {\n",[71,518,519,522,524,528],{"class":73,"line":321},[71,520,521],{"class":99},"    polyfill",[71,523,103],{"class":92},[71,525,527],{"class":526},"sfNiH"," true",[71,529,120],{"class":92},[71,531,532],{"class":73,"line":327},[71,533,534],{"class":92},"  },\n",[71,536,537,539],{"class":73,"line":337},[71,538,126],{"class":92},[71,540,129],{"class":88},[48,542,543,544,550,551,554],{},"The module ships a client-only plugin that conditionally loads the ",[147,545,548],{"href":546,"rel":547},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbarcode-detector",[180],[51,549,247],{}," polyfill — only when ",[51,552,553],{},"globalThis.BarcodeDetector"," is missing — so native implementations keep winning where they exist.",[48,556,557,558,561],{},"The plugin also exposes a ",[51,559,560],{},"useState\u003Cboolean>('barcode-detector-polyfilled')"," flag so you can show a banner or warning when the polyfill is active.",[563,564,566,569,570,572,573,580,581,584,585,588],"callout",{"icon":565},"i-lucide-package",[141,567,568],{},"Install wizard."," The first time you add the module, an interactive prompt asks whether to enable polyfill support. On confirm, the wizard installs ",[51,571,247],{}," (using your project's package manager via ",[147,574,577],{"href":575,"rel":576},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnypm",[180],[51,578,579],{},"nypm",") and writes ",[51,582,583],{},"barcodeDetection: { polyfill: true }"," into your ",[51,586,587],{},"nuxt.config"," automatically — so you don't need to set it yourself. The wizard skips itself in CI and non-TTY environments.",[590,591,592],"style",{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":67,"searchDepth":96,"depth":96,"links":594},[595,596,597,598,599],{"id":58,"depth":96,"text":59},{"id":132,"depth":96,"text":133},{"id":190,"depth":96,"text":191},{"id":251,"depth":96,"text":252},{"id":460,"depth":96,"text":461},"Auto-imports for the composable, scanner component, and overlay.","md",null,{},{"icon":27},{"title":26,"description":600},"yGYIHqZSbt91cvsqV06QW2VDmcpq9fkNLL7gdAU18HU",[608,610],{"title":16,"path":17,"stem":18,"description":609,"children":-1},"Reactive wrapper around the Barcode Detection API.",{"title":29,"path":30,"stem":31,"description":611,"icon":27,"children":-1},"UBarcodeInput — a UInput paired with a live-camera scan button.",1778249705076]