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