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