[{"data":1,"prerenderedAt":1855},["ShallowReactive",2],{"navigation_docs":3,"-get-started-configuration":212,"-get-started-configuration-surround":1850},[4,30,47,199],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","\u002Fget-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F1.installation",{"title":14,"path":15,"stem":16},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F2.configuration",{"title":18,"path":19,"stem":20},"Providers","\u002Fget-started\u002Fproviders","1.get-started\u002F3.providers",{"title":22,"path":23,"stem":24},"Contributing","\u002Fget-started\u002Fcontributing","1.get-started\u002F4.contributing",{"title":26,"path":27,"stem":28},"Migration","\u002Fget-started\u002Fmigration","1.get-started\u002F5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","\u002Fusage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","\u002Fusage\u002Fnuxt-img","2.usage\u002F1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","\u002Fusage\u002Fnuxt-picture","2.usage\u002F2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","\u002Fusage\u002Fuse-image","2.usage\u002F3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"\u002Fproviders","3.providers",[51,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183,187,191,195],{"title":52,"path":53,"stem":54},"Aliyun","\u002Fproviders\u002Faliyun","3.providers\u002Faliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","\u002Fproviders\u002Faws-amplify","3.providers\u002Faws-amplify",{"title":60,"path":61,"stem":62},"Builder.io","\u002Fproviders\u002Fbuilderio","3.providers\u002Fbuilderio",{"title":64,"path":65,"stem":66},"Bunny","\u002Fproviders\u002Fbunny","3.providers\u002Fbunny",{"title":68,"path":69,"stem":70},"Caisy","\u002Fproviders\u002Fcaisy","3.providers\u002Fcaisy",{"title":72,"path":73,"stem":74},"Cloudflare","\u002Fproviders\u002Fcloudflare","3.providers\u002Fcloudflare",{"title":76,"path":77,"stem":78},"Cloudflare Images","\u002Fproviders\u002Fcloudflareimages","3.providers\u002Fcloudflareimages",{"title":80,"path":81,"stem":82},"Cloudimage","\u002Fproviders\u002Fcloudimage","3.providers\u002Fcloudimage",{"title":84,"path":85,"stem":86},"Cloudinary","\u002Fproviders\u002Fcloudinary","3.providers\u002Fcloudinary",{"title":88,"path":89,"stem":90},"Contentful","\u002Fproviders\u002Fcontentful","3.providers\u002Fcontentful",{"title":92,"path":93,"stem":94},"Directus","\u002Fproviders\u002Fdirectus","3.providers\u002Fdirectus",{"title":96,"path":97,"stem":98},"Fastly","\u002Fproviders\u002Ffastly","3.providers\u002Ffastly",{"title":100,"path":101,"stem":102},"Filerobot","\u002Fproviders\u002Ffilerobot","3.providers\u002Ffilerobot",{"title":104,"path":105,"stem":106},"GitHub","\u002Fproviders\u002Fgithub","3.providers\u002Fgithub",{"title":108,"path":109,"stem":110},"Glide","\u002Fproviders\u002Fglide","3.providers\u002Fglide",{"title":112,"path":113,"stem":114},"Gumlet","\u002Fproviders\u002Fgumlet","3.providers\u002Fgumlet",{"title":116,"path":117,"stem":118},"Hygraph","\u002Fproviders\u002Fhygraph","3.providers\u002Fhygraph",{"title":120,"path":121,"stem":122},"ImageEngine","\u002Fproviders\u002Fimageengine","3.providers\u002Fimageengine",{"title":124,"path":125,"stem":126},"ImageKit","\u002Fproviders\u002Fimagekit","3.providers\u002Fimagekit",{"title":128,"path":129,"stem":130},"Imgix","\u002Fproviders\u002Fimgix","3.providers\u002Fimgix",{"title":132,"path":133,"stem":134},"IPX","\u002Fproviders\u002Fipx","3.providers\u002Fipx",{"title":136,"path":137,"stem":138},"Netlify","\u002Fproviders\u002Fnetlify","3.providers\u002Fnetlify",{"title":140,"path":141,"stem":142},"None","\u002Fproviders\u002Fnone","3.providers\u002Fnone",{"title":144,"path":145,"stem":146},"Picsum","\u002Fproviders\u002Fpicsum","3.providers\u002Fpicsum",{"title":148,"path":149,"stem":150},"Prepr","\u002Fproviders\u002Fprepr","3.providers\u002Fprepr",{"title":152,"path":153,"stem":154},"Prismic","\u002Fproviders\u002Fprismic","3.providers\u002Fprismic",{"title":156,"path":157,"stem":158},"Sanity","\u002Fproviders\u002Fsanity","3.providers\u002Fsanity",{"title":160,"path":161,"stem":162},"Shopify","\u002Fproviders\u002Fshopify","3.providers\u002Fshopify",{"title":164,"path":165,"stem":166},"Sirv","\u002Fproviders\u002Fsirv","3.providers\u002Fsirv",{"title":168,"path":169,"stem":170},"Storyblok","\u002Fproviders\u002Fstoryblok","3.providers\u002Fstoryblok",{"title":172,"path":173,"stem":174},"Strapi","\u002Fproviders\u002Fstrapi","3.providers\u002Fstrapi",{"title":176,"path":177,"stem":178},"Supabase","\u002Fproviders\u002Fsupabase","3.providers\u002Fsupabase",{"title":180,"path":181,"stem":182},"Twicpics","\u002Fproviders\u002Ftwicpics","3.providers\u002Ftwicpics",{"title":184,"path":185,"stem":186},"Unsplash","\u002Fproviders\u002Funsplash","3.providers\u002Funsplash",{"title":188,"path":189,"stem":190},"Uploadcare","\u002Fproviders\u002Fuploadcare","3.providers\u002Fuploadcare",{"title":192,"path":193,"stem":194},"Vercel","\u002Fproviders\u002Fvercel","3.providers\u002Fvercel",{"title":196,"path":197,"stem":198},"Weserv","\u002Fproviders\u002Fweserv","3.providers\u002Fweserv",{"title":200,"path":201,"stem":202,"children":203,"page":29},"Advanced","\u002Fadvanced","4.advanced",[204,208],{"title":205,"path":206,"stem":207},"Custom Provider","\u002Fadvanced\u002Fcustom-provider","4.advanced\u002F1.custom-provider",{"title":209,"path":210,"stem":211},"Static Images","\u002Fadvanced\u002Fstatic-images","4.advanced\u002F2.static-images",{"id":213,"title":14,"body":214,"description":1844,"extension":608,"links":1845,"meta":1846,"navigation":1847,"path":15,"seo":1848,"stem":16,"__hash__":1849},"docs\u002F1.get-started\u002F2.configuration.md",{"type":215,"value":216,"toc":1829},"minimark",[217,230,298,304,311,357,362,365,376,422,427,433,463,470,526,531,534,544,685,701,706,709,762,767,770,961,966,976,1151,1156,1170,1175,1253,1259,1262,1383,1388,1393,1403,1414,1474,1479,1484,1493,1507,1555,1561,1595,1600,1606,1609,1612,1617,1704,1710,1737,1740,1767,1772,1796,1798,1822,1825],[218,219,220,221,225,226,229],"p",{},"To configure the image module and customize its behavior, you can use the ",[222,223,224],"code",{},"image"," property in your ",[222,227,228],{},"nuxt.config",":",[231,232,238],"pre",{"className":233,"code":234,"filename":235,"language":236,"meta":237,"style":237},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    \u002F\u002F Options\n  }\n})\n","nuxt.config.ts","ts","",[222,239,240,264,276,283,289],{"__ignoreMap":237},[241,242,245,249,252,256,260],"span",{"class":243,"line":244},"line",1,[241,246,248],{"class":247},"s7zQu","export",[241,250,251],{"class":247}," default",[241,253,255],{"class":254},"s2Zo4"," defineNuxtConfig",[241,257,259],{"class":258},"sTEyZ","(",[241,261,263],{"class":262},"sMK4o","{\n",[241,265,267,271,273],{"class":243,"line":266},2,[241,268,270],{"class":269},"swJcz","  image",[241,272,229],{"class":262},[241,274,275],{"class":262}," {\n",[241,277,279],{"class":243,"line":278},3,[241,280,282],{"class":281},"sHwdD","    \u002F\u002F Options\n",[241,284,286],{"class":243,"line":285},4,[241,287,288],{"class":262},"  }\n",[241,290,292,295],{"class":243,"line":291},5,[241,293,294],{"class":262},"}",[241,296,297],{"class":258},")\n",[299,300,302],"h2",{"id":301},"inject",[222,303,301],{},[218,305,306,307,310],{},"By default Nuxt Image v1 adopts a composable approach. If you do not use the components no additional code will be added to your bundle. But if you wish to globally initialize an ",[222,308,309],{},"$img"," helper that will be available throughout your application, you can do so.",[231,312,314],{"className":233,"code":313,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    inject: true\n  }\n})\n",[222,315,316,328,336,347,351],{"__ignoreMap":237},[241,317,318,320,322,324,326],{"class":243,"line":244},[241,319,248],{"class":247},[241,321,251],{"class":247},[241,323,255],{"class":254},[241,325,259],{"class":258},[241,327,263],{"class":262},[241,329,330,332,334],{"class":243,"line":266},[241,331,270],{"class":269},[241,333,229],{"class":262},[241,335,275],{"class":262},[241,337,338,341,343],{"class":243,"line":278},[241,339,340],{"class":269},"    inject",[241,342,229],{"class":262},[241,344,346],{"class":345},"sfNiH"," true\n",[241,348,349],{"class":243,"line":285},[241,350,288],{"class":262},[241,352,353,355],{"class":243,"line":291},[241,354,294],{"class":262},[241,356,297],{"class":258},[299,358,360],{"id":359},"quality",[222,361,359],{},[218,363,364],{},"The quality for the generated image(s).",[218,366,367,368,375],{},"You can also override this option at the component level by using the ",[369,370,372,374],"a",{"href":371},"\u002Fusage\u002Fnuxt-img#quality",[222,373,359],{}," prop",".",[231,377,379],{"className":233,"code":378,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    quality: 80\n  }\n})\n",[222,380,381,393,401,412,416],{"__ignoreMap":237},[241,382,383,385,387,389,391],{"class":243,"line":244},[241,384,248],{"class":247},[241,386,251],{"class":247},[241,388,255],{"class":254},[241,390,259],{"class":258},[241,392,263],{"class":262},[241,394,395,397,399],{"class":243,"line":266},[241,396,270],{"class":269},[241,398,229],{"class":262},[241,400,275],{"class":262},[241,402,403,406,408],{"class":243,"line":278},[241,404,405],{"class":269},"    quality",[241,407,229],{"class":262},[241,409,411],{"class":410},"sbssI"," 80\n",[241,413,414],{"class":243,"line":285},[241,415,288],{"class":262},[241,417,418,420],{"class":243,"line":291},[241,419,294],{"class":262},[241,421,297],{"class":258},[299,423,425],{"id":424},"format",[222,426,424],{},[218,428,429,430],{},"Default: ",[222,431,432],{},"['webp']",[218,434,435,436,438,439,442,443,442,446,442,449,442,452,455,456,459,460,375],{},"You can use this option to configure the default format for your images used by ",[222,437,40],{},". The available formats are ",[222,440,441],{},"webp",", ",[222,444,445],{},"avif",[222,447,448],{},"jpeg",[222,450,451],{},"jpg",[222,453,454],{},"png",", and ",[222,457,458],{},"gif",". The order of the formats is important, as the first format that is supported by the browser will be used. You can pass multiple values like ",[222,461,462],{},"['avif', 'webp']",[218,464,367,465,375],{},[369,466,468,374],{"href":467},"\u002Fusage\u002Fnuxt-picture#format",[222,469,424],{},[231,471,473],{"className":233,"code":472,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    format: ['webp']\n  }\n})\n",[222,474,475,487,495,516,520],{"__ignoreMap":237},[241,476,477,479,481,483,485],{"class":243,"line":244},[241,478,248],{"class":247},[241,480,251],{"class":247},[241,482,255],{"class":254},[241,484,259],{"class":258},[241,486,263],{"class":262},[241,488,489,491,493],{"class":243,"line":266},[241,490,270],{"class":269},[241,492,229],{"class":262},[241,494,275],{"class":262},[241,496,497,500,502,505,508,511,513],{"class":243,"line":278},[241,498,499],{"class":269},"    format",[241,501,229],{"class":262},[241,503,504],{"class":258}," [",[241,506,507],{"class":262},"'",[241,509,441],{"class":510},"sfazB",[241,512,507],{"class":262},[241,514,515],{"class":258},"]\n",[241,517,518],{"class":243,"line":285},[241,519,288],{"class":262},[241,521,522,524],{"class":243,"line":291},[241,523,294],{"class":262},[241,525,297],{"class":258},[299,527,529],{"id":528},"screens",[222,530,528],{},[218,532,533],{},"List of predefined screen sizes.",[218,535,536,537,543],{},"These sizes will be used to generate resized and optimized versions of an image (for example, with the ",[369,538,540],{"href":539},"\u002Fusage\u002Fnuxt-img#sizes",[222,541,542],{},"sizes"," modifier).",[231,545,547],{"className":233,"code":546,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    \u002F\u002F The screen sizes predefined by `@nuxt\u002Fimage`:\n    screens: {\n      'sm': 640,\n      'md': 768,\n      'lg': 1024,\n      'xl': 1280,\n      '2xl': 1536\n    }\n  }\n})\n",[222,548,549,561,569,574,583,601,618,635,652,667,673,678],{"__ignoreMap":237},[241,550,551,553,555,557,559],{"class":243,"line":244},[241,552,248],{"class":247},[241,554,251],{"class":247},[241,556,255],{"class":254},[241,558,259],{"class":258},[241,560,263],{"class":262},[241,562,563,565,567],{"class":243,"line":266},[241,564,270],{"class":269},[241,566,229],{"class":262},[241,568,275],{"class":262},[241,570,571],{"class":243,"line":278},[241,572,573],{"class":281},"    \u002F\u002F The screen sizes predefined by `@nuxt\u002Fimage`:\n",[241,575,576,579,581],{"class":243,"line":285},[241,577,578],{"class":269},"    screens",[241,580,229],{"class":262},[241,582,275],{"class":262},[241,584,585,588,591,593,595,598],{"class":243,"line":291},[241,586,587],{"class":262},"      '",[241,589,590],{"class":269},"sm",[241,592,507],{"class":262},[241,594,229],{"class":262},[241,596,597],{"class":410}," 640",[241,599,600],{"class":262},",\n",[241,602,604,606,609,611,613,616],{"class":243,"line":603},6,[241,605,587],{"class":262},[241,607,608],{"class":269},"md",[241,610,507],{"class":262},[241,612,229],{"class":262},[241,614,615],{"class":410}," 768",[241,617,600],{"class":262},[241,619,621,623,626,628,630,633],{"class":243,"line":620},7,[241,622,587],{"class":262},[241,624,625],{"class":269},"lg",[241,627,507],{"class":262},[241,629,229],{"class":262},[241,631,632],{"class":410}," 1024",[241,634,600],{"class":262},[241,636,638,640,643,645,647,650],{"class":243,"line":637},8,[241,639,587],{"class":262},[241,641,642],{"class":269},"xl",[241,644,507],{"class":262},[241,646,229],{"class":262},[241,648,649],{"class":410}," 1280",[241,651,600],{"class":262},[241,653,655,657,660,662,664],{"class":243,"line":654},9,[241,656,587],{"class":262},[241,658,659],{"class":269},"2xl",[241,661,507],{"class":262},[241,663,229],{"class":262},[241,665,666],{"class":410}," 1536\n",[241,668,670],{"class":243,"line":669},10,[241,671,672],{"class":262},"    }\n",[241,674,676],{"class":243,"line":675},11,[241,677,288],{"class":262},[241,679,681,683],{"class":243,"line":680},12,[241,682,294],{"class":262},[241,684,297],{"class":258},[686,687,688,689,695,696,375],"note",{},"By default, we share the same naming and sizes as ",[369,690,694],{"href":691,"rel":692},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fresponsive-design",[693],"nofollow","Tailwind CSS",". If you need a list of screen sizes matching a different framework, check out ",[369,697,700],{"href":698,"rel":699},"https:\u002F\u002Fvueuse.org\u002Fcore\u002FuseBreakpoints\u002F#presets",[693],"VueUse breakpoint presets",[299,702,704],{"id":703},"domains",[222,705,703],{},[218,707,708],{},"To enable image optimization on an external website, specify which domains are allowed to be optimized. This option will be used to detect whether a remote image should be optimized or not. This is needed to ensure that external URLs can't be abused.",[231,710,712],{"className":233,"code":711,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    domains: ['nuxtjs.org']\n  }\n})\n",[222,713,714,726,734,752,756],{"__ignoreMap":237},[241,715,716,718,720,722,724],{"class":243,"line":244},[241,717,248],{"class":247},[241,719,251],{"class":247},[241,721,255],{"class":254},[241,723,259],{"class":258},[241,725,263],{"class":262},[241,727,728,730,732],{"class":243,"line":266},[241,729,270],{"class":269},[241,731,229],{"class":262},[241,733,275],{"class":262},[241,735,736,739,741,743,745,748,750],{"class":243,"line":278},[241,737,738],{"class":269},"    domains",[241,740,229],{"class":262},[241,742,504],{"class":258},[241,744,507],{"class":262},[241,746,747],{"class":510},"nuxtjs.org",[241,749,507],{"class":262},[241,751,515],{"class":258},[241,753,754],{"class":243,"line":285},[241,755,288],{"class":262},[241,757,758,760],{"class":243,"line":291},[241,759,294],{"class":262},[241,761,297],{"class":258},[299,763,765],{"id":764},"presets",[222,766,764],{},[218,768,769],{},"Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project.",[771,772,773,888],"code-group",{},[231,774,776],{"className":233,"code":775,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    presets: {\n      avatar: {\n        modifiers: {\n          format: 'jpg',\n          width: 50,\n          height: 50\n        }\n      }\n    }\n  }\n})\n",[222,777,778,790,798,807,816,825,841,853,863,868,873,877,881],{"__ignoreMap":237},[241,779,780,782,784,786,788],{"class":243,"line":244},[241,781,248],{"class":247},[241,783,251],{"class":247},[241,785,255],{"class":254},[241,787,259],{"class":258},[241,789,263],{"class":262},[241,791,792,794,796],{"class":243,"line":266},[241,793,270],{"class":269},[241,795,229],{"class":262},[241,797,275],{"class":262},[241,799,800,803,805],{"class":243,"line":278},[241,801,802],{"class":269},"    presets",[241,804,229],{"class":262},[241,806,275],{"class":262},[241,808,809,812,814],{"class":243,"line":285},[241,810,811],{"class":269},"      avatar",[241,813,229],{"class":262},[241,815,275],{"class":262},[241,817,818,821,823],{"class":243,"line":291},[241,819,820],{"class":269},"        modifiers",[241,822,229],{"class":262},[241,824,275],{"class":262},[241,826,827,830,832,835,837,839],{"class":243,"line":603},[241,828,829],{"class":269},"          format",[241,831,229],{"class":262},[241,833,834],{"class":262}," '",[241,836,451],{"class":510},[241,838,507],{"class":262},[241,840,600],{"class":262},[241,842,843,846,848,851],{"class":243,"line":620},[241,844,845],{"class":269},"          width",[241,847,229],{"class":262},[241,849,850],{"class":410}," 50",[241,852,600],{"class":262},[241,854,855,858,860],{"class":243,"line":637},[241,856,857],{"class":269},"          height",[241,859,229],{"class":262},[241,861,862],{"class":410}," 50\n",[241,864,865],{"class":243,"line":654},[241,866,867],{"class":262},"        }\n",[241,869,870],{"class":243,"line":669},[241,871,872],{"class":262},"      }\n",[241,874,875],{"class":243,"line":675},[241,876,672],{"class":262},[241,878,879],{"class":243,"line":680},[241,880,288],{"class":262},[241,882,884,886],{"class":243,"line":883},13,[241,885,294],{"class":262},[241,887,297],{"class":258},[231,889,894],{"className":890,"code":891,"filename":892,"language":893,"meta":237,"style":237},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CNuxtImg\n    preset=\"avatar\"\n    src=\"\u002Fnuxt-icon.png\"\n  \u002F>\n\u003C\u002Ftemplate>\n","index.vue","vue",[222,895,896,907,915,933,947,952],{"__ignoreMap":237},[241,897,898,901,904],{"class":243,"line":244},[241,899,900],{"class":262},"\u003C",[241,902,903],{"class":269},"template",[241,905,906],{"class":262},">\n",[241,908,909,912],{"class":243,"line":266},[241,910,911],{"class":262},"  \u003C",[241,913,914],{"class":269},"NuxtImg\n",[241,916,917,921,924,927,930],{"class":243,"line":278},[241,918,920],{"class":919},"spNyl","    preset",[241,922,923],{"class":262},"=",[241,925,926],{"class":262},"\"",[241,928,929],{"class":510},"avatar",[241,931,932],{"class":262},"\"\n",[241,934,935,938,940,942,945],{"class":243,"line":285},[241,936,937],{"class":919},"    src",[241,939,923],{"class":262},[241,941,926],{"class":262},[241,943,944],{"class":510},"\u002Fnuxt-icon.png",[241,946,932],{"class":262},[241,948,949],{"class":243,"line":291},[241,950,951],{"class":262},"  \u002F>\n",[241,953,954,957,959],{"class":243,"line":603},[241,955,956],{"class":262},"\u003C\u002F",[241,958,903],{"class":269},[241,960,906],{"class":262},[299,962,964],{"id":963},"providers",[222,965,963],{},[218,967,968,969,972,973,975],{},"In order to create and use a ",[369,970,971],{"href":206},"custom provider",", you need to use the ",[222,974,963],{}," option and define your custom providers.",[771,977,978,1065],{},[231,979,981],{"className":233,"code":980,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    providers: {\n      random: {\n        provider: '~\u002Fproviders\u002Frandom',\n        options: {}\n      }\n    }\n  }\n})\n",[222,982,983,995,1003,1012,1021,1037,1047,1051,1055,1059],{"__ignoreMap":237},[241,984,985,987,989,991,993],{"class":243,"line":244},[241,986,248],{"class":247},[241,988,251],{"class":247},[241,990,255],{"class":254},[241,992,259],{"class":258},[241,994,263],{"class":262},[241,996,997,999,1001],{"class":243,"line":266},[241,998,270],{"class":269},[241,1000,229],{"class":262},[241,1002,275],{"class":262},[241,1004,1005,1008,1010],{"class":243,"line":278},[241,1006,1007],{"class":269},"    providers",[241,1009,229],{"class":262},[241,1011,275],{"class":262},[241,1013,1014,1017,1019],{"class":243,"line":285},[241,1015,1016],{"class":269},"      random",[241,1018,229],{"class":262},[241,1020,275],{"class":262},[241,1022,1023,1026,1028,1030,1033,1035],{"class":243,"line":291},[241,1024,1025],{"class":269},"        provider",[241,1027,229],{"class":262},[241,1029,834],{"class":262},[241,1031,1032],{"class":510},"~\u002Fproviders\u002Frandom",[241,1034,507],{"class":262},[241,1036,600],{"class":262},[241,1038,1039,1042,1044],{"class":243,"line":603},[241,1040,1041],{"class":269},"        options",[241,1043,229],{"class":262},[241,1045,1046],{"class":262}," {}\n",[241,1048,1049],{"class":243,"line":620},[241,1050,872],{"class":262},[241,1052,1053],{"class":243,"line":637},[241,1054,672],{"class":262},[241,1056,1057],{"class":243,"line":654},[241,1058,288],{"class":262},[241,1060,1061,1063],{"class":243,"line":669},[241,1062,294],{"class":262},[241,1064,297],{"class":258},[231,1066,1068],{"className":890,"code":1067,"filename":892,"language":893,"meta":237,"style":237},"\u003Ctemplate>\n  \u003CNuxtImg\n    provider=\"random\"\n    src=\"main.png\"\n    width=\"300\"\n    height=\"169\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[222,1069,1070,1078,1084,1098,1111,1125,1139,1143],{"__ignoreMap":237},[241,1071,1072,1074,1076],{"class":243,"line":244},[241,1073,900],{"class":262},[241,1075,903],{"class":269},[241,1077,906],{"class":262},[241,1079,1080,1082],{"class":243,"line":266},[241,1081,911],{"class":262},[241,1083,914],{"class":269},[241,1085,1086,1089,1091,1093,1096],{"class":243,"line":278},[241,1087,1088],{"class":919},"    provider",[241,1090,923],{"class":262},[241,1092,926],{"class":262},[241,1094,1095],{"class":510},"random",[241,1097,932],{"class":262},[241,1099,1100,1102,1104,1106,1109],{"class":243,"line":285},[241,1101,937],{"class":919},[241,1103,923],{"class":262},[241,1105,926],{"class":262},[241,1107,1108],{"class":510},"main.png",[241,1110,932],{"class":262},[241,1112,1113,1116,1118,1120,1123],{"class":243,"line":291},[241,1114,1115],{"class":919},"    width",[241,1117,923],{"class":262},[241,1119,926],{"class":262},[241,1121,1122],{"class":510},"300",[241,1124,932],{"class":262},[241,1126,1127,1130,1132,1134,1137],{"class":243,"line":603},[241,1128,1129],{"class":919},"    height",[241,1131,923],{"class":262},[241,1133,926],{"class":262},[241,1135,1136],{"class":510},"169",[241,1138,932],{"class":262},[241,1140,1141],{"class":243,"line":620},[241,1142,951],{"class":262},[241,1144,1145,1147,1149],{"class":243,"line":637},[241,1146,956],{"class":262},[241,1148,903],{"class":269},[241,1150,906],{"class":262},[299,1152,1154],{"id":1153},"provider",[222,1155,1153],{},[218,1157,429,1158,1161,1162,1165,1166,1169],{},[222,1159,1160],{},"ipx"," (or ",[222,1163,1164],{},"ipxStatic"," if used with a static nitro preset, such as if you are running ",[222,1167,1168],{},"nuxt generate",")",[218,1171,1172,1173,375],{},"We can specify default provider to be used when not specified in component or when calling ",[222,1174,309],{},[231,1176,1178],{"className":233,"code":1177,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    provider: 'twicpics',\n    twicpics: {\n      baseURL: 'https:\u002F\u002Fnuxt-demo.twic.pics'\n    }\n  }\n})\n",[222,1179,1180,1192,1200,1215,1224,1239,1243,1247],{"__ignoreMap":237},[241,1181,1182,1184,1186,1188,1190],{"class":243,"line":244},[241,1183,248],{"class":247},[241,1185,251],{"class":247},[241,1187,255],{"class":254},[241,1189,259],{"class":258},[241,1191,263],{"class":262},[241,1193,1194,1196,1198],{"class":243,"line":266},[241,1195,270],{"class":269},[241,1197,229],{"class":262},[241,1199,275],{"class":262},[241,1201,1202,1204,1206,1208,1211,1213],{"class":243,"line":278},[241,1203,1088],{"class":269},[241,1205,229],{"class":262},[241,1207,834],{"class":262},[241,1209,1210],{"class":510},"twicpics",[241,1212,507],{"class":262},[241,1214,600],{"class":262},[241,1216,1217,1220,1222],{"class":243,"line":285},[241,1218,1219],{"class":269},"    twicpics",[241,1221,229],{"class":262},[241,1223,275],{"class":262},[241,1225,1226,1229,1231,1233,1236],{"class":243,"line":291},[241,1227,1228],{"class":269},"      baseURL",[241,1230,229],{"class":262},[241,1232,834],{"class":262},[241,1234,1235],{"class":510},"https:\u002F\u002Fnuxt-demo.twic.pics",[241,1237,1238],{"class":262},"'\n",[241,1240,1241],{"class":243,"line":603},[241,1242,672],{"class":262},[241,1244,1245],{"class":243,"line":620},[241,1246,288],{"class":262},[241,1248,1249,1251],{"class":243,"line":637},[241,1250,294],{"class":262},[241,1252,297],{"class":258},[1254,1255,1257],"h3",{"id":1256},"modifiers",[222,1258,1256],{},[218,1260,1261],{},"You can set default modifiers for the selected provider.",[231,1263,1265],{"className":233,"code":1264,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    provider: 'cloudinary',\n    cloudinary: {\n      baseURL: 'https:\u002F\u002Fres.cloudinary.com\u002F\u003Ccompany>\u002Fimage\u002Ffetch',\n      modifiers: {\n        effect: 'sharpen:100',\n        quality: 'auto:best'\n      }\n    }\n  }\n})\n",[222,1266,1267,1279,1287,1302,1311,1326,1335,1351,1365,1369,1373,1377],{"__ignoreMap":237},[241,1268,1269,1271,1273,1275,1277],{"class":243,"line":244},[241,1270,248],{"class":247},[241,1272,251],{"class":247},[241,1274,255],{"class":254},[241,1276,259],{"class":258},[241,1278,263],{"class":262},[241,1280,1281,1283,1285],{"class":243,"line":266},[241,1282,270],{"class":269},[241,1284,229],{"class":262},[241,1286,275],{"class":262},[241,1288,1289,1291,1293,1295,1298,1300],{"class":243,"line":278},[241,1290,1088],{"class":269},[241,1292,229],{"class":262},[241,1294,834],{"class":262},[241,1296,1297],{"class":510},"cloudinary",[241,1299,507],{"class":262},[241,1301,600],{"class":262},[241,1303,1304,1307,1309],{"class":243,"line":285},[241,1305,1306],{"class":269},"    cloudinary",[241,1308,229],{"class":262},[241,1310,275],{"class":262},[241,1312,1313,1315,1317,1319,1322,1324],{"class":243,"line":291},[241,1314,1228],{"class":269},[241,1316,229],{"class":262},[241,1318,834],{"class":262},[241,1320,1321],{"class":510},"https:\u002F\u002Fres.cloudinary.com\u002F\u003Ccompany>\u002Fimage\u002Ffetch",[241,1323,507],{"class":262},[241,1325,600],{"class":262},[241,1327,1328,1331,1333],{"class":243,"line":603},[241,1329,1330],{"class":269},"      modifiers",[241,1332,229],{"class":262},[241,1334,275],{"class":262},[241,1336,1337,1340,1342,1344,1347,1349],{"class":243,"line":620},[241,1338,1339],{"class":269},"        effect",[241,1341,229],{"class":262},[241,1343,834],{"class":262},[241,1345,1346],{"class":510},"sharpen:100",[241,1348,507],{"class":262},[241,1350,600],{"class":262},[241,1352,1353,1356,1358,1360,1363],{"class":243,"line":637},[241,1354,1355],{"class":269},"        quality",[241,1357,229],{"class":262},[241,1359,834],{"class":262},[241,1361,1362],{"class":510},"auto:best",[241,1364,1238],{"class":262},[241,1366,1367],{"class":243,"line":654},[241,1368,872],{"class":262},[241,1370,1371],{"class":243,"line":669},[241,1372,672],{"class":262},[241,1374,1375],{"class":243,"line":675},[241,1376,288],{"class":262},[241,1378,1379,1381],{"class":243,"line":680},[241,1380,294],{"class":262},[241,1382,297],{"class":258},[299,1384,1386],{"id":1385},"densities",[222,1387,1385],{},[218,1389,429,1390],{},[222,1391,1392],{},"[1, 2]",[218,1394,1395,1396,1399,1400,1402],{},"Specify a value to work with ",[222,1397,1398],{},"devicePixelRatio"," > 1 (these are devices with retina display and others). You must specify for which ",[222,1401,1398],{}," values you want to adapt images.",[218,1404,1405,1406,375],{},"You can ",[369,1407,1410,1411,1413],{"href":1408,"rel":1409},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FdevicePixelRatio",[693],"read more about ",[222,1412,1398],{}," on MDN",[231,1415,1417],{"className":233,"code":1416,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    densities: [1, 2, 3]\n  }\n})\n",[222,1418,1419,1431,1439,1464,1468],{"__ignoreMap":237},[241,1420,1421,1423,1425,1427,1429],{"class":243,"line":244},[241,1422,248],{"class":247},[241,1424,251],{"class":247},[241,1426,255],{"class":254},[241,1428,259],{"class":258},[241,1430,263],{"class":262},[241,1432,1433,1435,1437],{"class":243,"line":266},[241,1434,270],{"class":269},[241,1436,229],{"class":262},[241,1438,275],{"class":262},[241,1440,1441,1444,1446,1448,1451,1454,1457,1459,1462],{"class":243,"line":278},[241,1442,1443],{"class":269},"    densities",[241,1445,229],{"class":262},[241,1447,504],{"class":258},[241,1449,1450],{"class":410},"1",[241,1452,1453],{"class":262},",",[241,1455,1456],{"class":410}," 2",[241,1458,1453],{"class":262},[241,1460,1461],{"class":410}," 3",[241,1463,515],{"class":258},[241,1465,1466],{"class":243,"line":285},[241,1467,288],{"class":262},[241,1469,1470,1472],{"class":243,"line":291},[241,1471,294],{"class":262},[241,1473,297],{"class":258},[299,1475,1477],{"id":1476},"dir",[222,1478,1476],{},[218,1480,429,1481],{},[222,1482,1483],{},"public",[218,1485,1486,1487,1489,1490,1492],{},"This option allows you to specify the location of the source images when using the ",[222,1488,1160],{}," or ",[222,1491,1164],{}," provider.",[218,1494,1495,1496,1499,1500,1502,1503,1506],{},"For example you might want the source images in ",[222,1497,1498],{},"assets\u002Fimages"," directory rather than the default ",[222,1501,1483],{}," directory so the source images don't get copied into ",[222,1504,1505],{},"dist"," and deployed:",[231,1508,1510],{"className":233,"code":1509,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    dir: 'assets\u002Fimages'\n  }\n})\n",[222,1511,1512,1524,1532,1545,1549],{"__ignoreMap":237},[241,1513,1514,1516,1518,1520,1522],{"class":243,"line":244},[241,1515,248],{"class":247},[241,1517,251],{"class":247},[241,1519,255],{"class":254},[241,1521,259],{"class":258},[241,1523,263],{"class":262},[241,1525,1526,1528,1530],{"class":243,"line":266},[241,1527,270],{"class":269},[241,1529,229],{"class":262},[241,1531,275],{"class":262},[241,1533,1534,1537,1539,1541,1543],{"class":243,"line":278},[241,1535,1536],{"class":269},"    dir",[241,1538,229],{"class":262},[241,1540,834],{"class":262},[241,1542,1498],{"class":510},[241,1544,1238],{"class":262},[241,1546,1547],{"class":243,"line":285},[241,1548,288],{"class":262},[241,1550,1551,1553],{"class":243,"line":291},[241,1552,294],{"class":262},[241,1554,297],{"class":258},[218,1556,1557],{},[1558,1559,1560],"strong",{},"Notes:",[1562,1563,1564,1577,1585],"ul",{},[1565,1566,1567,1568,1570,1571,1573,1574,1576],"li",{},"For ",[222,1569,1164],{}," provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing ",[222,1572,1476],{}," from ",[222,1575,1483],{}," causes 404 errors.",[1565,1578,1567,1579,1581,1582,1584],{},[222,1580,1160],{}," provider, make sure to deploy customized ",[222,1583,1476],{}," as well.",[1565,1586,1587,1588,1591,1592,1594],{},"For some providers (like vercel), using a directory other than ",[222,1589,1590],{},"public\u002F"," for assets is not supported since resizing happens at runtime (instead of build\u002Fgenerate time) and source fetched from the ",[222,1593,1590],{}," directory (deployment URL)",[299,1596,1598],{"id":1597},"alias",[222,1599,1597],{},[218,1601,1602,1603,375],{},"This option allows you to specify aliases for ",[222,1604,1605],{},"src",[218,1607,1608],{},"When using the default ipx provider, URL aliases are shortened on the server-side.\nThis is especially useful for optimizing external URLs and not including them in HTML.",[218,1610,1611],{},"When using other providers, aliases are resolved in runtime and included in HTML. (only the usage is simplified)",[218,1613,1614],{},[1558,1615,1616],{},"Example:",[231,1618,1620],{"className":233,"code":1619,"filename":235,"language":236,"meta":237,"style":237},"export default defineNuxtConfig({\n  image: {\n    domains: [\n      'images.unsplash.com'\n    ],\n    alias: {\n      unsplash: 'https:\u002F\u002Fimages.unsplash.com'\n    }\n  }\n})\n",[222,1621,1622,1634,1642,1651,1660,1667,1676,1690,1694,1698],{"__ignoreMap":237},[241,1623,1624,1626,1628,1630,1632],{"class":243,"line":244},[241,1625,248],{"class":247},[241,1627,251],{"class":247},[241,1629,255],{"class":254},[241,1631,259],{"class":258},[241,1633,263],{"class":262},[241,1635,1636,1638,1640],{"class":243,"line":266},[241,1637,270],{"class":269},[241,1639,229],{"class":262},[241,1641,275],{"class":262},[241,1643,1644,1646,1648],{"class":243,"line":278},[241,1645,738],{"class":269},[241,1647,229],{"class":262},[241,1649,1650],{"class":258}," [\n",[241,1652,1653,1655,1658],{"class":243,"line":285},[241,1654,587],{"class":262},[241,1656,1657],{"class":510},"images.unsplash.com",[241,1659,1238],{"class":262},[241,1661,1662,1665],{"class":243,"line":291},[241,1663,1664],{"class":258},"    ]",[241,1666,600],{"class":262},[241,1668,1669,1672,1674],{"class":243,"line":603},[241,1670,1671],{"class":269},"    alias",[241,1673,229],{"class":262},[241,1675,275],{"class":262},[241,1677,1678,1681,1683,1685,1688],{"class":243,"line":620},[241,1679,1680],{"class":269},"      unsplash",[241,1682,229],{"class":262},[241,1684,834],{"class":262},[241,1686,1687],{"class":510},"https:\u002F\u002Fimages.unsplash.com",[241,1689,1238],{"class":262},[241,1691,1692],{"class":243,"line":637},[241,1693,672],{"class":262},[241,1695,1696],{"class":243,"line":654},[241,1697,288],{"class":262},[241,1699,1700,1702],{"class":243,"line":669},[241,1701,294],{"class":262},[241,1703,297],{"class":258},[218,1705,1706,1709],{},[1558,1707,1708],{},"Before"," using alias:",[231,1711,1713],{"className":890,"code":1712,"language":893,"meta":237,"style":237},"\u003CNuxtImg src=\"https:\u002F\u002Fimages.unsplash.com\u002F\u003Cid>\" \u002F>\n",[222,1714,1715],{"__ignoreMap":237},[241,1716,1717,1719,1722,1725,1727,1729,1732,1734],{"class":243,"line":244},[241,1718,900],{"class":262},[241,1720,1721],{"class":269},"NuxtImg",[241,1723,1724],{"class":919}," src",[241,1726,923],{"class":262},[241,1728,926],{"class":262},[241,1730,1731],{"class":510},"https:\u002F\u002Fimages.unsplash.com\u002F\u003Cid>",[241,1733,926],{"class":262},[241,1735,1736],{"class":258}," \u002F>\n",[218,1738,1739],{},"Generates:",[231,1741,1745],{"className":1742,"code":1743,"language":1744,"meta":237,"style":237},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg src=\"\u002F_ipx\u002Fhttps:\u002F\u002Fimages.unsplash.com\u002F\u003Cid>\">\n","html",[222,1746,1747],{"__ignoreMap":237},[241,1748,1749,1751,1754,1756,1758,1760,1763,1765],{"class":243,"line":244},[241,1750,900],{"class":262},[241,1752,1753],{"class":269},"img",[241,1755,1724],{"class":919},[241,1757,923],{"class":262},[241,1759,926],{"class":262},[241,1761,1762],{"class":510},"\u002F_ipx\u002Fhttps:\u002F\u002Fimages.unsplash.com\u002F\u003Cid>",[241,1764,926],{"class":262},[241,1766,906],{"class":262},[218,1768,1769,1709],{},[1558,1770,1771],{},"After",[231,1773,1775],{"className":890,"code":1774,"language":893,"meta":237,"style":237},"\u003CNuxtImg src=\"\u002Funsplash\u002F\u003Cid>\" \u002F>\n",[222,1776,1777],{"__ignoreMap":237},[241,1778,1779,1781,1783,1785,1787,1789,1792,1794],{"class":243,"line":244},[241,1780,900],{"class":262},[241,1782,1721],{"class":269},[241,1784,1724],{"class":919},[241,1786,923],{"class":262},[241,1788,926],{"class":262},[241,1790,1791],{"class":510},"\u002Funsplash\u002F\u003Cid>",[241,1793,926],{"class":262},[241,1795,1736],{"class":258},[218,1797,1739],{},[231,1799,1801],{"className":1742,"code":1800,"language":1744,"meta":237,"style":237},"\u003Cimg src=\"\u002F_ipx\u002Funsplash\u002F\u003Cid>\">\n",[222,1802,1803],{"__ignoreMap":237},[241,1804,1805,1807,1809,1811,1813,1815,1818,1820],{"class":243,"line":244},[241,1806,900],{"class":262},[241,1808,1753],{"class":269},[241,1810,1724],{"class":919},[241,1812,923],{"class":262},[241,1814,926],{"class":262},[241,1816,1817],{"class":510},"\u002F_ipx\u002Funsplash\u002F\u003Cid>",[241,1819,926],{"class":262},[241,1821,906],{"class":262},[218,1823,1824],{},"Both usage and output are simplified!",[1826,1827,1828],"style",{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":237,"searchDepth":266,"depth":266,"links":1830},[1831,1832,1833,1834,1835,1836,1837,1838,1841,1842,1843],{"id":301,"depth":266,"text":301},{"id":359,"depth":266,"text":359},{"id":424,"depth":266,"text":424},{"id":528,"depth":266,"text":528},{"id":703,"depth":266,"text":703},{"id":764,"depth":266,"text":764},{"id":963,"depth":266,"text":963},{"id":1153,"depth":266,"text":1153,"children":1839},[1840],{"id":1256,"depth":278,"text":1256},{"id":1385,"depth":266,"text":1385},{"id":1476,"depth":266,"text":1476},{"id":1597,"depth":266,"text":1597},"Nuxt Image is configured with sensible defaults.",null,{},true,{"title":14,"description":1844},"lqTX96ycAk1rHJQlvbFd7iEUsvAt098fh3mGJEqyOfs",[1851,1853],{"title":10,"path":11,"stem":12,"description":1852,"children":-1},"Using image module in your Nuxt project is only one command away.",{"title":18,"path":19,"stem":20,"description":1854,"children":-1},"Nuxt Image supports multiple providers for high performance.",1775043898546]