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