[{"data":1,"prerenderedAt":833},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:VY0lI7e0i1lKb_aQ3ohrRN_SxUaBfidTjTzh_4QTZUg":188,"content-page-surround:docs:VY0lI7e0i1lKb_aQ3ohrRN_SxUaBfidTjTzh_4QTZUg":818,"i-logos:vue":821,"i-logos:typescript-icon":826,"i-lucide:clipboard":828,"i-lucide:code":831},[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",{"navigation":189,"title":14,"description":190,"redirectFrom":191,"body":194,"type":805,"id":15,"canonicalKey":16,"draft":6,"partial":6,"locale":8,"collection":806,"navigationFile":6,"file":807,"route":813,"resolution":815},{"title":14},"Photo albums, a lightbox, and a carousel for Nuxt. Server-rendered layout from known image sizes, one photo shape for every component, and which component to use.",[192,193],"\u002Fdocs\u002Fstart\u002Fwhy-nuxt-photo","\u002Fdocs\u002Fstart\u002Fchoose-a-component",{"type":195,"children":196,"toc":797},"root",[197,205,212,225,232,237,386,562,573,579,584,755,767,773,788],{"type":198,"tag":199,"props":200,"children":201},"element","p",{},[202],{"type":203,"value":204},"text","Nuxt Photo renders photo albums and a carousel, and opens them in an accessible\nlightbox. It lays out each album on the server from the image sizes you already\nknow, so the page does not jump while images load.",{"type":198,"tag":206,"props":207,"children":211},"example",{"name":208,"$":209},"portfolio-grid",{"component":210,"block":210},1,[],{"type":198,"tag":199,"props":213,"children":214},{},[215,217,223],{"type":203,"value":216},"Select a photo. Try the arrow keys, a click to zoom, and ",{"type":198,"tag":218,"props":219,"children":220},"code",{},[221],{"type":203,"value":222},"Escape",{"type":203,"value":224},": focus\nreturns to the photo you were viewing.",{"type":198,"tag":226,"props":227,"children":229},"h2",{"id":228},"pick-a-component",[230],{"type":203,"value":231},"Pick a component",{"type":198,"tag":199,"props":233,"children":234},{},[235],{"type":203,"value":236},"All components take the same photo data and are registered for you in Nuxt.",{"type":198,"tag":238,"props":239,"children":240},"table",{},[241,264],{"type":198,"tag":242,"props":243,"children":244},"thead",{},[245],{"type":198,"tag":246,"props":247,"children":248},"tr",{},[249,255,260],{"type":198,"tag":250,"props":251,"children":252},"th",{},[253],{"type":203,"value":254},"You need",{"type":198,"tag":250,"props":256,"children":257},{},[258],{"type":203,"value":259},"Use",{"type":198,"tag":250,"props":261,"children":262},{},[263],{"type":203,"value":138},{"type":198,"tag":265,"props":266,"children":267},"tbody",{},[268,290,316,338,363],{"type":198,"tag":246,"props":269,"children":270},{},[271,277,285],{"type":198,"tag":272,"props":273,"children":274},"td",{},[275],{"type":203,"value":276},"A gallery in rows, columns, or masonry",{"type":198,"tag":272,"props":278,"children":279},{},[280],{"type":198,"tag":218,"props":281,"children":282},{},[283],{"type":203,"value":284},"\u003CPhotoAlbum>",{"type":198,"tag":272,"props":286,"children":287},{},[288],{"type":203,"value":289},"On by default",{"type":198,"tag":246,"props":291,"children":292},{},[293,298,306],{"type":198,"tag":272,"props":294,"children":295},{},[296],{"type":203,"value":297},"One photo, such as a cover",{"type":198,"tag":272,"props":299,"children":300},{},[301],{"type":198,"tag":218,"props":302,"children":303},{},[304],{"type":203,"value":305},"\u003CPhoto>",{"type":198,"tag":272,"props":307,"children":308},{},[309,311],{"type":203,"value":310},"Add ",{"type":198,"tag":218,"props":312,"children":313},{},[314],{"type":203,"value":315},"lightbox",{"type":198,"tag":246,"props":317,"children":318},{},[319,324,334],{"type":198,"tag":272,"props":320,"children":321},{},[322],{"type":203,"value":323},"Several sections with one lightbox order",{"type":198,"tag":272,"props":325,"children":326},{},[327,332],{"type":198,"tag":218,"props":328,"children":329},{},[330],{"type":203,"value":331},"\u003CPhotoGroup>",{"type":203,"value":333}," around albums\u002Fphotos",{"type":198,"tag":272,"props":335,"children":336},{},[337],{"type":203,"value":289},{"type":198,"tag":246,"props":339,"children":340},{},[341,346,354],{"type":198,"tag":272,"props":342,"children":343},{},[344],{"type":203,"value":345},"Horizontal browsing with thumbnails",{"type":198,"tag":272,"props":347,"children":348},{},[349],{"type":198,"tag":218,"props":350,"children":351},{},[352],{"type":203,"value":353},"\u003CPhotoCarousel>",{"type":198,"tag":272,"props":355,"children":356},{},[357,358],{"type":203,"value":310},{"type":198,"tag":218,"props":359,"children":360},{},[361],{"type":203,"value":362},":lightbox=\"true\"",{"type":198,"tag":246,"props":364,"children":365},{},[366,371,381],{"type":198,"tag":272,"props":367,"children":368},{},[369],{"type":203,"value":370},"Your own thumbnail layout or viewer",{"type":198,"tag":272,"props":372,"children":373},{},[374,379],{"type":198,"tag":218,"props":375,"children":376},{},[377],{"type":203,"value":378},"\u003CLightboxProvider>",{"type":203,"value":380}," and primitives",{"type":198,"tag":272,"props":382,"children":383},{},[384],{"type":203,"value":385},"You compose it",{"type":198,"tag":387,"props":388,"children":391},"pre",{"language":389,"class":390},"vue","shiki shiki-themes material-theme-lighter material-theme-palenight dark:material-theme-palenight",[392],{"type":198,"tag":218,"props":393,"children":395},{"class":394},"language-vue",[396,448,450,496,497],{"type":198,"tag":397,"props":398,"children":401},"span",{"class":399,"style":400},"line","display: inline",[402,408,413,418,424,429,434,439,443],{"type":198,"tag":397,"props":403,"children":405},{"style":404},"color:#39ADB5;--shiki-dark:#89DDFF",[406],{"type":203,"value":407},"\u003C",{"type":198,"tag":397,"props":409,"children":411},{"style":410},"color:#E53935;--shiki-dark:#F07178",[412],{"type":203,"value":123},{"type":198,"tag":397,"props":414,"children":415},{"style":404},[416],{"type":203,"value":417}," :",{"type":198,"tag":397,"props":419,"children":421},{"style":420},"color:#9C3EDA;--shiki-dark:#C792EA",[422],{"type":203,"value":423},"photos",{"type":198,"tag":397,"props":425,"children":426},{"style":404},[427],{"type":203,"value":428},"=",{"type":198,"tag":397,"props":430,"children":431},{"style":404},[432],{"type":203,"value":433},"\"",{"type":198,"tag":397,"props":435,"children":437},{"style":436},"color:#90A4AE;--shiki-dark:#BABED8",[438],{"type":203,"value":423},{"type":198,"tag":397,"props":440,"children":441},{"style":404},[442],{"type":203,"value":433},{"type":198,"tag":397,"props":444,"children":445},{"style":404},[446],{"type":203,"value":447}," \u002F>",{"type":203,"value":449},"\n",{"type":198,"tag":397,"props":451,"children":452},{"class":399,"style":400},[453,457,461,465,470,474,478,483,487,492],{"type":198,"tag":397,"props":454,"children":455},{"style":404},[456],{"type":203,"value":407},{"type":198,"tag":397,"props":458,"children":459},{"style":410},[460],{"type":203,"value":118},{"type":198,"tag":397,"props":462,"children":463},{"style":404},[464],{"type":203,"value":417},{"type":198,"tag":397,"props":466,"children":467},{"style":420},[468],{"type":203,"value":469},"photo",{"type":198,"tag":397,"props":471,"children":472},{"style":404},[473],{"type":203,"value":428},{"type":198,"tag":397,"props":475,"children":476},{"style":404},[477],{"type":203,"value":433},{"type":198,"tag":397,"props":479,"children":480},{"style":436},[481],{"type":203,"value":482},"cover",{"type":198,"tag":397,"props":484,"children":485},{"style":404},[486],{"type":203,"value":433},{"type":198,"tag":397,"props":488,"children":489},{"style":420},[490],{"type":203,"value":491}," lightbox",{"type":198,"tag":397,"props":493,"children":494},{"style":404},[495],{"type":203,"value":447},{"type":203,"value":449},{"type":198,"tag":397,"props":498,"children":499},{"class":399,"style":400},[500,504,508,512,516,520,524,528,532,536,540,544,548,554,558],{"type":198,"tag":397,"props":501,"children":502},{"style":404},[503],{"type":203,"value":407},{"type":198,"tag":397,"props":505,"children":506},{"style":410},[507],{"type":203,"value":133},{"type":198,"tag":397,"props":509,"children":510},{"style":404},[511],{"type":203,"value":417},{"type":198,"tag":397,"props":513,"children":514},{"style":420},[515],{"type":203,"value":423},{"type":198,"tag":397,"props":517,"children":518},{"style":404},[519],{"type":203,"value":428},{"type":198,"tag":397,"props":521,"children":522},{"style":404},[523],{"type":203,"value":433},{"type":198,"tag":397,"props":525,"children":526},{"style":436},[527],{"type":203,"value":423},{"type":198,"tag":397,"props":529,"children":530},{"style":404},[531],{"type":203,"value":433},{"type":198,"tag":397,"props":533,"children":534},{"style":404},[535],{"type":203,"value":417},{"type":198,"tag":397,"props":537,"children":538},{"style":420},[539],{"type":203,"value":315},{"type":198,"tag":397,"props":541,"children":542},{"style":404},[543],{"type":203,"value":428},{"type":198,"tag":397,"props":545,"children":546},{"style":404},[547],{"type":203,"value":433},{"type":198,"tag":397,"props":549,"children":551},{"style":550},"color:#FF5370;--shiki-dark:#FF9CAC",[552],{"type":203,"value":553},"true",{"type":198,"tag":397,"props":555,"children":556},{"style":404},[557],{"type":203,"value":433},{"type":198,"tag":397,"props":559,"children":560},{"style":404},[561],{"type":203,"value":447},{"type":198,"tag":199,"props":563,"children":564},{},[565,567,571],{"type":203,"value":566},"Most apps need only ",{"type":198,"tag":218,"props":568,"children":569},{},[570],{"type":203,"value":123},{"type":203,"value":572},". Change its look with props, CSS variables,\nand slots before you reach for the lower-level components.",{"type":198,"tag":226,"props":574,"children":576},{"id":575},"what-you-provide",[577],{"type":203,"value":578},"What you provide",{"type":198,"tag":199,"props":580,"children":581},{},[582],{"type":203,"value":583},"Each photo is a plain object. Four fields are required:",{"type":198,"tag":387,"props":585,"children":587},{"language":586,"class":390},"ts",[588],{"type":198,"tag":218,"props":589,"children":591},{"class":590},"language-ts",[592,626,627,666,667,696,697,724,725,746,747],{"type":198,"tag":397,"props":593,"children":594},{"class":399,"style":400},[595,600,605,610,616,621],{"type":198,"tag":397,"props":596,"children":597},{"style":420},[598],{"type":203,"value":599},"const",{"type":198,"tag":397,"props":601,"children":602},{"style":436},[603],{"type":203,"value":604}," photo",{"type":198,"tag":397,"props":606,"children":607},{"style":404},[608],{"type":203,"value":609},":",{"type":198,"tag":397,"props":611,"children":613},{"style":612},"color:#E2931D;--shiki-dark:#FFCB6B",[614],{"type":203,"value":615}," PhotoItem",{"type":198,"tag":397,"props":617,"children":618},{"style":404},[619],{"type":203,"value":620}," =",{"type":198,"tag":397,"props":622,"children":623},{"style":404},[624],{"type":203,"value":625}," {",{"type":203,"value":449},{"type":198,"tag":397,"props":628,"children":629},{"class":399,"style":400},[630,635,639,644,650,655,660],{"type":198,"tag":397,"props":631,"children":632},{"style":410},[633],{"type":203,"value":634},"  id",{"type":198,"tag":397,"props":636,"children":637},{"style":404},[638],{"type":203,"value":609},{"type":198,"tag":397,"props":640,"children":641},{"style":404},[642],{"type":203,"value":643}," '",{"type":198,"tag":397,"props":645,"children":647},{"style":646},"color:#91B859;--shiki-dark:#C3E88D",[648],{"type":203,"value":649},"moss-canyon",{"type":198,"tag":397,"props":651,"children":652},{"style":404},[653],{"type":203,"value":654},"'",{"type":198,"tag":397,"props":656,"children":657},{"style":404},[658],{"type":203,"value":659},",",{"type":198,"tag":397,"props":661,"children":663},{"style":662},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[664],{"type":203,"value":665}," \u002F\u002F stable and unique, not the array index",{"type":203,"value":449},{"type":198,"tag":397,"props":668,"children":669},{"class":399,"style":400},[670,675,679,683,688,692],{"type":198,"tag":397,"props":671,"children":672},{"style":410},[673],{"type":203,"value":674},"  src",{"type":198,"tag":397,"props":676,"children":677},{"style":404},[678],{"type":203,"value":609},{"type":198,"tag":397,"props":680,"children":681},{"style":404},[682],{"type":203,"value":643},{"type":198,"tag":397,"props":684,"children":685},{"style":646},[686],{"type":203,"value":687},"\u002Fphotos\u002Fmoss-canyon.jpg",{"type":198,"tag":397,"props":689,"children":690},{"style":404},[691],{"type":203,"value":654},{"type":198,"tag":397,"props":693,"children":694},{"style":404},[695],{"type":203,"value":659},{"type":203,"value":449},{"type":198,"tag":397,"props":698,"children":699},{"class":399,"style":400},[700,705,709,715,719],{"type":198,"tag":397,"props":701,"children":702},{"style":410},[703],{"type":203,"value":704},"  width",{"type":198,"tag":397,"props":706,"children":707},{"style":404},[708],{"type":203,"value":609},{"type":198,"tag":397,"props":710,"children":712},{"style":711},"color:#F76D47;--shiki-dark:#F78C6C",[713],{"type":203,"value":714}," 1280",{"type":198,"tag":397,"props":716,"children":717},{"style":404},[718],{"type":203,"value":659},{"type":198,"tag":397,"props":720,"children":721},{"style":662},[722],{"type":203,"value":723}," \u002F\u002F real pixel size of the image file",{"type":203,"value":449},{"type":198,"tag":397,"props":726,"children":727},{"class":399,"style":400},[728,733,737,742],{"type":198,"tag":397,"props":729,"children":730},{"style":410},[731],{"type":203,"value":732},"  height",{"type":198,"tag":397,"props":734,"children":735},{"style":404},[736],{"type":203,"value":609},{"type":198,"tag":397,"props":738,"children":739},{"style":711},[740],{"type":203,"value":741}," 853",{"type":198,"tag":397,"props":743,"children":744},{"style":404},[745],{"type":203,"value":659},{"type":203,"value":449},{"type":198,"tag":397,"props":748,"children":749},{"class":399,"style":400},[750],{"type":198,"tag":397,"props":751,"children":752},{"style":404},[753],{"type":203,"value":754},"}",{"type":198,"tag":199,"props":756,"children":757},{},[758,760,765],{"type":203,"value":759},"Nuxt Photo does not measure images in the browser, because that would delay\nthe layout until every image has downloaded. Store the sizes when you upload\nor import images; ",{"type":198,"tag":761,"props":762,"children":763},"a",{"href":59},[764],{"type":203,"value":56},{"type":203,"value":766}," shows how.",{"type":198,"tag":226,"props":768,"children":770},{"id":769},"when-to-use-something-else",[771],{"type":203,"value":772},"When to use something else",{"type":198,"tag":774,"props":775,"children":776},"ul",{},[777,783],{"type":198,"tag":778,"props":779,"children":780},"li",{},[781],{"type":203,"value":782},"A plain CSS grid is enough when nobody needs a lightbox, zoom, or rows that\nfill the width.",{"type":198,"tag":778,"props":784,"children":785},{},[786],{"type":203,"value":787},"Use a media viewer such as lightGallery when you need video or plugins.\nNuxt Photo 1.0 shows photos only.",{"type":198,"tag":199,"props":789,"children":790},{},[791,795],{"type":198,"tag":761,"props":792,"children":793},{"href":43},[794],{"type":203,"value":40},{"type":203,"value":796}," covers PhotoSwipe,\nlightGallery, Nuxt Image, and a custom stack.",{"title":798,"searchDepth":799,"depth":799,"links":800},"",4,[801,803,804],{"id":228,"depth":802,"text":231},2,{"id":575,"depth":802,"text":578},{"id":769,"depth":802,"text":772},"markdown","docs",{"source":808,"path":809,"stem":810,"dir":811,"extension":812},"content","docs\u002F1.start\u002F1.introduction.md","docs\u002F1.start\u002F1.introduction","start","md",{"requestedPath":18,"resolvedPath":18,"alternates":814},[],{"requested":816,"resolved":817,"usedFallback":6},{},{"locale":8},{"previous":819,"next":820},null,{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},{"left":822,"top":822,"width":823,"height":824,"rotate":822,"vFlip":6,"hFlip":6,"body":825},0,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":822,"top":822,"width":823,"height":823,"rotate":822,"vFlip":6,"hFlip":6,"body":827},"\u003Cpath fill=\"#3178c6\" d=\"M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0\"\u002F>\u003Cpath fill=\"#fff\" d=\"M150.518 200.475v27.62q6.738 3.453 15.938 5.179T185.849 235q9.934 0 18.874-1.899t15.678-6.257q6.738-4.359 10.669-11.394q3.93-7.033 3.93-17.391q0-7.51-2.246-13.163a30.8 30.8 0 0 0-6.479-10.055q-4.232-4.402-10.149-7.898t-13.347-6.602q-5.442-2.245-9.761-4.359t-7.342-4.316q-3.024-2.2-4.665-4.661t-1.641-5.567q0-2.848 1.468-5.135q1.469-2.288 4.147-3.927t6.565-2.547q3.887-.906 8.638-.906q3.456 0 7.299.518q3.844.517 7.732 1.597a54 54 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807q-6.306-2.417-13.778-3.582T198.633 107q-9.847 0-18.658 2.115q-8.811 2.114-15.506 6.602q-6.694 4.49-10.582 11.437Q150 134.102 150 143.769q0 12.342 7.127 21.06t21.638 14.759a292 292 0 0 1 10.625 4.575q4.924 2.244 8.509 4.66t5.658 5.265t2.073 6.474a9.9 9.9 0 0 1-1.296 4.963q-1.295 2.287-3.93 3.97t-6.565 2.632t-9.2.95q-8.983 0-17.794-3.151t-16.327-9.451m-46.036-68.733H140V109H41v22.742h35.345V233h28.137z\"\u002F>",{"left":822,"top":822,"width":829,"height":829,"rotate":822,"vFlip":6,"hFlip":6,"body":830},24,"\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>",{"left":822,"top":822,"width":829,"height":829,"rotate":822,"vFlip":6,"hFlip":6,"body":832},"\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>",1791310381189]