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