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