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