[{"data":1,"prerenderedAt":367},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:oGO84kPV3kaYo63Y8IctDLJrIPXwS-LEPdSav1vCp0w":188,"content-page-surround:docs:oGO84kPV3kaYo63Y8IctDLJrIPXwS-LEPdSav1vCp0w":354,"i-lucide:code":357,"i-logos:vue":361,"i-lucide:clipboard":365},[4,49,110,172],{"title":5,"page":6,"canonicalKey":7,"locale":8,"id":9,"draft":6,"icon":10,"sidebar":11,"children":12},"Start",false,"1","en","content:docs:1.start:.navigation.yml","i-lucide-rocket","section",[13,19,24,29,34,39,44],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Introduction","content:docs:1.start:1.introduction.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fintroduction",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Get started","content:docs:1.start:2.get-started.md","1\u002F2","\u002Fdocs\u002Fstart\u002Fget-started",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Examples","content:docs:1.start:3.examples.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fexamples",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"path":33},"AI coding agents","content:docs:1.start:4.ai-agents.md","1\u002F4","\u002Fdocs\u002Fstart\u002Fai-agents",{"title":35,"id":36,"canonicalKey":37,"locale":8,"draft":6,"path":38},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":40,"id":41,"canonicalKey":42,"locale":8,"draft":6,"path":43},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":45,"id":46,"canonicalKey":47,"locale":8,"draft":6,"path":48},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":50,"page":6,"canonicalKey":51,"locale":8,"id":52,"draft":6,"icon":53,"children":54},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[55,60,65,70,75,80,85,90,95,100,105],{"title":56,"id":57,"canonicalKey":58,"locale":8,"draft":6,"path":59},"Use your own photos","content:docs:2.guides:1.use-your-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-your-photos",{"title":61,"id":62,"canonicalKey":63,"locale":8,"draft":6,"path":64},"Responsive layouts and SSR","content:docs:2.guides:2.responsive-layouts.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fresponsive-layouts",{"title":66,"id":67,"canonicalKey":68,"locale":8,"draft":6,"path":69},"Share one lightbox","content:docs:2.guides:3.share-one-lightbox.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":71,"id":72,"canonicalKey":73,"locale":8,"draft":6,"path":74},"Build a carousel","content:docs:2.guides:4.build-a-carousel.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":76,"id":77,"canonicalKey":78,"locale":8,"draft":6,"path":79},"Deliver images","content:docs:2.guides:5.deliver-images.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fdeliver-images",{"title":81,"id":82,"canonicalKey":83,"locale":8,"draft":6,"path":84},"Integrate a custom image service","content:docs:2.guides:6.integrate-a-custom-image-service.md","2\u002F6","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":86,"id":87,"canonicalKey":88,"locale":8,"draft":6,"path":89},"Style and theme","content:docs:2.guides:7.style-and-theme.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fstyle-and-theme",{"title":91,"id":92,"canonicalKey":93,"locale":8,"draft":6,"path":94},"Customize the lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":96,"id":97,"canonicalKey":98,"locale":8,"draft":6,"path":99},"Create a custom thumbnail layout","content:docs:2.guides:9.create-a-custom-thumbnail-layout.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":101,"id":102,"canonicalKey":103,"locale":8,"draft":6,"path":104},"Build a lightbox from primitives","content:docs:2.guides:10.build-a-lightbox-from-primitives.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":106,"id":107,"canonicalKey":108,"locale":8,"draft":6,"path":109},"Control the lightbox from code","content:docs:2.guides:11.control-the-lightbox.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-the-lightbox",{"title":111,"id":112,"canonicalKey":113,"locale":8,"draft":6,"icon":114,"sidebar":11,"path":115,"children":116},"Reference","content:docs:3.reference:.navigation.yml","3","i-lucide-braces","\u002Fdocs\u002Freference",[117,122,127,132,137,142,147,152,157,162,167],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo","content:docs:3.reference:2.photo.md","3\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"PhotoAlbum","content:docs:3.reference:3.photo-album.md","3\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"PhotoGroup","content:docs:3.reference:4.photo-group.md","3\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"PhotoCarousel","content:docs:3.reference:5.photo-carousel.md","3\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Lightbox","content:docs:3.reference:6.lightbox.md","3\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Primitives","content:docs:3.reference:7.primitives.md","3\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Composables","content:docs:3.reference:8.composables.md","3\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"path":156},"Configuration and labels","content:docs:3.reference:9.configuration-and-labels.md","3\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":158,"id":159,"canonicalKey":160,"locale":8,"draft":6,"path":161},"Types","content:docs:3.reference:10.types.md","3\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":163,"id":164,"canonicalKey":165,"locale":8,"draft":6,"path":166},"CSS","content:docs:3.reference:11.css.md","3\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":168,"id":169,"canonicalKey":170,"locale":8,"draft":6,"path":171},"Package exports","content:docs:3.reference:12.package-exports.md","3\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":173,"page":6,"canonicalKey":174,"locale":8,"id":175,"draft":6,"icon":176,"children":177},"Help","4","content:docs:4.help:.navigation.yml","i-lucide-life-buoy",[178,183],{"title":179,"id":180,"canonicalKey":181,"locale":8,"draft":6,"path":182},"Troubleshooting","content:docs:4.help:1.troubleshooting.md","4\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":184,"id":185,"canonicalKey":186,"locale":8,"draft":6,"path":187},"Known constraints","content:docs:4.help:2.known-constraints.md","4\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":25,"description":189,"body":190,"type":341,"id":26,"canonicalKey":27,"draft":6,"partial":6,"locale":8,"collection":342,"navigationFile":6,"file":343,"route":349,"resolution":351},"Complete, copyable components that run on the page - portfolio grid with captions and crossfade, photos in an article, product carousel, Tailwind lightbox, custom caption and counter, and a custom viewer.",{"type":191,"children":192,"toc":330},"root",[193,216,223,228,234,240,251,257,263,268,273,279,284,290,296,308,314,320,325],{"type":194,"tag":195,"props":196,"children":197},"element","p",{},[198,201,207,209,214],{"type":199,"value":200},"text","Each example runs on this page with the real package. The code under it is the\nsame file, so you can copy it unchanged. Every example takes a ",{"type":194,"tag":202,"props":203,"children":204},"code",{},[205],{"type":199,"value":206},"photos",{"type":199,"value":208}," prop:\npass your own ",{"type":194,"tag":202,"props":210,"children":211},{},[212],{"type":199,"value":213},"PhotoItem[]",{"type":199,"value":215},".",{"type":194,"tag":217,"props":218,"children":220},"h2",{"id":219},"portfolio-grid",[221],{"type":199,"value":222},"Portfolio grid",{"type":194,"tag":195,"props":224,"children":225},{},[226],{"type":199,"value":227},"Columns with a caption under each photo. The column count follows the\ncontainer width, and the lightbox crossfades between photos.",{"type":194,"tag":229,"props":230,"children":233},"example",{"name":219,"$":231},{"component":232,"block":232},1,[],{"type":194,"tag":217,"props":235,"children":237},{"id":236},"photos-in-an-article",[238],{"type":199,"value":239},"Photos in an article",{"type":194,"tag":195,"props":241,"children":242},{},[243,245,249],{"type":199,"value":244},"A lead photo and an album share one ",{"type":194,"tag":202,"props":246,"children":247},{},[248],{"type":199,"value":128},{"type":199,"value":250},", so the lightbox moves through\nall photos of the article in one order.",{"type":194,"tag":229,"props":252,"children":256},{"name":253,"photos":254,"$":255},"article-photos","8-10,5",{"component":232,"block":232},[],{"type":194,"tag":217,"props":258,"children":260},{"id":259},"product-carousel",[261],{"type":199,"value":262},"Product carousel",{"type":194,"tag":195,"props":264,"children":265},{},[266],{"type":199,"value":267},"A carousel with thumbnails next to the product details. Select the large photo\nto open the lightbox.",{"type":194,"tag":229,"props":269,"children":272},{"name":270,"$":271},"product-gallery",{"component":232,"block":232},[],{"type":194,"tag":217,"props":274,"children":276},{"id":275},"custom-caption-and-counter",[277],{"type":199,"value":278},"Custom caption and counter",{"type":194,"tag":195,"props":280,"children":281},{},[282],{"type":199,"value":283},"The built-in lightbox with its own counter, a two-line caption, and a wider mat\naround the photo.",{"type":194,"tag":229,"props":285,"children":289},{"name":286,"also":287,"$":288},"caption-gallery","caption-lightbox",{"component":232,"block":232},[],{"type":194,"tag":217,"props":291,"children":293},{"id":292},"tailwind-lightbox",[294],{"type":199,"value":295},"Tailwind lightbox",{"type":194,"tag":195,"props":297,"children":298},{},[299,301,307],{"type":199,"value":300},"A lightbox built from the lower-level components and styled only with Tailwind\nutilities. Your app needs Tailwind; see\n",{"type":194,"tag":302,"props":303,"children":305},"a",{"href":304},"\u002Fdocs\u002Fguides\u002Fstyle-and-theme#own-the-look-with-tailwind",[306],{"type":199,"value":86},{"type":199,"value":215},{"type":194,"tag":229,"props":309,"children":313},{"name":310,"also":292,"photos":311,"$":312},"tailwind-gallery","0-11",{"component":232,"block":232},[],{"type":194,"tag":217,"props":315,"children":317},{"id":316},"custom-viewer-in-plain-css",[318],{"type":199,"value":319},"Custom viewer in plain CSS",{"type":194,"tag":195,"props":321,"children":322},{},[323],{"type":199,"value":324},"Your own markup and CSS. Nuxt Photo still handles gestures, zoom, keyboard, and\nfocus.",{"type":194,"tag":229,"props":326,"children":329},{"name":327,"$":328},"custom-photo-viewer",{"component":232,"block":232},[],{"title":331,"searchDepth":332,"depth":332,"links":333},"",4,[334,336,337,338,339,340],{"id":219,"depth":335,"text":222},2,{"id":236,"depth":335,"text":239},{"id":259,"depth":335,"text":262},{"id":275,"depth":335,"text":278},{"id":292,"depth":335,"text":295},{"id":316,"depth":335,"text":319},"markdown","docs",{"source":344,"path":345,"stem":346,"dir":347,"extension":348},"content","docs\u002F1.start\u002F3.examples.md","docs\u002F1.start\u002F3.examples","start","md",{"requestedPath":28,"resolvedPath":28,"alternates":350},[],{"requested":352,"resolved":353,"usedFallback":6},{},{"locale":8},{"previous":355,"next":356},{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"path":33},{"left":358,"top":358,"width":359,"height":359,"rotate":358,"vFlip":6,"hFlip":6,"body":360},0,24,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":358,"top":358,"width":362,"height":363,"rotate":358,"vFlip":6,"hFlip":6,"body":364},256,221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":358,"top":358,"width":359,"height":359,"rotate":358,"vFlip":6,"hFlip":6,"body":366},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",1791310382468]