[{"data":1,"prerenderedAt":1840},["ShallowReactive",2],{"navigation_docs":3,"-get-started-configuration":184,"-get-started-configuration-surround":1835},[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":1828,"extension":1829,"layout":1830,"links":1830,"meta":1831,"navigation":1832,"path":15,"seo":1833,"stem":16,"__hash__":1834},"docs/1.get-started/2.configuration.md",{"type":187,"value":188,"toc":1813},"minimark",[189,202,270,276,283,329,334,337,348,394,399,405,435,442,498,503,506,516,667,686,691,694,747,752,755,945,950,960,1135,1140,1154,1159,1237,1243,1246,1367,1372,1377,1387,1398,1458,1463,1468,1477,1491,1539,1545,1579,1584,1590,1593,1596,1601,1688,1694,1721,1724,1751,1756,1780,1782,1806,1809],[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,671,677,678,681,682,685],"note",{},"We share the same naming and sizes as ",[341,672,676],{"href":673,"rel":674},"https://tailwindcss.com/docs/responsive-design",[675],"nofollow","Tailwind CSS",", with the addition of ",[194,679,680],{},"xs"," and ",[194,683,684],{},"xxl"," (for backwards compatibility).",[271,687,689],{"id":688},"domains",[194,690,688],{},[190,692,693],{},"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,695,697],{"className":205,"code":696,"filename":207,"language":208,"meta":209,"style":209},"export default defineNuxtConfig({\n  image: {\n    domains: ['nuxtjs.org']\n  }\n})\n",[194,698,699,711,719,737,741],{"__ignoreMap":209},[213,700,701,703,705,707,709],{"class":215,"line":216},[213,702,220],{"class":219},[213,704,223],{"class":219},[213,706,227],{"class":226},[213,708,231],{"class":230},[213,710,235],{"class":234},[213,712,713,715,717],{"class":215,"line":238},[213,714,242],{"class":241},[213,716,201],{"class":234},[213,718,247],{"class":234},[213,720,721,724,726,728,730,733,735],{"class":215,"line":250},[213,722,723],{"class":241},"    domains",[213,725,201],{"class":234},[213,727,476],{"class":230},[213,729,479],{"class":234},[213,731,732],{"class":482},"nuxtjs.org",[213,734,479],{"class":234},[213,736,487],{"class":230},[213,738,739],{"class":215,"line":257},[213,740,260],{"class":234},[213,742,743,745],{"class":215,"line":263},[213,744,266],{"class":234},[213,746,269],{"class":230},[271,748,750],{"id":749},"presets",[194,751,749],{},[190,753,754],{},"Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project.",[756,757,758,872],"code-group",{},[203,759,761],{"className":205,"code":760,"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,762,763,775,783,792,801,810,826,838,848,853,858,862,866],{"__ignoreMap":209},[213,764,765,767,769,771,773],{"class":215,"line":216},[213,766,220],{"class":219},[213,768,223],{"class":219},[213,770,227],{"class":226},[213,772,231],{"class":230},[213,774,235],{"class":234},[213,776,777,779,781],{"class":215,"line":238},[213,778,242],{"class":241},[213,780,201],{"class":234},[213,782,247],{"class":234},[213,784,785,788,790],{"class":215,"line":250},[213,786,787],{"class":241},"    presets",[213,789,201],{"class":234},[213,791,247],{"class":234},[213,793,794,797,799],{"class":215,"line":257},[213,795,796],{"class":241},"      avatar",[213,798,201],{"class":234},[213,800,247],{"class":234},[213,802,803,806,808],{"class":215,"line":263},[213,804,805],{"class":241},"        modifiers",[213,807,201],{"class":234},[213,809,247],{"class":234},[213,811,812,815,817,820,822,824],{"class":215,"line":570},[213,813,814],{"class":241},"          format",[213,816,201],{"class":234},[213,818,819],{"class":234}," '",[213,821,423],{"class":482},[213,823,479],{"class":234},[213,825,567],{"class":234},[213,827,828,831,833,836],{"class":215,"line":583},[213,829,830],{"class":241},"          width",[213,832,201],{"class":234},[213,834,835],{"class":382}," 50",[213,837,567],{"class":234},[213,839,840,843,845],{"class":215,"line":596},[213,841,842],{"class":241},"          height",[213,844,201],{"class":234},[213,846,847],{"class":382}," 50\n",[213,849,850],{"class":215,"line":609},[213,851,852],{"class":234},"        }\n",[213,854,855],{"class":215,"line":622},[213,856,857],{"class":234},"      }\n",[213,859,860],{"class":215,"line":635},[213,861,654],{"class":234},[213,863,864],{"class":215,"line":651},[213,865,260],{"class":234},[213,867,868,870],{"class":215,"line":657},[213,869,266],{"class":234},[213,871,269],{"class":230},[203,873,878],{"className":874,"code":875,"filename":876,"language":877,"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,879,880,891,899,917,931,936],{"__ignoreMap":209},[213,881,882,885,888],{"class":215,"line":216},[213,883,884],{"class":234},"\u003C",[213,886,887],{"class":241},"template",[213,889,890],{"class":234},">\n",[213,892,893,896],{"class":215,"line":238},[213,894,895],{"class":234},"  \u003C",[213,897,898],{"class":241},"NuxtImg\n",[213,900,901,905,908,911,914],{"class":215,"line":250},[213,902,904],{"class":903},"spNyl","    preset",[213,906,907],{"class":234},"=",[213,909,910],{"class":234},"\"",[213,912,913],{"class":482},"avatar",[213,915,916],{"class":234},"\"\n",[213,918,919,922,924,926,929],{"class":215,"line":257},[213,920,921],{"class":903},"    src",[213,923,907],{"class":234},[213,925,910],{"class":234},[213,927,928],{"class":482},"/nuxt-icon.png",[213,930,916],{"class":234},[213,932,933],{"class":215,"line":263},[213,934,935],{"class":234},"  />\n",[213,937,938,941,943],{"class":215,"line":570},[213,939,940],{"class":234},"\u003C/",[213,942,887],{"class":241},[213,944,890],{"class":234},[271,946,948],{"id":947},"providers",[194,949,947],{},[190,951,952,953,956,957,959],{},"In order to create and use a ",[341,954,955],{"href":178},"custom provider",", you need to use the ",[194,958,947],{}," option and define your custom providers.",[756,961,962,1049],{},[203,963,965],{"className":205,"code":964,"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,966,967,979,987,996,1005,1021,1031,1035,1039,1043],{"__ignoreMap":209},[213,968,969,971,973,975,977],{"class":215,"line":216},[213,970,220],{"class":219},[213,972,223],{"class":219},[213,974,227],{"class":226},[213,976,231],{"class":230},[213,978,235],{"class":234},[213,980,981,983,985],{"class":215,"line":238},[213,982,242],{"class":241},[213,984,201],{"class":234},[213,986,247],{"class":234},[213,988,989,992,994],{"class":215,"line":250},[213,990,991],{"class":241},"    providers",[213,993,201],{"class":234},[213,995,247],{"class":234},[213,997,998,1001,1003],{"class":215,"line":257},[213,999,1000],{"class":241},"      random",[213,1002,201],{"class":234},[213,1004,247],{"class":234},[213,1006,1007,1010,1012,1014,1017,1019],{"class":215,"line":263},[213,1008,1009],{"class":241},"        provider",[213,1011,201],{"class":234},[213,1013,819],{"class":234},[213,1015,1016],{"class":482},"~/providers/random",[213,1018,479],{"class":234},[213,1020,567],{"class":234},[213,1022,1023,1026,1028],{"class":215,"line":570},[213,1024,1025],{"class":241},"        options",[213,1027,201],{"class":234},[213,1029,1030],{"class":234}," {}\n",[213,1032,1033],{"class":215,"line":583},[213,1034,857],{"class":234},[213,1036,1037],{"class":215,"line":596},[213,1038,654],{"class":234},[213,1040,1041],{"class":215,"line":609},[213,1042,260],{"class":234},[213,1044,1045,1047],{"class":215,"line":622},[213,1046,266],{"class":234},[213,1048,269],{"class":230},[203,1050,1052],{"className":874,"code":1051,"filename":876,"language":877,"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,1053,1054,1062,1068,1082,1095,1109,1123,1127],{"__ignoreMap":209},[213,1055,1056,1058,1060],{"class":215,"line":216},[213,1057,884],{"class":234},[213,1059,887],{"class":241},[213,1061,890],{"class":234},[213,1063,1064,1066],{"class":215,"line":238},[213,1065,895],{"class":234},[213,1067,898],{"class":241},[213,1069,1070,1073,1075,1077,1080],{"class":215,"line":250},[213,1071,1072],{"class":903},"    provider",[213,1074,907],{"class":234},[213,1076,910],{"class":234},[213,1078,1079],{"class":482},"random",[213,1081,916],{"class":234},[213,1083,1084,1086,1088,1090,1093],{"class":215,"line":257},[213,1085,921],{"class":903},[213,1087,907],{"class":234},[213,1089,910],{"class":234},[213,1091,1092],{"class":482},"main.png",[213,1094,916],{"class":234},[213,1096,1097,1100,1102,1104,1107],{"class":215,"line":263},[213,1098,1099],{"class":903},"    width",[213,1101,907],{"class":234},[213,1103,910],{"class":234},[213,1105,1106],{"class":482},"300",[213,1108,916],{"class":234},[213,1110,1111,1114,1116,1118,1121],{"class":215,"line":570},[213,1112,1113],{"class":903},"    height",[213,1115,907],{"class":234},[213,1117,910],{"class":234},[213,1119,1120],{"class":482},"169",[213,1122,916],{"class":234},[213,1124,1125],{"class":215,"line":583},[213,1126,935],{"class":234},[213,1128,1129,1131,1133],{"class":215,"line":596},[213,1130,940],{"class":234},[213,1132,887],{"class":241},[213,1134,890],{"class":234},[271,1136,1138],{"id":1137},"provider",[194,1139,1137],{},[190,1141,401,1142,1145,1146,1149,1150,1153],{},[194,1143,1144],{},"ipx"," (or ",[194,1147,1148],{},"ipxStatic"," if used with a static nitro preset, such as if you are running ",[194,1151,1152],{},"nuxt generate",")",[190,1155,1156,1157,347],{},"We can specify default provider to be used when not specified in component or when calling ",[194,1158,281],{},[203,1160,1162],{"className":205,"code":1161,"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,1163,1164,1176,1184,1199,1208,1223,1227,1231],{"__ignoreMap":209},[213,1165,1166,1168,1170,1172,1174],{"class":215,"line":216},[213,1167,220],{"class":219},[213,1169,223],{"class":219},[213,1171,227],{"class":226},[213,1173,231],{"class":230},[213,1175,235],{"class":234},[213,1177,1178,1180,1182],{"class":215,"line":238},[213,1179,242],{"class":241},[213,1181,201],{"class":234},[213,1183,247],{"class":234},[213,1185,1186,1188,1190,1192,1195,1197],{"class":215,"line":250},[213,1187,1072],{"class":241},[213,1189,201],{"class":234},[213,1191,819],{"class":234},[213,1193,1194],{"class":482},"twicpics",[213,1196,479],{"class":234},[213,1198,567],{"class":234},[213,1200,1201,1204,1206],{"class":215,"line":257},[213,1202,1203],{"class":241},"    twicpics",[213,1205,201],{"class":234},[213,1207,247],{"class":234},[213,1209,1210,1213,1215,1217,1220],{"class":215,"line":263},[213,1211,1212],{"class":241},"      baseURL",[213,1214,201],{"class":234},[213,1216,819],{"class":234},[213,1218,1219],{"class":482},"https://nuxt-demo.twic.pics",[213,1221,1222],{"class":234},"'\n",[213,1224,1225],{"class":215,"line":570},[213,1226,654],{"class":234},[213,1228,1229],{"class":215,"line":583},[213,1230,260],{"class":234},[213,1232,1233,1235],{"class":215,"line":596},[213,1234,266],{"class":234},[213,1236,269],{"class":230},[1238,1239,1241],"h3",{"id":1240},"modifiers",[194,1242,1240],{},[190,1244,1245],{},"You can set default modifiers for the selected provider.",[203,1247,1249],{"className":205,"code":1248,"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,1250,1251,1263,1271,1286,1295,1310,1319,1335,1349,1353,1357,1361],{"__ignoreMap":209},[213,1252,1253,1255,1257,1259,1261],{"class":215,"line":216},[213,1254,220],{"class":219},[213,1256,223],{"class":219},[213,1258,227],{"class":226},[213,1260,231],{"class":230},[213,1262,235],{"class":234},[213,1264,1265,1267,1269],{"class":215,"line":238},[213,1266,242],{"class":241},[213,1268,201],{"class":234},[213,1270,247],{"class":234},[213,1272,1273,1275,1277,1279,1282,1284],{"class":215,"line":250},[213,1274,1072],{"class":241},[213,1276,201],{"class":234},[213,1278,819],{"class":234},[213,1280,1281],{"class":482},"cloudinary",[213,1283,479],{"class":234},[213,1285,567],{"class":234},[213,1287,1288,1291,1293],{"class":215,"line":257},[213,1289,1290],{"class":241},"    cloudinary",[213,1292,201],{"class":234},[213,1294,247],{"class":234},[213,1296,1297,1299,1301,1303,1306,1308],{"class":215,"line":263},[213,1298,1212],{"class":241},[213,1300,201],{"class":234},[213,1302,819],{"class":234},[213,1304,1305],{"class":482},"https://res.cloudinary.com/\u003Ccompany>/image/fetch",[213,1307,479],{"class":234},[213,1309,567],{"class":234},[213,1311,1312,1315,1317],{"class":215,"line":570},[213,1313,1314],{"class":241},"      modifiers",[213,1316,201],{"class":234},[213,1318,247],{"class":234},[213,1320,1321,1324,1326,1328,1331,1333],{"class":215,"line":583},[213,1322,1323],{"class":241},"        effect",[213,1325,201],{"class":234},[213,1327,819],{"class":234},[213,1329,1330],{"class":482},"sharpen:100",[213,1332,479],{"class":234},[213,1334,567],{"class":234},[213,1336,1337,1340,1342,1344,1347],{"class":215,"line":596},[213,1338,1339],{"class":241},"        quality",[213,1341,201],{"class":234},[213,1343,819],{"class":234},[213,1345,1346],{"class":482},"auto:best",[213,1348,1222],{"class":234},[213,1350,1351],{"class":215,"line":609},[213,1352,857],{"class":234},[213,1354,1355],{"class":215,"line":622},[213,1356,654],{"class":234},[213,1358,1359],{"class":215,"line":635},[213,1360,260],{"class":234},[213,1362,1363,1365],{"class":215,"line":651},[213,1364,266],{"class":234},[213,1366,269],{"class":230},[271,1368,1370],{"id":1369},"densities",[194,1371,1369],{},[190,1373,401,1374],{},[194,1375,1376],{},"[1, 2]",[190,1378,1379,1380,1383,1384,1386],{},"Specify a value to work with ",[194,1381,1382],{},"devicePixelRatio"," > 1 (these are devices with retina display and others). You must specify for which ",[194,1385,1382],{}," values you want to adapt images.",[190,1388,1389,1390,347],{},"You can ",[341,1391,1394,1395,1397],{"href":1392,"rel":1393},"https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio",[675],"read more about ",[194,1396,1382],{}," on MDN",[203,1399,1401],{"className":205,"code":1400,"filename":207,"language":208,"meta":209,"style":209},"export default defineNuxtConfig({\n  image: {\n    densities: [1, 2, 3]\n  }\n})\n",[194,1402,1403,1415,1423,1448,1452],{"__ignoreMap":209},[213,1404,1405,1407,1409,1411,1413],{"class":215,"line":216},[213,1406,220],{"class":219},[213,1408,223],{"class":219},[213,1410,227],{"class":226},[213,1412,231],{"class":230},[213,1414,235],{"class":234},[213,1416,1417,1419,1421],{"class":215,"line":238},[213,1418,242],{"class":241},[213,1420,201],{"class":234},[213,1422,247],{"class":234},[213,1424,1425,1428,1430,1432,1435,1438,1441,1443,1446],{"class":215,"line":250},[213,1426,1427],{"class":241},"    densities",[213,1429,201],{"class":234},[213,1431,476],{"class":230},[213,1433,1434],{"class":382},"1",[213,1436,1437],{"class":234},",",[213,1439,1440],{"class":382}," 2",[213,1442,1437],{"class":234},[213,1444,1445],{"class":382}," 3",[213,1447,487],{"class":230},[213,1449,1450],{"class":215,"line":257},[213,1451,260],{"class":234},[213,1453,1454,1456],{"class":215,"line":263},[213,1455,266],{"class":234},[213,1457,269],{"class":230},[271,1459,1461],{"id":1460},"dir",[194,1462,1460],{},[190,1464,401,1465],{},[194,1466,1467],{},"public",[190,1469,1470,1471,1473,1474,1476],{},"This option allows you to specify the location of the source images when using the ",[194,1472,1144],{}," or ",[194,1475,1148],{}," provider.",[190,1478,1479,1480,1483,1484,1486,1487,1490],{},"For example you might want the source images in ",[194,1481,1482],{},"assets/images"," directory rather than the default ",[194,1485,1467],{}," directory so the source images don't get copied into ",[194,1488,1489],{},"dist"," and deployed:",[203,1492,1494],{"className":205,"code":1493,"filename":207,"language":208,"meta":209,"style":209},"export default defineNuxtConfig({\n  image: {\n    dir: 'assets/images'\n  }\n})\n",[194,1495,1496,1508,1516,1529,1533],{"__ignoreMap":209},[213,1497,1498,1500,1502,1504,1506],{"class":215,"line":216},[213,1499,220],{"class":219},[213,1501,223],{"class":219},[213,1503,227],{"class":226},[213,1505,231],{"class":230},[213,1507,235],{"class":234},[213,1509,1510,1512,1514],{"class":215,"line":238},[213,1511,242],{"class":241},[213,1513,201],{"class":234},[213,1515,247],{"class":234},[213,1517,1518,1521,1523,1525,1527],{"class":215,"line":250},[213,1519,1520],{"class":241},"    dir",[213,1522,201],{"class":234},[213,1524,819],{"class":234},[213,1526,1482],{"class":482},[213,1528,1222],{"class":234},[213,1530,1531],{"class":215,"line":257},[213,1532,260],{"class":234},[213,1534,1535,1537],{"class":215,"line":263},[213,1536,266],{"class":234},[213,1538,269],{"class":230},[190,1540,1541],{},[1542,1543,1544],"strong",{},"Notes:",[1546,1547,1548,1561,1569],"ul",{},[1549,1550,1551,1552,1554,1555,1557,1558,1560],"li",{},"For ",[194,1553,1148],{}," provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing ",[194,1556,1460],{}," from ",[194,1559,1467],{}," causes 404 errors.",[1549,1562,1551,1563,1565,1566,1568],{},[194,1564,1144],{}," provider, make sure to deploy customized ",[194,1567,1460],{}," as well.",[1549,1570,1571,1572,1575,1576,1578],{},"For some providers (like vercel), using a directory other than ",[194,1573,1574],{},"public/"," for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the ",[194,1577,1574],{}," directory (deployment URL)",[271,1580,1582],{"id":1581},"alias",[194,1583,1581],{},[190,1585,1586,1587,347],{},"This option allows you to specify aliases for ",[194,1588,1589],{},"src",[190,1591,1592],{},"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,1594,1595],{},"When using other providers, aliases are resolved in runtime and included in HTML. (only the usage is simplified)",[190,1597,1598],{},[1542,1599,1600],{},"Example:",[203,1602,1604],{"className":205,"code":1603,"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,1605,1606,1618,1626,1635,1644,1651,1660,1674,1678,1682],{"__ignoreMap":209},[213,1607,1608,1610,1612,1614,1616],{"class":215,"line":216},[213,1609,220],{"class":219},[213,1611,223],{"class":219},[213,1613,227],{"class":226},[213,1615,231],{"class":230},[213,1617,235],{"class":234},[213,1619,1620,1622,1624],{"class":215,"line":238},[213,1621,242],{"class":241},[213,1623,201],{"class":234},[213,1625,247],{"class":234},[213,1627,1628,1630,1632],{"class":215,"line":250},[213,1629,723],{"class":241},[213,1631,201],{"class":234},[213,1633,1634],{"class":230}," [\n",[213,1636,1637,1639,1642],{"class":215,"line":257},[213,1638,638],{"class":234},[213,1640,1641],{"class":482},"images.unsplash.com",[213,1643,1222],{"class":234},[213,1645,1646,1649],{"class":215,"line":263},[213,1647,1648],{"class":230},"    ]",[213,1650,567],{"class":234},[213,1652,1653,1656,1658],{"class":215,"line":570},[213,1654,1655],{"class":241},"    alias",[213,1657,201],{"class":234},[213,1659,247],{"class":234},[213,1661,1662,1665,1667,1669,1672],{"class":215,"line":583},[213,1663,1664],{"class":241},"      unsplash",[213,1666,201],{"class":234},[213,1668,819],{"class":234},[213,1670,1671],{"class":482},"https://images.unsplash.com",[213,1673,1222],{"class":234},[213,1675,1676],{"class":215,"line":596},[213,1677,654],{"class":234},[213,1679,1680],{"class":215,"line":609},[213,1681,260],{"class":234},[213,1683,1684,1686],{"class":215,"line":622},[213,1685,266],{"class":234},[213,1687,269],{"class":230},[190,1689,1690,1693],{},[1542,1691,1692],{},"Before"," using alias:",[203,1695,1697],{"className":874,"code":1696,"language":877,"meta":209,"style":209},"\u003CNuxtImg src=\"https://images.unsplash.com/\u003Cid>\" />\n",[194,1698,1699],{"__ignoreMap":209},[213,1700,1701,1703,1706,1709,1711,1713,1716,1718],{"class":215,"line":216},[213,1702,884],{"class":234},[213,1704,1705],{"class":241},"NuxtImg",[213,1707,1708],{"class":903}," src",[213,1710,907],{"class":234},[213,1712,910],{"class":234},[213,1714,1715],{"class":482},"https://images.unsplash.com/\u003Cid>",[213,1717,910],{"class":234},[213,1719,1720],{"class":230}," />\n",[190,1722,1723],{},"Generates:",[203,1725,1729],{"className":1726,"code":1727,"language":1728,"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,1730,1731],{"__ignoreMap":209},[213,1732,1733,1735,1738,1740,1742,1744,1747,1749],{"class":215,"line":216},[213,1734,884],{"class":234},[213,1736,1737],{"class":241},"img",[213,1739,1708],{"class":903},[213,1741,907],{"class":234},[213,1743,910],{"class":234},[213,1745,1746],{"class":482},"/_ipx/https://images.unsplash.com/\u003Cid>",[213,1748,910],{"class":234},[213,1750,890],{"class":234},[190,1752,1753,1693],{},[1542,1754,1755],{},"After",[203,1757,1759],{"className":874,"code":1758,"language":877,"meta":209,"style":209},"\u003CNuxtImg src=\"/unsplash/\u003Cid>\" />\n",[194,1760,1761],{"__ignoreMap":209},[213,1762,1763,1765,1767,1769,1771,1773,1776,1778],{"class":215,"line":216},[213,1764,884],{"class":234},[213,1766,1705],{"class":241},[213,1768,1708],{"class":903},[213,1770,907],{"class":234},[213,1772,910],{"class":234},[213,1774,1775],{"class":482},"/unsplash/\u003Cid>",[213,1777,910],{"class":234},[213,1779,1720],{"class":230},[190,1781,1723],{},[203,1783,1785],{"className":1726,"code":1784,"language":1728,"meta":209,"style":209},"\u003Cimg src=\"/_ipx/unsplash/\u003Cid>\">\n",[194,1786,1787],{"__ignoreMap":209},[213,1788,1789,1791,1793,1795,1797,1799,1802,1804],{"class":215,"line":216},[213,1790,884],{"class":234},[213,1792,1737],{"class":241},[213,1794,1708],{"class":903},[213,1796,907],{"class":234},[213,1798,910],{"class":234},[213,1800,1801],{"class":482},"/_ipx/unsplash/\u003Cid>",[213,1803,910],{"class":234},[213,1805,890],{"class":234},[190,1807,1808],{},"Both usage and output are simplified!",[1810,1811,1812],"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":1814},[1815,1816,1817,1818,1819,1820,1821,1822,1825,1826,1827],{"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":688,"depth":238,"text":688},{"id":749,"depth":238,"text":749},{"id":947,"depth":238,"text":947},{"id":1137,"depth":238,"text":1137,"children":1823},[1824],{"id":1240,"depth":250,"text":1240},{"id":1369,"depth":238,"text":1369},{"id":1460,"depth":238,"text":1460},{"id":1581,"depth":238,"text":1581},"Nuxt Image is configured with sensible defaults.","md",null,{},true,{"title":14,"description":1828},"hwQIKt1gTa7QfWg5xfoe1ZfOJ2dguTEX3wWaS0koTus",[1836,1838],{"title":10,"path":11,"stem":12,"description":1837,"children":-1},"Using image module in your Nuxt project is only one command away.",{"title":18,"path":19,"stem":20,"description":1839,"children":-1},"Nuxt Image supports multiple providers for high performances.",1757511737273]