[{"data":1,"prerenderedAt":538},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:C6ZZqPfADcaBZhs__FfgK0eTN235uG01UD9FxCu7-28":235,"content-page-surround:docs:C6ZZqPfADcaBZhs__FfgK0eTN235uG01UD9FxCu7-28":535},[4,50,111,152,214],{"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,35,40,45],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Why Nuxt Photo","content:docs:1.start:1.why-nuxt-photo.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fwhy-nuxt-photo",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Install Nuxt Photo","content:docs:1.start:2.installation.md","1\u002F2","\u002Fdocs\u002Fstart\u002Finstallation",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Build your first album","content:docs:1.start:3.build-your-first-album.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fbuild-your-first-album",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"navigation":33,"path":34},"Choose a component","content:docs:1.start:4.choose-a-component.md","1\u002F4",{"title":30},"\u002Fdocs\u002Fstart\u002Fchoose-a-component",{"title":36,"id":37,"canonicalKey":38,"locale":8,"draft":6,"path":39},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":41,"id":42,"canonicalKey":43,"locale":8,"draft":6,"path":44},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":46,"id":47,"canonicalKey":48,"locale":8,"draft":6,"path":49},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":51,"page":6,"canonicalKey":52,"locale":8,"id":53,"draft":6,"icon":54,"children":55},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[56,61,66,71,76,81,86,91,96,101,106],{"title":57,"id":58,"canonicalKey":59,"locale":8,"draft":6,"path":60},"Use CMS photos","content:docs:2.guides:1.use-cms-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-cms-photos",{"title":62,"id":63,"canonicalKey":64,"locale":8,"draft":6,"path":65},"Use Nuxt Image","content:docs:2.guides:2.use-nuxt-image.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fuse-nuxt-image",{"title":67,"id":68,"canonicalKey":69,"locale":8,"draft":6,"path":70},"Style with Tailwind","content:docs:2.guides:3.style-with-tailwind.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fstyle-with-tailwind",{"title":72,"id":73,"canonicalKey":74,"locale":8,"draft":6,"path":75},"Share one lightbox","content:docs:2.guides:4.share-one-lightbox.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":77,"id":78,"canonicalKey":79,"locale":8,"draft":6,"path":80},"Build a carousel","content:docs:2.guides:5.build-a-carousel.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":82,"id":83,"canonicalKey":84,"locale":8,"draft":6,"path":85},"Tune responsive layouts","content:docs:2.guides:6.tune-responsive-layouts.md","2\u002F6","\u002Fdocs\u002Fguides\u002Ftune-responsive-layouts",{"title":87,"id":88,"canonicalKey":89,"locale":8,"draft":6,"path":90},"Create a custom thumbnail layout","content:docs:2.guides:7.create-a-custom-thumbnail-layout.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":92,"id":93,"canonicalKey":94,"locale":8,"draft":6,"path":95},"Customize the built-in lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":97,"id":98,"canonicalKey":99,"locale":8,"draft":6,"path":100},"Build a lightbox from primitives","content:docs:2.guides:9.build-a-lightbox-from-primitives.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":102,"id":103,"canonicalKey":104,"locale":8,"draft":6,"path":105},"Integrate a custom image service","content:docs:2.guides:10.integrate-a-custom-image-service.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":107,"id":108,"canonicalKey":109,"locale":8,"draft":6,"path":110},"Control a lightbox programmatically","content:docs:2.guides:11.control-a-lightbox-programmatically.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-a-lightbox-programmatically",{"title":112,"page":6,"canonicalKey":113,"locale":8,"id":114,"draft":6,"icon":115,"children":116},"Concepts","3","content:docs:3.concepts:.navigation.yml","i-lucide-compass",[117,122,127,132,137,142,147],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo data and dimensions","content:docs:3.concepts:1.photo-data-and-dimensions.md","3\u002F1","\u002Fdocs\u002Fconcepts\u002Fphoto-data-and-dimensions",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"Collections and navigation order","content:docs:3.concepts:2.collections-and-navigation-order.md","3\u002F2","\u002Fdocs\u002Fconcepts\u002Fcollections-and-navigation-order",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"Layouts and responsive values","content:docs:3.concepts:3.layouts-and-responsive-values.md","3\u002F3","\u002Fdocs\u002Fconcepts\u002Flayouts-and-responsive-values",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"SSR and layout stability","content:docs:3.concepts:4.ssr-and-layout-stability.md","3\u002F4","\u002Fdocs\u002Fconcepts\u002Fssr-and-layout-stability",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Image delivery","content:docs:3.concepts:5.image-delivery.md","3\u002F5","\u002Fdocs\u002Fconcepts\u002Fimage-delivery",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Lightbox, gestures, and accessibility","content:docs:3.concepts:6.lightbox-gestures-and-accessibility.md","3\u002F6","\u002Fdocs\u002Fconcepts\u002Flightbox-gestures-and-accessibility",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Customization levels","content:docs:3.concepts:7.customization-levels.md","3\u002F7","\u002Fdocs\u002Fconcepts\u002Fcustomization-levels",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"icon":156,"sidebar":11,"path":157,"children":158},"Reference","content:docs:4.reference:.navigation.yml","4","i-lucide-braces","\u002Fdocs\u002Freference",[159,164,169,174,179,184,189,194,199,204,209],{"title":160,"id":161,"canonicalKey":162,"locale":8,"draft":6,"path":163},"Photo","content:docs:4.reference:2.photo.md","4\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":165,"id":166,"canonicalKey":167,"locale":8,"draft":6,"path":168},"PhotoAlbum","content:docs:4.reference:3.photo-album.md","4\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":170,"id":171,"canonicalKey":172,"locale":8,"draft":6,"path":173},"PhotoGroup","content:docs:4.reference:4.photo-group.md","4\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":175,"id":176,"canonicalKey":177,"locale":8,"draft":6,"path":178},"PhotoCarousel","content:docs:4.reference:5.photo-carousel.md","4\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":180,"id":181,"canonicalKey":182,"locale":8,"draft":6,"path":183},"Lightbox","content:docs:4.reference:6.lightbox.md","4\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":185,"id":186,"canonicalKey":187,"locale":8,"draft":6,"path":188},"Lightbox primitives API","content:docs:4.reference:7.primitives.md","4\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":190,"id":191,"canonicalKey":192,"locale":8,"draft":6,"path":193},"Composables","content:docs:4.reference:8.composables.md","4\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":195,"id":196,"canonicalKey":197,"locale":8,"draft":6,"path":198},"Configuration and labels","content:docs:4.reference:9.configuration-and-labels.md","4\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":200,"id":201,"canonicalKey":202,"locale":8,"draft":6,"path":203},"Types","content:docs:4.reference:10.types.md","4\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":205,"id":206,"canonicalKey":207,"locale":8,"draft":6,"path":208},"CSS","content:docs:4.reference:11.css.md","4\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":210,"id":211,"canonicalKey":212,"locale":8,"draft":6,"path":213},"Package exports","content:docs:4.reference:12.package-exports.md","4\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":215,"page":6,"canonicalKey":216,"locale":8,"id":217,"draft":6,"icon":218,"children":219},"Help","5","content:docs:5.help:.navigation.yml","i-lucide-life-buoy",[220,225,230],{"title":221,"id":222,"canonicalKey":223,"locale":8,"draft":6,"path":224},"Troubleshooting","content:docs:5.help:1.troubleshooting.md","5\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":226,"id":227,"canonicalKey":228,"locale":8,"draft":6,"path":229},"Known constraints","content:docs:5.help:2.known-constraints.md","5\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":231,"id":232,"canonicalKey":233,"locale":8,"draft":6,"path":234},"Upgrade from 0.2 to 1.0","content:docs:5.help:3.upgrade-from-0-2-to-1-0.md","5\u002F3","\u002Fdocs\u002Fhelp\u002Fupgrade-from-0-2-to-1-0",{"title":46,"description":236,"body":237,"type":522,"id":47,"canonicalKey":48,"draft":6,"partial":6,"locale":8,"collection":523,"navigationFile":6,"file":524,"route":530,"resolution":532},"Understand image cost, layout stability, and measured client-bundle impact.",{"type":238,"children":239,"toc":515},"root",[240,248,255,307,320,326,331,496,505,510],{"type":241,"tag":242,"props":243,"children":244},"element","p",{},[245],{"type":246,"value":247},"text","Photo pages usually spend more bytes on images than JavaScript. Start with\ncorrect image delivery, then check the component code your application uses.",{"type":241,"tag":249,"props":250,"children":252},"h2",{"id":251},"control-image-cost",[253],{"type":246,"value":254},"Control image cost",{"type":241,"tag":256,"props":257,"children":258},"ul",{},[259,265,278,290,302],{"type":241,"tag":260,"props":261,"children":262},"li",{},[263],{"type":246,"value":264},"Store accurate dimensions so the browser reserves space before each image loads.",{"type":241,"tag":260,"props":266,"children":267},{},[268,270,276],{"type":246,"value":269},"Use Nuxt Image or prepared ",{"type":241,"tag":271,"props":272,"children":273},"code",{},[274],{"type":246,"value":275},"srcset",{"type":246,"value":277}," candidates for responsive files.",{"type":241,"tag":260,"props":279,"children":280},{},[281,283,288],{"type":246,"value":282},"Set ",{"type":241,"tag":271,"props":284,"children":285},{},[286],{"type":246,"value":287},"sizes",{"type":246,"value":289}," to describe the rendered thumbnail width.",{"type":241,"tag":260,"props":291,"children":292},{},[293,295,300],{"type":246,"value":294},"Use ",{"type":241,"tag":271,"props":296,"children":297},{},[298],{"type":246,"value":299},"thumbSrc",{"type":246,"value":301}," when the native path has a separate small thumbnail file.",{"type":241,"tag":260,"props":303,"children":304},{},[305],{"type":246,"value":306},"Keep off-screen images lazy unless they are required for the initial view.",{"type":241,"tag":242,"props":308,"children":309},{},[310,312,318],{"type":246,"value":311},"The ",{"type":241,"tag":313,"props":314,"children":315},"a",{"href":141},[316],{"type":246,"value":317},"image delivery concept",{"type":246,"value":319}," explains native,\nNuxt Image, placeholder, and custom adapter behavior.",{"type":241,"tag":249,"props":321,"children":323},{"id":322},"measured-client-bundle-impact",[324],{"type":246,"value":325},"Measured client bundle impact",{"type":241,"tag":242,"props":327,"children":328},{},[329],{"type":246,"value":330},"The project measures production consumer builds with Brotli compression. Nuxt\nresults are deltas from the same empty Nuxt application. The values below are\nfrom this documentation revision and can change as dependencies or output\nchange.",{"type":241,"tag":332,"props":333,"children":334},"table",{},[335,354],{"type":241,"tag":336,"props":337,"children":338},"thead",{},[339],{"type":241,"tag":340,"props":341,"children":342},"tr",{},[343,349],{"type":241,"tag":344,"props":345,"children":346},"th",{},[347],{"type":246,"value":348},"Consumer path",{"type":241,"tag":344,"props":350,"children":351},{},[352],{"type":246,"value":353},"Brotli result",{"type":241,"tag":355,"props":356,"children":357},"tbody",{},[358,375,396,416,439,460,480],{"type":241,"tag":340,"props":359,"children":360},{},[361,367],{"type":241,"tag":362,"props":363,"children":364},"td",{},[365],{"type":246,"value":366},"Nuxt module enabled, no photo component rendered",{"type":241,"tag":362,"props":368,"children":369},{},[370],{"type":241,"tag":271,"props":371,"children":372},{},[373],{"type":246,"value":374},"+1.25 kB",{"type":241,"tag":340,"props":376,"children":377},{},[378,388],{"type":241,"tag":362,"props":379,"children":380},{},[381,383],{"type":246,"value":382},"Nuxt module with one ",{"type":241,"tag":271,"props":384,"children":385},{},[386],{"type":246,"value":387},"PhotoImage",{"type":241,"tag":362,"props":389,"children":390},{},[391],{"type":241,"tag":271,"props":392,"children":393},{},[394],{"type":246,"value":395},"+1.44 kB",{"type":241,"tag":340,"props":397,"children":398},{},[399,408],{"type":241,"tag":362,"props":400,"children":401},{},[402,404],{"type":246,"value":403},"Nuxt module with one ready-made ",{"type":241,"tag":271,"props":405,"children":406},{},[407],{"type":246,"value":165},{"type":241,"tag":362,"props":409,"children":410},{},[411],{"type":241,"tag":271,"props":412,"children":413},{},[414],{"type":246,"value":415},"+27.8 kB",{"type":241,"tag":340,"props":417,"children":418},{},[419,431],{"type":241,"tag":362,"props":420,"children":421},{},[422,424,429],{"type":246,"value":423},"Vue ",{"type":241,"tag":271,"props":425,"children":426},{},[427],{"type":246,"value":428},"responsive",{"type":246,"value":430}," named import",{"type":241,"tag":362,"props":432,"children":433},{},[434],{"type":241,"tag":271,"props":435,"children":436},{},[437],{"type":246,"value":438},"657 B",{"type":241,"tag":340,"props":440,"children":441},{},[442,452],{"type":241,"tag":362,"props":443,"children":444},{},[445,446,451],{"type":246,"value":423},{"type":241,"tag":271,"props":447,"children":448},{},[449],{"type":246,"value":450},"useLightbox",{"type":246,"value":430},{"type":241,"tag":362,"props":453,"children":454},{},[455],{"type":241,"tag":271,"props":456,"children":457},{},[458],{"type":246,"value":459},"647 B",{"type":241,"tag":340,"props":461,"children":462},{},[463,472],{"type":241,"tag":362,"props":464,"children":465},{},[466,467,471],{"type":246,"value":423},{"type":241,"tag":271,"props":468,"children":469},{},[470],{"type":246,"value":387},{"type":246,"value":430},{"type":241,"tag":362,"props":473,"children":474},{},[475],{"type":241,"tag":271,"props":476,"children":477},{},[478],{"type":246,"value":479},"1022 B",{"type":241,"tag":340,"props":481,"children":482},{},[483,488],{"type":241,"tag":362,"props":484,"children":485},{},[486],{"type":246,"value":487},"Complete Vue package namespace import",{"type":241,"tag":362,"props":489,"children":490},{},[491],{"type":241,"tag":271,"props":492,"children":493},{},[494],{"type":246,"value":495},"32.1 kB",{"type":241,"tag":242,"props":497,"children":498},{},[499,503],{"type":241,"tag":271,"props":500,"children":501},{},[502],{"type":246,"value":165},{"type":246,"value":504}," includes layout, lightbox, gestures, and image behavior. Its number\nis the useful comparison for the normal first-album path. A focused lower-level\nimport is smaller because it does not include those features.",{"type":241,"tag":242,"props":506,"children":507},{},[508],{"type":246,"value":509},"Avoid namespace imports when the application uses only one lower-level utility\nor component. Nuxt auto-imports ready-made components, so the production bundler\ncan include the code used by the rendered application.",{"type":241,"tag":242,"props":511,"children":512},{},[513],{"type":246,"value":514},"Measure the final application as well. Other modules, route splitting, CSS,\nimage formats, and server settings affect the result users receive.",{"title":516,"searchDepth":517,"depth":517,"links":518},"",4,[519,521],{"id":251,"depth":520,"text":254},2,{"id":322,"depth":520,"text":325},"markdown","docs",{"source":525,"path":526,"stem":527,"dir":528,"extension":529},"content","docs\u002F1.start\u002F7.performance-and-bundle-size.md","docs\u002F1.start\u002F7.performance-and-bundle-size","start","md",{"requestedPath":49,"resolvedPath":49,"alternates":531},[],{"requested":533,"resolved":534,"usedFallback":6},{},{"locale":8},{"previous":536,"next":537},{"title":41,"id":42,"canonicalKey":43,"locale":8,"draft":6,"path":44},{"title":57,"id":58,"canonicalKey":59,"locale":8,"draft":6,"path":60},1788702879061]