[{"data":1,"prerenderedAt":542},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:FlRXyDD9xfPqRIY6z3pjsJkA_Y-cn9KVku198rG6Apo":235,"content-page-surround:docs:FlRXyDD9xfPqRIY6z3pjsJkA_Y-cn9KVku198rG6Apo":539},[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":138,"description":236,"body":237,"type":526,"id":139,"canonicalKey":140,"draft":6,"partial":6,"locale":8,"collection":527,"navigationFile":6,"file":528,"route":534,"resolution":536},"Understand native images, Nuxt Image, custom adapters, loading, and placeholders.",{"type":238,"children":239,"toc":517},"root",[240,269,273,280,369,378,408,428,434,444,461,467,494,506,512],{"type":241,"tag":242,"props":243,"children":244},"element","p",{},[245,248,254,256,261,262,267],{"type":246,"value":247},"text","Every built-in image passes through an image adapter. The adapter returns the\nfinal ",{"type":241,"tag":249,"props":250,"children":251},"code",{},[252],{"type":246,"value":253},"src",{"type":246,"value":255},", ",{"type":241,"tag":249,"props":257,"children":258},{},[259],{"type":246,"value":260},"srcset",{"type":246,"value":255},{"type":241,"tag":249,"props":263,"children":264},{},[265],{"type":246,"value":266},"sizes",{"type":246,"value":268},", dimensions, and optional placeholder for a\nthumbnail or lightbox slide.",{"type":241,"tag":270,"props":271,"children":272},"image-pipeline-lab",{},[],{"type":241,"tag":274,"props":275,"children":277},"h2",{"id":276},"choose-one-delivery-path",[278],{"type":246,"value":279},"Choose one delivery path",{"type":241,"tag":281,"props":282,"children":283},"table",{},[284,303],{"type":241,"tag":285,"props":286,"children":287},"thead",{},[288],{"type":241,"tag":289,"props":290,"children":291},"tr",{},[292,298],{"type":241,"tag":293,"props":294,"children":295},"th",{},[296],{"type":246,"value":297},"Path",{"type":241,"tag":293,"props":299,"children":300},{},[301],{"type":246,"value":302},"Use it when",{"type":241,"tag":304,"props":305,"children":306},"tbody",{},[307,324,340,356],{"type":241,"tag":289,"props":308,"children":309},{},[310,319],{"type":241,"tag":311,"props":312,"children":313},"td",{},[314],{"type":241,"tag":249,"props":315,"children":316},{},[317],{"type":246,"value":318},"auto",{"type":241,"tag":311,"props":320,"children":321},{},[322],{"type":246,"value":323},"You want Nuxt Image when installed and native images otherwise.",{"type":241,"tag":289,"props":325,"children":326},{},[327,335],{"type":241,"tag":311,"props":328,"children":329},{},[330],{"type":241,"tag":249,"props":331,"children":332},{},[333],{"type":246,"value":334},"native",{"type":241,"tag":311,"props":336,"children":337},{},[338],{"type":246,"value":339},"Your files or CDN URLs are already prepared for the browser.",{"type":241,"tag":289,"props":341,"children":342},{},[343,351],{"type":241,"tag":311,"props":344,"children":345},{},[346],{"type":241,"tag":249,"props":347,"children":348},{},[349],{"type":246,"value":350},"nuxt-image",{"type":241,"tag":311,"props":352,"children":353},{},[354],{"type":246,"value":355},"You want Nuxt Image transformations and responsive candidates.",{"type":241,"tag":289,"props":357,"children":358},{},[359,364],{"type":241,"tag":311,"props":360,"children":361},{},[362],{"type":246,"value":363},"Custom",{"type":241,"tag":311,"props":365,"children":366},{},[367],{"type":246,"value":368},"Your image service needs application-specific URL generation.",{"type":241,"tag":242,"props":370,"children":371},{},[372,376],{"type":241,"tag":249,"props":373,"children":374},{},[375],{"type":246,"value":318},{"type":246,"value":377}," is the default. Its native fallback is expected and does not warn.",{"type":241,"tag":242,"props":379,"children":380},{},[381,383,388,390,394,396,400,402,406],{"type":246,"value":382},"The native adapter uses ",{"type":241,"tag":249,"props":384,"children":385},{},[386],{"type":246,"value":387},"thumbSrc",{"type":246,"value":389}," for thumbnails when present and ",{"type":241,"tag":249,"props":391,"children":392},{},[393],{"type":246,"value":253},{"type":246,"value":395}," for\nslides. It passes through ",{"type":241,"tag":249,"props":397,"children":398},{},[399],{"type":246,"value":260},{"type":246,"value":401}," and native ",{"type":241,"tag":249,"props":403,"children":404},{},[405],{"type":246,"value":266},{"type":246,"value":407}," values. The Nuxt Image\nadapter generates responsive URLs from its configured provider.",{"type":241,"tag":242,"props":409,"children":410},{},[411,413,419,421,426],{"type":246,"value":412},"Use the ",{"type":241,"tag":414,"props":415,"children":416},"a",{"href":65},[417],{"type":246,"value":418},"Nuxt Image guide",{"type":246,"value":420}," or the\n",{"type":241,"tag":414,"props":422,"children":423},{"href":105},[424],{"type":246,"value":425},"custom image service guide",{"type":246,"value":427}," for\nsetup.",{"type":241,"tag":274,"props":429,"children":431},{"id":430},"loading-behavior",[432],{"type":246,"value":433},"Loading behavior",{"type":241,"tag":242,"props":435,"children":436},{},[437,442],{"type":241,"tag":249,"props":438,"children":439},{},[440],{"type":246,"value":441},"PhotoImage",{"type":246,"value":443}," uses native lazy loading by default. Ready-made components can use\neager loading for images that must appear immediately. The browser still owns\nrequest scheduling and candidate selection.",{"type":241,"tag":242,"props":445,"children":446},{},[447,449,453,455,459],{"type":246,"value":448},"Use a ",{"type":241,"tag":249,"props":450,"children":451},{},[452],{"type":246,"value":266},{"type":246,"value":454}," value that describes the rendered image width. This helps the\nbrowser select an appropriate ",{"type":241,"tag":249,"props":456,"children":457},{},[458],{"type":246,"value":260},{"type":246,"value":460}," candidate instead of downloading a file\nlarger than the layout needs.",{"type":241,"tag":274,"props":462,"children":464},{"id":463},"placeholders",[465],{"type":246,"value":466},"Placeholders",{"type":241,"tag":242,"props":468,"children":469},{},[470,475,477,481,482,486,488,492],{"type":241,"tag":249,"props":471,"children":472},{},[473],{"type":246,"value":474},"placeholderSrc",{"type":246,"value":476}," is rendered as a background until the main image loads. It\nresets when the adapter produces a different ",{"type":241,"tag":249,"props":478,"children":479},{},[480],{"type":246,"value":253},{"type":246,"value":255},{"type":241,"tag":249,"props":483,"children":484},{},[485],{"type":246,"value":260},{"type":246,"value":487},", or ",{"type":241,"tag":249,"props":489,"children":490},{},[491],{"type":246,"value":266},{"type":246,"value":493}," request.\nIf the main image fails, the placeholder remains visible.",{"type":241,"tag":242,"props":495,"children":496},{},[497,499,504],{"type":246,"value":498},"This behavior applies to native, Nuxt Image, and custom adapters because the\nadapter returns the same ",{"type":241,"tag":249,"props":500,"children":501},{},[502],{"type":246,"value":503},"ImageSource",{"type":246,"value":505}," shape.",{"type":241,"tag":274,"props":507,"children":509},{"id":508},"server-rendering",[510],{"type":246,"value":511},"Server rendering",{"type":241,"tag":242,"props":513,"children":514},{},[515],{"type":246,"value":516},"An adapter must return the same result for the same photo and context on the\nserver and client. Do not sign URLs from the current time or random state during\nrender. Prepare stable URLs before rendering or use a deterministic service URL.",{"title":518,"searchDepth":519,"depth":519,"links":520},"",4,[521,523,524,525],{"id":276,"depth":522,"text":279},2,{"id":430,"depth":522,"text":433},{"id":463,"depth":522,"text":466},{"id":508,"depth":522,"text":511},"markdown","docs",{"source":529,"path":530,"stem":531,"dir":532,"extension":533},"content","docs\u002F3.concepts\u002F5.image-delivery.md","docs\u002F3.concepts\u002F5.image-delivery","concepts","md",{"requestedPath":141,"resolvedPath":141,"alternates":535},[],{"requested":537,"resolved":538,"usedFallback":6},{},{"locale":8},{"previous":540,"next":541},{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},1788702884164]