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