[{"data":1,"prerenderedAt":797},["ShallowReactive",2],{"navigation_docs":3,"-compatibility":37,"-compatibility-surround":661,"bcd-barcode-detector":664,"mdc--xxmruv-key":752,"mdc--gxlj0a-key":763,"mdc-9kmcdi-key":780,"mdc-qr0kjd-key":788},[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":33,"body":39,"description":654,"extension":655,"links":656,"meta":657,"navigation":658,"path":34,"seo":659,"stem":35,"__hash__":660},"docs\u002F3.compatibility.md",{"type":40,"value":41,"toc":646},"minimark",[42,46,63,68,77,80,94,98,121,146,151,154,326,333,336,339,418,421,425,431,629,642],[43,44,33],"h1",{"id":45},"compatibility-polyfill",[47,48,49,50,57,58,62],"p",{},"The ",[51,52,56],"a",{"href":53,"rel":54},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FBarcode_Detection_API",[55],"nofollow","Barcode Detection API"," is part of the Shape Detection family — implemented by some browsers, gated behind a flag in others, and still missing in a few. The composable surfaces this through ",[59,60,61],"code",{},"isSupported",", and the wrapper component renders a fallback UI when the API isn't there.",[64,65,67],"h2",{"id":66},"browser-support","Browser support",[47,69,70,71,76],{},"The table below is generated from MDN's ",[51,72,75],{"href":73,"rel":74},"https:\u002F\u002Fgithub.com\u002Fmdn\u002Fbrowser-compat-data",[55],"browser-compat-data"," (the same dataset behind the MDN compatibility tables) and refreshes on every docs build.",[78,79],"browser-compat-table",{},[81,82,84,85,89,90,93],"callout",{"icon":83},"i-lucide-info","Native support varies by ",[86,87,88],"strong",{},"platform",", not just by browser. On Chromium-based browsers, the API is typically only wired up on ChromeOS, macOS, and Android — desktop Linux ships the engine without the platform-side decoder. The ",[59,91,92],{},"barcode-detector"," polyfill below lifts that limitation.",[64,95,97],{"id":96},"polyfill","Polyfill",[47,99,100,106,107,112,113,116,117,120],{},[51,101,104],{"href":102,"rel":103},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbarcode-detector",[55],[59,105,92],{}," is a drop-in polyfill that uses ",[51,108,111],{"href":109,"rel":110},"https:\u002F\u002Fgithub.com\u002Fzxing\u002Fzxing",[55],"ZXing"," compiled to WebAssembly under the hood. The ",[59,114,115],{},".\u002Fpolyfill"," entry only patches ",[59,118,119],{},"globalThis.BarcodeDetector"," when the API is missing, so native implementations keep winning where they exist.",[122,123,128],"pre",{"className":124,"code":125,"language":126,"meta":127,"style":127},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add barcode-detector\n","bash","",[59,129,130],{"__ignoreMap":127},[131,132,135,139,143],"span",{"class":133,"line":134},"line",1,[131,136,138],{"class":137},"sBMFI","pnpm",[131,140,142],{"class":141},"sfazB"," add",[131,144,145],{"class":141}," barcode-detector\n",[147,148,150],"h3",{"id":149},"vue","Vue",[47,152,153],{},"Import the polyfill once at app startup, before mounting:",[122,155,160],{"className":156,"code":157,"filename":158,"language":159,"meta":127,"style":127},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\nif (typeof window !== 'undefined' && !('BarcodeDetector' in window)) {\n  await import('barcode-detector\u002Fpolyfill')\n}\n\ncreateApp(App).mount('#app')\n","main.ts","ts",[59,161,162,190,208,215,266,288,294,299],{"__ignoreMap":127},[131,163,164,168,172,176,179,182,185,187],{"class":133,"line":134},[131,165,167],{"class":166},"s7zQu","import",[131,169,171],{"class":170},"sMK4o"," {",[131,173,175],{"class":174},"sTEyZ"," createApp",[131,177,178],{"class":170}," }",[131,180,181],{"class":166}," from",[131,183,184],{"class":170}," '",[131,186,149],{"class":141},[131,188,189],{"class":170},"'\n",[131,191,193,195,198,201,203,206],{"class":133,"line":192},2,[131,194,167],{"class":166},[131,196,197],{"class":174}," App ",[131,199,200],{"class":166},"from",[131,202,184],{"class":170},[131,204,205],{"class":141},".\u002FApp.vue",[131,207,189],{"class":170},[131,209,211],{"class":133,"line":210},3,[131,212,214],{"emptyLinePlaceholder":213},true,"\n",[131,216,218,221,224,227,230,233,235,238,241,244,247,250,252,255,257,260,263],{"class":133,"line":217},4,[131,219,220],{"class":166},"if",[131,222,223],{"class":174}," (",[131,225,226],{"class":170},"typeof",[131,228,229],{"class":174}," window ",[131,231,232],{"class":170},"!==",[131,234,184],{"class":170},[131,236,237],{"class":141},"undefined",[131,239,240],{"class":170},"'",[131,242,243],{"class":170}," &&",[131,245,246],{"class":170}," !",[131,248,249],{"class":174},"(",[131,251,240],{"class":170},[131,253,254],{"class":141},"BarcodeDetector",[131,256,240],{"class":170},[131,258,259],{"class":170}," in",[131,261,262],{"class":174}," window)) ",[131,264,265],{"class":170},"{\n",[131,267,269,272,275,278,280,283,285],{"class":133,"line":268},5,[131,270,271],{"class":166},"  await",[131,273,274],{"class":170}," import",[131,276,249],{"class":277},"swJcz",[131,279,240],{"class":170},[131,281,282],{"class":141},"barcode-detector\u002Fpolyfill",[131,284,240],{"class":170},[131,286,287],{"class":277},")\n",[131,289,291],{"class":133,"line":290},6,[131,292,293],{"class":170},"}\n",[131,295,297],{"class":133,"line":296},7,[131,298,214],{"emptyLinePlaceholder":213},[131,300,302,306,309,312,315,317,319,322,324],{"class":133,"line":301},8,[131,303,305],{"class":304},"s2Zo4","createApp",[131,307,308],{"class":174},"(App)",[131,310,311],{"class":170},".",[131,313,314],{"class":304},"mount",[131,316,249],{"class":174},[131,318,240],{"class":170},[131,320,321],{"class":141},"#app",[131,323,240],{"class":170},[131,325,287],{"class":174},[47,327,328,329,332],{},"The dynamic ",[59,330,331],{},"import()"," keeps the wasm bundle out of the main chunk for browsers that already have native support.",[147,334,21],{"id":335},"nuxt",[47,337,338],{},"Use a client plugin so SSR is unaffected:",[122,340,343],{"className":156,"code":341,"filename":342,"language":159,"meta":127,"style":127},"export default defineNuxtPlugin(async () => {\n  if ('BarcodeDetector' in window) return\n  await import('barcode-detector\u002Fpolyfill')\n})\n","plugins\u002Fbarcode-detector.client.ts",[59,344,345,371,395,411],{"__ignoreMap":127},[131,346,347,350,353,356,358,362,365,368],{"class":133,"line":134},[131,348,349],{"class":166},"export",[131,351,352],{"class":166}," default",[131,354,355],{"class":304}," defineNuxtPlugin",[131,357,249],{"class":174},[131,359,361],{"class":360},"spNyl","async",[131,363,364],{"class":170}," ()",[131,366,367],{"class":360}," =>",[131,369,370],{"class":170}," {\n",[131,372,373,376,378,380,382,384,386,389,392],{"class":133,"line":192},[131,374,375],{"class":166},"  if",[131,377,223],{"class":277},[131,379,240],{"class":170},[131,381,254],{"class":141},[131,383,240],{"class":170},[131,385,259],{"class":170},[131,387,388],{"class":174}," window",[131,390,391],{"class":277},") ",[131,393,394],{"class":166},"return\n",[131,396,397,399,401,403,405,407,409],{"class":133,"line":210},[131,398,271],{"class":166},[131,400,274],{"class":170},[131,402,249],{"class":277},[131,404,240],{"class":170},[131,406,282],{"class":141},[131,408,240],{"class":170},[131,410,287],{"class":277},[131,412,413,416],{"class":133,"line":217},[131,414,415],{"class":170},"}",[131,417,287],{"class":174},[47,419,420],{},"That's how this docs site itself runs — every demo on the site works in Firefox, Safari, and desktop Linux Chromium thanks to the polyfill.",[64,422,424],{"id":423},"detecting-support-at-runtime","Detecting support at runtime",[47,426,427,428,430],{},"Both the composable and the wrapper component expose ",[59,429,61],{},". Use it to render a fallback UI (file picker, manual entry, etc.) when neither native nor the polyfill is available:",[122,432,435],{"className":433,"code":434,"language":149,"meta":127,"style":127},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst { isSupported } = useBarcodeDetector(null, { immediate: false })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"!isSupported\">\n    Barcode scanning isn't available in this browser.\n    \u003Ca href=\"...\">Type the code manually\u003C\u002Fa> instead.\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[59,436,437,464,484,488,526,535,539,548,569,575,610,620],{"__ignoreMap":127},[131,438,439,442,445,448,451,454,457,459,461],{"class":133,"line":134},[131,440,441],{"class":170},"\u003C",[131,443,444],{"class":277},"script",[131,446,447],{"class":360}," setup",[131,449,450],{"class":360}," lang",[131,452,453],{"class":170},"=",[131,455,456],{"class":170},"\"",[131,458,159],{"class":141},[131,460,456],{"class":170},[131,462,463],{"class":170},">\n",[131,465,466,468,470,473,475,477,479,482],{"class":133,"line":192},[131,467,167],{"class":166},[131,469,171],{"class":170},[131,471,472],{"class":174}," useBarcodeDetector",[131,474,178],{"class":170},[131,476,181],{"class":166},[131,478,184],{"class":170},[131,480,481],{"class":141},"@orbisk\u002Fvue-use-barcode-detection",[131,483,189],{"class":170},[131,485,486],{"class":133,"line":210},[131,487,214],{"emptyLinePlaceholder":213},[131,489,490,493,495,498,500,503,505,507,510,512,515,518,522,524],{"class":133,"line":217},[131,491,492],{"class":360},"const",[131,494,171],{"class":170},[131,496,497],{"class":174}," isSupported ",[131,499,415],{"class":170},[131,501,502],{"class":170}," =",[131,504,472],{"class":304},[131,506,249],{"class":174},[131,508,509],{"class":170},"null,",[131,511,171],{"class":170},[131,513,514],{"class":277}," immediate",[131,516,517],{"class":170},":",[131,519,521],{"class":520},"sfNiH"," false",[131,523,178],{"class":170},[131,525,287],{"class":174},[131,527,528,531,533],{"class":133,"line":268},[131,529,530],{"class":170},"\u003C\u002F",[131,532,444],{"class":277},[131,534,463],{"class":170},[131,536,537],{"class":133,"line":290},[131,538,214],{"emptyLinePlaceholder":213},[131,540,541,543,546],{"class":133,"line":296},[131,542,441],{"class":170},[131,544,545],{"class":277},"template",[131,547,463],{"class":170},[131,549,550,553,555,558,560,562,565,567],{"class":133,"line":301},[131,551,552],{"class":170},"  \u003C",[131,554,47],{"class":277},[131,556,557],{"class":360}," v-if",[131,559,453],{"class":170},[131,561,456],{"class":170},[131,563,564],{"class":141},"!isSupported",[131,566,456],{"class":170},[131,568,463],{"class":170},[131,570,572],{"class":133,"line":571},9,[131,573,574],{"class":174},"    Barcode scanning isn't available in this browser.\n",[131,576,578,581,583,586,588,590,593,595,598,601,603,605,607],{"class":133,"line":577},10,[131,579,580],{"class":170},"    \u003C",[131,582,51],{"class":277},[131,584,585],{"class":360}," href",[131,587,453],{"class":170},[131,589,456],{"class":170},[131,591,592],{"class":141},"...",[131,594,456],{"class":170},[131,596,597],{"class":170},">",[131,599,600],{"class":174},"Type the code manually",[131,602,530],{"class":170},[131,604,51],{"class":277},[131,606,597],{"class":170},[131,608,609],{"class":174}," instead.\n",[131,611,613,616,618],{"class":133,"line":612},11,[131,614,615],{"class":170},"  \u003C\u002F",[131,617,47],{"class":277},[131,619,463],{"class":170},[131,621,623,625,627],{"class":133,"line":622},12,[131,624,530],{"class":170},[131,626,545],{"class":277},[131,628,463],{"class":170},[47,630,631,633,634,637,638,641],{},[59,632,61],{}," is gated behind ",[59,635,636],{},"useMounted()"," in the wrapper component, so it's always ",[59,639,640],{},"false"," on the server — no hydration mismatches.",[643,644,645],"style",{},"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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":127,"searchDepth":192,"depth":192,"links":647},[648,649,653],{"id":66,"depth":192,"text":67},{"id":96,"depth":192,"text":97,"children":650},[651,652],{"id":149,"depth":210,"text":150},{"id":335,"depth":210,"text":21},{"id":423,"depth":192,"text":424},"Browser support for the Barcode Detection API and how to ship a polyfill where it's missing.","md",null,{},{"icon":36},{"title":33,"description":654},"8ThxLs1Tdh-bUuN2i0O8dQ0YFAYp0fx_ry3Ifke-GnA",[662,656],{"title":29,"path":30,"stem":31,"description":663,"icon":27,"children":-1},"UBarcodeInput — a UInput paired with a live-camera scan button.",{"api":665},{"BarcodeDetector":666},{"__compat":667,"BarcodeDetector":699,"detect":717,"getSupportedFormats_static":734},{"mdn_url":668,"spec_url":669,"tags":670,"support":672,"status":698},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FBarcodeDetector","https:\u002F\u002Fwicg.github.io\u002Fshape-detection-api\u002F#barcode-detection-api",[671],"web-features:barcode",{"chrome":673,"chrome_android":682,"edge":683,"firefox":685,"firefox_android":687,"oculus":687,"opera":688,"opera_android":687,"safari":691,"safari_ios":687,"samsunginternet_android":687,"webview_android":687,"webview_ios":687},[674,679],{"version_added":675,"partial_implementation":213,"notes":676},"88",[677,678],"Supported on ChromeOS and macOS only.","Before Chrome 113, on macOS Ventura (13) and above, this interface silently failed. See [bug 40245611](https:\u002F\u002Fcrbug.com\u002F40245611).",{"version_added":680,"version_removed":675,"partial_implementation":213,"notes":681},"83","Supported on macOS only.",{"version_added":680},{"version_added":680,"partial_implementation":213,"notes":684},[681,678],{"version_added":19,"impl_url":686},"https:\u002F\u002Fbugzil.la\u002F1553738","mirror",{"version_added":689,"partial_implementation":213,"notes":690},"69",[681,678],{"version_added":692,"flags":693},"17",[694],{"type":695,"name":696,"value_to_set":697},"preference","Shape Detection API","true",{"experimental":213,"standard_track":213,"deprecated":19},{"__compat":700},{"description":701,"mdn_url":702,"spec_url":703,"tags":704,"support":705,"status":716},"`BarcodeDetector()` constructor","https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FBarcodeDetector\u002FBarcodeDetector","https:\u002F\u002Fwicg.github.io\u002Fshape-detection-api\u002F#dom-barcodedetector-barcodedetector",[671],{"chrome":706,"chrome_android":709,"edge":710,"firefox":711,"firefox_android":687,"oculus":687,"opera":712,"opera_android":687,"safari":713,"safari_ios":687,"samsunginternet_android":687,"webview_android":687,"webview_ios":687},[707,708],{"version_added":675,"partial_implementation":213,"notes":677},{"version_added":680,"version_removed":675,"partial_implementation":213,"notes":681},{"version_added":680},{"version_added":680,"partial_implementation":213,"notes":681},{"version_added":19,"impl_url":686},{"version_added":689,"partial_implementation":213,"notes":681},{"version_added":692,"flags":714},[715],{"type":695,"name":696,"value_to_set":697},{"experimental":213,"standard_track":213,"deprecated":19},{"__compat":718},{"mdn_url":719,"spec_url":720,"tags":721,"support":722,"status":733},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FBarcodeDetector\u002Fdetect","https:\u002F\u002Fwicg.github.io\u002Fshape-detection-api\u002F#dom-barcodedetector-detect",[671],{"chrome":723,"chrome_android":726,"edge":727,"firefox":728,"firefox_android":687,"oculus":687,"opera":729,"opera_android":687,"safari":730,"safari_ios":687,"samsunginternet_android":687,"webview_android":687,"webview_ios":687},[724,725],{"version_added":675,"partial_implementation":213,"notes":677},{"version_added":680,"version_removed":675,"partial_implementation":213,"notes":681},{"version_added":680},{"version_added":680,"partial_implementation":213,"notes":681},{"version_added":19,"impl_url":686},{"version_added":689,"partial_implementation":213,"notes":681},{"version_added":692,"flags":731},[732],{"type":695,"name":696,"value_to_set":697},{"experimental":213,"standard_track":213,"deprecated":19},{"__compat":735},{"description":736,"mdn_url":737,"spec_url":738,"tags":739,"support":740,"status":751},"`getSupportedFormats()` static method","https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FBarcodeDetector\u002FgetSupportedFormats_static","https:\u002F\u002Fwicg.github.io\u002Fshape-detection-api\u002F#dom-barcodedetector-getsupportedformats",[671],{"chrome":741,"chrome_android":744,"edge":745,"firefox":746,"firefox_android":687,"oculus":687,"opera":747,"opera_android":687,"safari":748,"safari_ios":687,"samsunginternet_android":687,"webview_android":687,"webview_ios":687},[742,743],{"version_added":675,"partial_implementation":213,"notes":677},{"version_added":680,"version_removed":675,"partial_implementation":213,"notes":681},{"version_added":680},{"version_added":680,"partial_implementation":213,"notes":681},{"version_added":19,"impl_url":686},{"version_added":689,"partial_implementation":213,"notes":681},{"version_added":692,"flags":749},[750],{"type":695,"name":696,"value_to_set":697},{"experimental":213,"standard_track":213,"deprecated":19},{"data":753,"body":754},{},{"type":755,"children":756},"root",[757],{"type":758,"tag":47,"props":759,"children":760},"element",{},[761],{"type":762,"value":677},"text",{"data":764,"body":765},{},{"type":755,"children":766},[767],{"type":758,"tag":47,"props":768,"children":769},{},[770,772,779],{"type":762,"value":771},"Before Chrome 113, on macOS Ventura (13) and above, this interface silently failed. See ",{"type":758,"tag":51,"props":773,"children":776},{"href":774,"rel":775},"https:\u002F\u002Fcrbug.com\u002F40245611",[55],[777],{"type":762,"value":778},"bug 40245611",{"type":762,"value":311},{"data":781,"body":782},{},{"type":755,"children":783},[784],{"type":758,"tag":47,"props":785,"children":786},{},[787],{"type":762,"value":681},{"data":789,"body":790},{},{"type":755,"children":791},[792],{"type":758,"tag":47,"props":793,"children":794},{},[795],{"type":762,"value":796},"Behind preference: Shape Detection API",1778249705075]