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