[{"data":1,"prerenderedAt":1882},["ShallowReactive",2],{"navigation_docs":3,"-providers-imagekit":208,"-providers-imagekit-surround":1877},[4,30,47,195],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","\u002Fget-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F1.installation",{"title":14,"path":15,"stem":16},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F2.configuration",{"title":18,"path":19,"stem":20},"Providers","\u002Fget-started\u002Fproviders","1.get-started\u002F3.providers",{"title":22,"path":23,"stem":24},"Contributing","\u002Fget-started\u002Fcontributing","1.get-started\u002F4.contributing",{"title":26,"path":27,"stem":28},"Migration","\u002Fget-started\u002Fmigration","1.get-started\u002F5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","\u002Fusage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","\u002Fusage\u002Fnuxt-img","2.usage\u002F1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","\u002Fusage\u002Fnuxt-picture","2.usage\u002F2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","\u002Fusage\u002Fuse-image","2.usage\u002F3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"\u002Fproviders","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,187,191],{"title":52,"path":53,"stem":54},"Aliyun","\u002Fproviders\u002Faliyun","3.providers\u002Faliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","\u002Fproviders\u002Faws-amplify","3.providers\u002Faws-amplify",{"title":60,"path":61,"stem":62},"Builder.io","\u002Fproviders\u002Fbuilderio","3.providers\u002Fbuilderio",{"title":64,"path":65,"stem":66},"Bunny","\u002Fproviders\u002Fbunny","3.providers\u002Fbunny",{"title":68,"path":69,"stem":70},"Caisy","\u002Fproviders\u002Fcaisy","3.providers\u002Fcaisy",{"title":72,"path":73,"stem":74},"Cloudflare","\u002Fproviders\u002Fcloudflare","3.providers\u002Fcloudflare",{"title":76,"path":77,"stem":78},"Cloudimage","\u002Fproviders\u002Fcloudimage","3.providers\u002Fcloudimage",{"title":80,"path":81,"stem":82},"Cloudinary","\u002Fproviders\u002Fcloudinary","3.providers\u002Fcloudinary",{"title":84,"path":85,"stem":86},"Contentful","\u002Fproviders\u002Fcontentful","3.providers\u002Fcontentful",{"title":88,"path":89,"stem":90},"Directus","\u002Fproviders\u002Fdirectus","3.providers\u002Fdirectus",{"title":92,"path":93,"stem":94},"Fastly","\u002Fproviders\u002Ffastly","3.providers\u002Ffastly",{"title":96,"path":97,"stem":98},"Filerobot","\u002Fproviders\u002Ffilerobot","3.providers\u002Ffilerobot",{"title":100,"path":101,"stem":102},"GitHub","\u002Fproviders\u002Fgithub","3.providers\u002Fgithub",{"title":104,"path":105,"stem":106},"Glide","\u002Fproviders\u002Fglide","3.providers\u002Fglide",{"title":108,"path":109,"stem":110},"Gumlet","\u002Fproviders\u002Fgumlet","3.providers\u002Fgumlet",{"title":112,"path":113,"stem":114},"Hygraph","\u002Fproviders\u002Fhygraph","3.providers\u002Fhygraph",{"title":116,"path":117,"stem":118},"ImageEngine","\u002Fproviders\u002Fimageengine","3.providers\u002Fimageengine",{"title":120,"path":121,"stem":122},"ImageKit","\u002Fproviders\u002Fimagekit","3.providers\u002Fimagekit",{"title":124,"path":125,"stem":126},"Imgix","\u002Fproviders\u002Fimgix","3.providers\u002Fimgix",{"title":128,"path":129,"stem":130},"IPX","\u002Fproviders\u002Fipx","3.providers\u002Fipx",{"title":132,"path":133,"stem":134},"Netlify","\u002Fproviders\u002Fnetlify","3.providers\u002Fnetlify",{"title":136,"path":137,"stem":138},"None","\u002Fproviders\u002Fnone","3.providers\u002Fnone",{"title":140,"path":141,"stem":142},"Picsum","\u002Fproviders\u002Fpicsum","3.providers\u002Fpicsum",{"title":144,"path":145,"stem":146},"Prepr","\u002Fproviders\u002Fprepr","3.providers\u002Fprepr",{"title":148,"path":149,"stem":150},"Prismic","\u002Fproviders\u002Fprismic","3.providers\u002Fprismic",{"title":152,"path":153,"stem":154},"Sanity","\u002Fproviders\u002Fsanity","3.providers\u002Fsanity",{"title":156,"path":157,"stem":158},"Shopify","\u002Fproviders\u002Fshopify","3.providers\u002Fshopify",{"title":160,"path":161,"stem":162},"Sirv","\u002Fproviders\u002Fsirv","3.providers\u002Fsirv",{"title":164,"path":165,"stem":166},"Storyblok","\u002Fproviders\u002Fstoryblok","3.providers\u002Fstoryblok",{"title":168,"path":169,"stem":170},"Strapi","\u002Fproviders\u002Fstrapi","3.providers\u002Fstrapi",{"title":172,"path":173,"stem":174},"Supabase","\u002Fproviders\u002Fsupabase","3.providers\u002Fsupabase",{"title":176,"path":177,"stem":178},"Twicpics","\u002Fproviders\u002Ftwicpics","3.providers\u002Ftwicpics",{"title":180,"path":181,"stem":182},"Unsplash","\u002Fproviders\u002Funsplash","3.providers\u002Funsplash",{"title":184,"path":185,"stem":186},"Uploadcare","\u002Fproviders\u002Fuploadcare","3.providers\u002Fuploadcare",{"title":188,"path":189,"stem":190},"Vercel","\u002Fproviders\u002Fvercel","3.providers\u002Fvercel",{"title":192,"path":193,"stem":194},"Weserv","\u002Fproviders\u002Fweserv","3.providers\u002Fweserv",{"title":196,"path":197,"stem":198,"children":199,"page":29},"Advanced","\u002Fadvanced","4.advanced",[200,204],{"title":201,"path":202,"stem":203},"Custom Provider","\u002Fadvanced\u002Fcustom-provider","4.advanced\u002F1.custom-provider",{"title":205,"path":206,"stem":207},"Static Images","\u002Fadvanced\u002Fstatic-images","4.advanced\u002F2.static-images",{"id":209,"title":120,"body":210,"description":1867,"extension":1768,"links":1868,"meta":1874,"navigation":1199,"path":121,"seo":1875,"stem":122,"__hash__":1876},"docs\u002F3.providers\u002Fimagekit.md",{"type":211,"value":212,"toc":1844},"minimark",[213,224,227,324,341,350,359,385,394,398,410,416,456,468,479,487,492,505,586,592,598,676,681,690,700,705,711,792,797,821,884,889,898,961,966,971,1077,1087,1091,1113,1117,1120,1268,1272,1275,1401,1408,1412,1418,1423,1497,1503,1508,1582,1586,1589,1829,1840],[214,215,216,217,223],"p",{},"Integration between ",[218,219,120],"a",{"href":220,"rel":221},"https:\u002F\u002Fdocs.imagekit.io",[222],"nofollow"," and the image module.",[214,225,226],{},"To use the ImageKit provider, you need to set your ImageKit account URL-endpoint as the base URL like below.",[228,229,235],"pre",{"className":230,"code":231,"filename":232,"language":233,"meta":234,"style":234},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    imagekit: {\n      baseURL: 'https:\u002F\u002Fik.imagekit.io\u002Fyour_imagekit_id'\n    }\n  }\n})\n","nuxt.config.ts","ts","",[236,237,238,262,275,285,303,309,315],"code",{"__ignoreMap":234},[239,240,243,247,250,254,258],"span",{"class":241,"line":242},"line",1,[239,244,246],{"class":245},"s7zQu","export",[239,248,249],{"class":245}," default",[239,251,253],{"class":252},"s2Zo4"," defineNuxtConfig",[239,255,257],{"class":256},"sTEyZ","(",[239,259,261],{"class":260},"sMK4o","{\n",[239,263,265,269,272],{"class":241,"line":264},2,[239,266,268],{"class":267},"swJcz","  image",[239,270,271],{"class":260},":",[239,273,274],{"class":260}," {\n",[239,276,278,281,283],{"class":241,"line":277},3,[239,279,280],{"class":267},"    imagekit",[239,282,271],{"class":260},[239,284,274],{"class":260},[239,286,288,291,293,296,300],{"class":241,"line":287},4,[239,289,290],{"class":267},"      baseURL",[239,292,271],{"class":260},[239,294,295],{"class":260}," '",[239,297,299],{"class":298},"sfazB","https:\u002F\u002Fik.imagekit.io\u002Fyour_imagekit_id",[239,301,302],{"class":260},"'\n",[239,304,306],{"class":241,"line":305},5,[239,307,308],{"class":260},"    }\n",[239,310,312],{"class":241,"line":311},6,[239,313,314],{"class":260},"  }\n",[239,316,318,321],{"class":241,"line":317},7,[239,319,320],{"class":260},"}",[239,322,323],{"class":256},")\n",[325,326,327],"blockquote",{},[214,328,329,330,335,336,340],{},"You can get ",[218,331,334],{"href":332,"rel":333},"https:\u002F\u002Fdocs.imagekit.io\u002Fintegration\u002Furl-endpoints#default-url-endpoint",[222],"URL-endpoint"," from your ImageKit dashboard - ",[218,337,338],{"href":338,"rel":339},"https:\u002F\u002Fimagekit.io\u002Fdashboard#url-endpoints",[222],".",[342,343,345,346,349],"h2",{"id":344},"imagekit-fit-parameters","ImageKit ",[236,347,348],{},"fit"," Parameters",[214,351,352,353,358],{},"In addition to the standard ",[218,354,356],{"href":355},"\u002Fusage\u002Fnuxt-img#fit",[236,357,348],{}," properties of Nuxt Image and Nuxt Picture, ImageKit offers more cropping and resizing options to the users:",[360,361,362,373],"ul",{},[363,364,365,368,369,372],"li",{},[236,366,367],{},"extract"," - The output image has its height, width as requested, and the aspect ratio is preserved. Unlike the ",[236,370,371],{},"cover"," parameter, we extract out a region of the requested dimension from the original image.",[363,374,375,378,379,381,382,384],{},[236,376,377],{},"pad_extract"," - This parameter is similar to ",[236,380,367],{},". This comes in handy in scenarios where we want to extract an image of a larger dimension from a smaller image. So, the ",[236,383,377],{}," mode adds solid colored padding around the image to match the exact size requested.",[214,386,387,388,393],{},"Read ImageKit ",[218,389,392],{"href":390,"rel":391},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations#crop-crop-modes-and-focus",[222],"crop and crop mode documentation"," for more details and examples of how it works.",[342,395,397],{"id":396},"imagekit-modifiers","ImageKit Modifiers",[214,399,400,401,405,406,409],{},"On top of the standard ",[218,402,404],{"href":403},"\u002Fusage\u002Fnuxt-img#modifiers","Nuxt Image modifiers",", a user can also leverage ImageKit-specific transformation parameters provided in the ",[236,407,408],{},"modifier"," prop.",[411,412,414],"h3",{"id":413},"focus",[236,415,413],{},[214,417,418,419,422,423,422,426,422,429,422,432,422,435,422,437,422,439,422,441,422,443,422,446,422,449,452,453,340],{},"This parameter can be used along with resizing and cropping to focus on the desired part of the image. You can use focus parameter values like ",[236,420,421],{},"left",", ",[236,424,425],{},"right",[236,427,428],{},"top",[236,430,431],{},"bottom",[236,433,434],{},"center",[236,436,428],{},[236,438,421],{},[236,440,431],{},[236,442,425],{},[236,444,445],{},"top_left",[236,447,448],{},"top_right",[236,450,451],{},"bottom_left"," and ",[236,454,455],{},"bottom_right",[214,457,458,459,462,463,340],{},"Custom coordinates can also be used to focus using parameter value ",[236,460,461],{},"custom",". Learn more from ",[218,464,467],{"href":465,"rel":466},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations#example-focus-using-custom-coordinates",[222],"example",[214,469,470,471,474,475,478],{},"Moreover, ImageKit also provides smart cropping that can automatically detect the most important part of the image using ",[236,472,473],{},"auto",". And, ",[236,476,477],{},"face"," can be used to find a face (or multiple faces) in an image and focus on that.",[214,480,481,482,486],{},"Check out ImageKit's documentation on ",[218,483,413],{"href":484,"rel":485},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations#focus-fo",[222]," to learn more.",[411,488,490],{"id":489},"blur",[236,491,489],{},[214,493,494,495,497,498,501,502,340],{},"This can be used to blur an image. Use modifier ",[236,496,489],{}," to specify the Gaussian Blur radius that is to be applied to the image. Possible values include integers between ",[236,499,500],{},"1"," to ",[236,503,504],{},"100",[228,506,510],{"className":507,"code":508,"language":509,"meta":234,"style":234},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  :modifiers=\"{ blur: 10 }\"\n\u002F>\n","vue",[236,511,512,520,538,552,581],{"__ignoreMap":234},[239,513,514,517],{"class":241,"line":242},[239,515,516],{"class":260},"\u003C",[239,518,519],{"class":267},"NuxtImg\n",[239,521,522,526,529,532,535],{"class":241,"line":264},[239,523,525],{"class":524},"spNyl","  provider",[239,527,528],{"class":260},"=",[239,530,531],{"class":260},"\"",[239,533,534],{"class":298},"imagekit",[239,536,537],{"class":260},"\"\n",[239,539,540,543,545,547,550],{"class":241,"line":277},[239,541,542],{"class":524},"  src",[239,544,528],{"class":260},[239,546,531],{"class":260},[239,548,549],{"class":298},"\u002Fdefault-image.jpg",[239,551,537],{"class":260},[239,553,554,557,560,562,564,567,570,572,576,579],{"class":241,"line":287},[239,555,556],{"class":260},"  :",[239,558,559],{"class":524},"modifiers",[239,561,528],{"class":260},[239,563,531],{"class":260},[239,565,566],{"class":260},"{",[239,568,569],{"class":267}," blur",[239,571,271],{"class":260},[239,573,575],{"class":574},"sbssI"," 10",[239,577,578],{"class":260}," }",[239,580,537],{"class":260},[239,582,583],{"class":241,"line":305},[239,584,585],{"class":256},"\u002F>\n",[411,587,589],{"id":588},"effectgray",[236,590,591],{},"effectGray",[214,593,594,595,597],{},"Turn your image to a grayscale version using the ",[236,596,591],{}," modifier.",[228,599,601],{"className":507,"code":600,"language":509,"meta":234,"style":234},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"300\"\n  :modifiers=\"{ effectGray: true }\"\n\u002F>\n",[236,602,603,609,621,633,647,672],{"__ignoreMap":234},[239,604,605,607],{"class":241,"line":242},[239,606,516],{"class":260},[239,608,519],{"class":267},[239,610,611,613,615,617,619],{"class":241,"line":264},[239,612,525],{"class":524},[239,614,528],{"class":260},[239,616,531],{"class":260},[239,618,534],{"class":298},[239,620,537],{"class":260},[239,622,623,625,627,629,631],{"class":241,"line":277},[239,624,542],{"class":524},[239,626,528],{"class":260},[239,628,531],{"class":260},[239,630,549],{"class":298},[239,632,537],{"class":260},[239,634,635,638,640,642,645],{"class":241,"line":287},[239,636,637],{"class":524},"  height",[239,639,528],{"class":260},[239,641,531],{"class":260},[239,643,644],{"class":298},"300",[239,646,537],{"class":260},[239,648,649,651,653,655,657,659,662,664,668,670],{"class":241,"line":305},[239,650,556],{"class":260},[239,652,559],{"class":524},[239,654,528],{"class":260},[239,656,531],{"class":260},[239,658,566],{"class":260},[239,660,661],{"class":267}," effectGray",[239,663,271],{"class":260},[239,665,667],{"class":666},"sfNiH"," true",[239,669,578],{"class":260},[239,671,537],{"class":260},[239,673,674],{"class":241,"line":311},[239,675,585],{"class":256},[411,677,679],{"id":678},"named",[236,680,678],{},[214,682,683,684,689],{},"Use ",[218,685,688],{"href":686,"rel":687},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fnamed-transformations",[222],"named transformations"," as an alias for an entire transformation string.",[214,691,692,693,696,697,340],{},"For example, we can create a named transformation - ",[236,694,695],{},"media_library_thumbnail"," for a transformation string - ",[236,698,699],{},"tr:w-100,h-100,c-at_max,fo-auto",[411,701,703],{"id":702},"border",[236,704,702],{},[214,706,707,708,710],{},"Add a border to your images using the ",[236,709,702],{}," modifier. You can also set its width and color.",[228,712,714],{"className":507,"code":713,"language":509,"meta":234,"style":234},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  width=\"300\"\n  :modifiers=\"{ border: '20_FF0000' }\"\n\u002F>\n",[236,715,716,722,734,746,759,788],{"__ignoreMap":234},[239,717,718,720],{"class":241,"line":242},[239,719,516],{"class":260},[239,721,519],{"class":267},[239,723,724,726,728,730,732],{"class":241,"line":264},[239,725,525],{"class":524},[239,727,528],{"class":260},[239,729,531],{"class":260},[239,731,534],{"class":298},[239,733,537],{"class":260},[239,735,736,738,740,742,744],{"class":241,"line":277},[239,737,542],{"class":524},[239,739,528],{"class":260},[239,741,531],{"class":260},[239,743,549],{"class":298},[239,745,537],{"class":260},[239,747,748,751,753,755,757],{"class":241,"line":287},[239,749,750],{"class":524},"  width",[239,752,528],{"class":260},[239,754,531],{"class":260},[239,756,644],{"class":298},[239,758,537],{"class":260},[239,760,761,763,765,767,769,771,774,776,778,781,784,786],{"class":241,"line":305},[239,762,556],{"class":260},[239,764,559],{"class":524},[239,766,528],{"class":260},[239,768,531],{"class":260},[239,770,566],{"class":260},[239,772,773],{"class":267}," border",[239,775,271],{"class":260},[239,777,295],{"class":260},[239,779,780],{"class":298},"20_FF0000",[239,782,783],{"class":260},"'",[239,785,578],{"class":260},[239,787,537],{"class":260},[239,789,790],{"class":241,"line":311},[239,791,585],{"class":256},[411,793,795],{"id":794},"rotate",[236,796,794],{},[214,798,799,800,802,803,422,806,422,809,422,812,422,815,818,819,340],{},"Use the ",[236,801,794],{}," modifier to rotate your image. Possible values are - ",[236,804,805],{},"0",[236,807,808],{},"90",[236,810,811],{},"180",[236,813,814],{},"270",[236,816,817],{},"360",", and ",[236,820,473],{},[228,822,824],{"className":507,"code":823,"language":509,"meta":234,"style":234},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  :modifiers=\"{ rotate: 90 }\"\n\u002F>\n",[236,825,826,832,844,856,880],{"__ignoreMap":234},[239,827,828,830],{"class":241,"line":242},[239,829,516],{"class":260},[239,831,519],{"class":267},[239,833,834,836,838,840,842],{"class":241,"line":264},[239,835,525],{"class":524},[239,837,528],{"class":260},[239,839,531],{"class":260},[239,841,534],{"class":298},[239,843,537],{"class":260},[239,845,846,848,850,852,854],{"class":241,"line":277},[239,847,542],{"class":524},[239,849,528],{"class":260},[239,851,531],{"class":260},[239,853,549],{"class":298},[239,855,537],{"class":260},[239,857,858,860,862,864,866,868,871,873,876,878],{"class":241,"line":287},[239,859,556],{"class":260},[239,861,559],{"class":524},[239,863,528],{"class":260},[239,865,531],{"class":260},[239,867,566],{"class":260},[239,869,870],{"class":267}," rotate",[239,872,271],{"class":260},[239,874,875],{"class":574}," 90",[239,877,578],{"class":260},[239,879,537],{"class":260},[239,881,882],{"class":241,"line":305},[239,883,585],{"class":256},[411,885,887],{"id":886},"radius",[236,888,886],{},[214,890,891,892,894,895,340],{},"Give rounded corners to your image using ",[236,893,886],{},". Possible values are - positive integers and ",[236,896,897],{},"max",[228,899,901],{"className":507,"code":900,"language":509,"meta":234,"style":234},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  :modifiers=\"{ radius: 20 }\"\n\u002F>\n",[236,902,903,909,921,933,957],{"__ignoreMap":234},[239,904,905,907],{"class":241,"line":242},[239,906,516],{"class":260},[239,908,519],{"class":267},[239,910,911,913,915,917,919],{"class":241,"line":264},[239,912,525],{"class":524},[239,914,528],{"class":260},[239,916,531],{"class":260},[239,918,534],{"class":298},[239,920,537],{"class":260},[239,922,923,925,927,929,931],{"class":241,"line":277},[239,924,542],{"class":524},[239,926,528],{"class":260},[239,928,531],{"class":260},[239,930,549],{"class":298},[239,932,537],{"class":260},[239,934,935,937,939,941,943,945,948,950,953,955],{"class":241,"line":287},[239,936,556],{"class":260},[239,938,559],{"class":524},[239,940,528],{"class":260},[239,942,531],{"class":260},[239,944,566],{"class":260},[239,946,947],{"class":267}," radius",[239,949,271],{"class":260},[239,951,952],{"class":574}," 20",[239,954,578],{"class":260},[239,956,537],{"class":260},[239,958,959],{"class":241,"line":305},[239,960,585],{"class":256},[411,962,964],{"id":963},"bg",[236,965,963],{},[214,967,968,969,597],{},"Specify background color and its opacity for your image using the ",[236,970,963],{},[228,972,974],{"className":507,"code":973,"language":509,"meta":234,"style":234},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"1200\"\n  width=\"1200\"\n  fit=\"pad_extract\"\n  :modifiers=\"{ bg: '272B38' }\"\n\u002F>\n",[236,975,976,982,994,1006,1019,1031,1044,1072],{"__ignoreMap":234},[239,977,978,980],{"class":241,"line":242},[239,979,516],{"class":260},[239,981,519],{"class":267},[239,983,984,986,988,990,992],{"class":241,"line":264},[239,985,525],{"class":524},[239,987,528],{"class":260},[239,989,531],{"class":260},[239,991,534],{"class":298},[239,993,537],{"class":260},[239,995,996,998,1000,1002,1004],{"class":241,"line":277},[239,997,542],{"class":524},[239,999,528],{"class":260},[239,1001,531],{"class":260},[239,1003,549],{"class":298},[239,1005,537],{"class":260},[239,1007,1008,1010,1012,1014,1017],{"class":241,"line":287},[239,1009,637],{"class":524},[239,1011,528],{"class":260},[239,1013,531],{"class":260},[239,1015,1016],{"class":298},"1200",[239,1018,537],{"class":260},[239,1020,1021,1023,1025,1027,1029],{"class":241,"line":305},[239,1022,750],{"class":524},[239,1024,528],{"class":260},[239,1026,531],{"class":260},[239,1028,1016],{"class":298},[239,1030,537],{"class":260},[239,1032,1033,1036,1038,1040,1042],{"class":241,"line":311},[239,1034,1035],{"class":524},"  fit",[239,1037,528],{"class":260},[239,1039,531],{"class":260},[239,1041,377],{"class":298},[239,1043,537],{"class":260},[239,1045,1046,1048,1050,1052,1054,1056,1059,1061,1063,1066,1068,1070],{"class":241,"line":317},[239,1047,556],{"class":260},[239,1049,559],{"class":524},[239,1051,528],{"class":260},[239,1053,531],{"class":260},[239,1055,566],{"class":260},[239,1057,1058],{"class":267}," bg",[239,1060,271],{"class":260},[239,1062,295],{"class":260},[239,1064,1065],{"class":298},"272B38",[239,1067,783],{"class":260},[239,1069,578],{"class":260},[239,1071,537],{"class":260},[239,1073,1075],{"class":241,"line":1074},8,[239,1076,585],{"class":256},[325,1078,1079],{},[214,1080,1081,1082,340],{},"Read more about ImageKit crop, resize, and other common transformations ",[218,1083,1086],{"href":1084,"rel":1085},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations",[222],"here",[342,1088,1090],{"id":1089},"overlay-transformation-modifiers","Overlay Transformation Modifiers",[214,1092,1093,1094,1099,1100,1103,1104,1109,1110,1112],{},"ImageKit's Nuxt Image integration enables you to apply overlays to ",[218,1095,1098],{"href":1096,"rel":1097},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Foverlay-using-layers.md",[222],"images"," using the ",[236,1101,1102],{},"raw"," parameter with the concept of ",[218,1105,1108],{"href":1106,"rel":1107},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Foverlay-using-layers.md#layers",[222],"layers",". The ",[236,1111,1102],{}," parameter facilitates incorporating transformations directly in the URL. A layer is a special type of transformation that allows you to apply text and image overlay along with other transformation parameters.",[411,1114,1116],{"id":1115},"overlay-image","Overlay Image",[214,1118,1119],{},"Overlay an image on top of another image (base image). You can use this to create dynamic banners, watermarking, etc.",[228,1121,1123],{"className":507,"code":1122,"language":509,"meta":234,"style":234},"\u003Ctemplate>\n  \u003CNuxtImg\n    provider=\"imagekit\"\n    src=\"\u002Fdefault-image.jpg\"\n    :modifiers=\"modifiers\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst modifiers = {\n  raw: 'l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end'\n}\n\u003C\u002Fscript>\n",[236,1124,1125,1135,1142,1155,1168,1181,1186,1195,1201,1225,1238,1253,1259],{"__ignoreMap":234},[239,1126,1127,1129,1132],{"class":241,"line":242},[239,1128,516],{"class":260},[239,1130,1131],{"class":267},"template",[239,1133,1134],{"class":260},">\n",[239,1136,1137,1140],{"class":241,"line":264},[239,1138,1139],{"class":260},"  \u003C",[239,1141,519],{"class":267},[239,1143,1144,1147,1149,1151,1153],{"class":241,"line":277},[239,1145,1146],{"class":524},"    provider",[239,1148,528],{"class":260},[239,1150,531],{"class":260},[239,1152,534],{"class":298},[239,1154,537],{"class":260},[239,1156,1157,1160,1162,1164,1166],{"class":241,"line":287},[239,1158,1159],{"class":524},"    src",[239,1161,528],{"class":260},[239,1163,531],{"class":260},[239,1165,549],{"class":298},[239,1167,537],{"class":260},[239,1169,1170,1173,1175,1177,1179],{"class":241,"line":305},[239,1171,1172],{"class":524},"    :modifiers",[239,1174,528],{"class":260},[239,1176,531],{"class":260},[239,1178,559],{"class":298},[239,1180,537],{"class":260},[239,1182,1183],{"class":241,"line":311},[239,1184,1185],{"class":260},"  \u002F>\n",[239,1187,1188,1191,1193],{"class":241,"line":317},[239,1189,1190],{"class":260},"\u003C\u002F",[239,1192,1131],{"class":267},[239,1194,1134],{"class":260},[239,1196,1197],{"class":241,"line":1074},[239,1198,1200],{"emptyLinePlaceholder":1199},true,"\n",[239,1202,1204,1206,1209,1212,1215,1217,1219,1221,1223],{"class":241,"line":1203},9,[239,1205,516],{"class":260},[239,1207,1208],{"class":267},"script",[239,1210,1211],{"class":524}," setup",[239,1213,1214],{"class":524}," lang",[239,1216,528],{"class":260},[239,1218,531],{"class":260},[239,1220,233],{"class":298},[239,1222,531],{"class":260},[239,1224,1134],{"class":260},[239,1226,1228,1231,1234,1236],{"class":241,"line":1227},10,[239,1229,1230],{"class":524},"const",[239,1232,1233],{"class":256}," modifiers ",[239,1235,528],{"class":260},[239,1237,274],{"class":260},[239,1239,1241,1244,1246,1248,1251],{"class":241,"line":1240},11,[239,1242,1243],{"class":267},"  raw",[239,1245,271],{"class":260},[239,1247,295],{"class":260},[239,1249,1250],{"class":298},"l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end",[239,1252,302],{"class":260},[239,1254,1256],{"class":241,"line":1255},12,[239,1257,1258],{"class":260},"}\n",[239,1260,1262,1264,1266],{"class":241,"line":1261},13,[239,1263,1190],{"class":260},[239,1265,1208],{"class":267},[239,1267,1134],{"class":260},[411,1269,1271],{"id":1270},"overlay-text","Overlay Text",[214,1273,1274],{},"You can overlay text on an image and apply various transformations to it as per your needs.",[228,1276,1278],{"className":507,"code":1277,"language":509,"meta":234,"style":234},"\u003Ctemplate>\n  \u003CNuxtImg\n    provider=\"imagekit\"\n    src=\"\u002Fdefault-image.jpg\"\n    :modifiers=\"modifiers\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst modifiers = {\n  raw: 'l-text,i-overlay made easy,fs-45,co-000000,bg-FFFFFF80,r-30,pa-40,l-end'\n}\n\u003C\u002Fscript>\n",[236,1279,1280,1288,1294,1306,1318,1330,1334,1342,1346,1366,1376,1389,1393],{"__ignoreMap":234},[239,1281,1282,1284,1286],{"class":241,"line":242},[239,1283,516],{"class":260},[239,1285,1131],{"class":267},[239,1287,1134],{"class":260},[239,1289,1290,1292],{"class":241,"line":264},[239,1291,1139],{"class":260},[239,1293,519],{"class":267},[239,1295,1296,1298,1300,1302,1304],{"class":241,"line":277},[239,1297,1146],{"class":524},[239,1299,528],{"class":260},[239,1301,531],{"class":260},[239,1303,534],{"class":298},[239,1305,537],{"class":260},[239,1307,1308,1310,1312,1314,1316],{"class":241,"line":287},[239,1309,1159],{"class":524},[239,1311,528],{"class":260},[239,1313,531],{"class":260},[239,1315,549],{"class":298},[239,1317,537],{"class":260},[239,1319,1320,1322,1324,1326,1328],{"class":241,"line":305},[239,1321,1172],{"class":524},[239,1323,528],{"class":260},[239,1325,531],{"class":260},[239,1327,559],{"class":298},[239,1329,537],{"class":260},[239,1331,1332],{"class":241,"line":311},[239,1333,1185],{"class":260},[239,1335,1336,1338,1340],{"class":241,"line":317},[239,1337,1190],{"class":260},[239,1339,1131],{"class":267},[239,1341,1134],{"class":260},[239,1343,1344],{"class":241,"line":1074},[239,1345,1200],{"emptyLinePlaceholder":1199},[239,1347,1348,1350,1352,1354,1356,1358,1360,1362,1364],{"class":241,"line":1203},[239,1349,516],{"class":260},[239,1351,1208],{"class":267},[239,1353,1211],{"class":524},[239,1355,1214],{"class":524},[239,1357,528],{"class":260},[239,1359,531],{"class":260},[239,1361,233],{"class":298},[239,1363,531],{"class":260},[239,1365,1134],{"class":260},[239,1367,1368,1370,1372,1374],{"class":241,"line":1227},[239,1369,1230],{"class":524},[239,1371,1233],{"class":256},[239,1373,528],{"class":260},[239,1375,274],{"class":260},[239,1377,1378,1380,1382,1384,1387],{"class":241,"line":1240},[239,1379,1243],{"class":267},[239,1381,271],{"class":260},[239,1383,295],{"class":260},[239,1385,1386],{"class":298},"l-text,i-overlay made easy,fs-45,co-000000,bg-FFFFFF80,r-30,pa-40,l-end",[239,1388,302],{"class":260},[239,1390,1391],{"class":241,"line":1255},[239,1392,1258],{"class":260},[239,1394,1395,1397,1399],{"class":241,"line":1261},[239,1396,1190],{"class":260},[239,1398,1208],{"class":267},[239,1400,1134],{"class":260},[214,1402,1403,1404,340],{},"Read more about ImageKit's overlay using layers ",[218,1405,1086],{"href":1406,"rel":1407},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Foverlay-using-layers",[222],[342,1409,1411],{"id":1410},"image-enhancement-modifiers","Image Enhancement Modifiers",[411,1413,1415],{"id":1414},"effectcontrast",[236,1416,1417],{},"effectContrast",[214,1419,1420,1421,597],{},"Enhance contrast of an image using the ",[236,1422,1417],{},[228,1424,1426],{"className":507,"code":1425,"language":509,"meta":234,"style":234},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"300\"\n  :modifiers=\"{ effectContrast: true }\"\n\u002F>\n",[236,1427,1428,1434,1446,1458,1470,1493],{"__ignoreMap":234},[239,1429,1430,1432],{"class":241,"line":242},[239,1431,516],{"class":260},[239,1433,519],{"class":267},[239,1435,1436,1438,1440,1442,1444],{"class":241,"line":264},[239,1437,525],{"class":524},[239,1439,528],{"class":260},[239,1441,531],{"class":260},[239,1443,534],{"class":298},[239,1445,537],{"class":260},[239,1447,1448,1450,1452,1454,1456],{"class":241,"line":277},[239,1449,542],{"class":524},[239,1451,528],{"class":260},[239,1453,531],{"class":260},[239,1455,549],{"class":298},[239,1457,537],{"class":260},[239,1459,1460,1462,1464,1466,1468],{"class":241,"line":287},[239,1461,637],{"class":524},[239,1463,528],{"class":260},[239,1465,531],{"class":260},[239,1467,644],{"class":298},[239,1469,537],{"class":260},[239,1471,1472,1474,1476,1478,1480,1482,1485,1487,1489,1491],{"class":241,"line":305},[239,1473,556],{"class":260},[239,1475,559],{"class":524},[239,1477,528],{"class":260},[239,1479,531],{"class":260},[239,1481,566],{"class":260},[239,1483,1484],{"class":267}," effectContrast",[239,1486,271],{"class":260},[239,1488,667],{"class":666},[239,1490,578],{"class":260},[239,1492,537],{"class":260},[239,1494,1495],{"class":241,"line":311},[239,1496,585],{"class":256},[411,1498,1500],{"id":1499},"effectsharpen",[236,1501,1502],{},"effectSharpen",[214,1504,1505,1506,597],{},"Sharpen the input image using the ",[236,1507,1502],{},[228,1509,1511],{"className":507,"code":1510,"language":509,"meta":234,"style":234},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"300\"\n  :modifiers=\"{ effectSharpen: 10 }\"\n\u002F>\n",[236,1512,1513,1519,1531,1543,1555,1578],{"__ignoreMap":234},[239,1514,1515,1517],{"class":241,"line":242},[239,1516,516],{"class":260},[239,1518,519],{"class":267},[239,1520,1521,1523,1525,1527,1529],{"class":241,"line":264},[239,1522,525],{"class":524},[239,1524,528],{"class":260},[239,1526,531],{"class":260},[239,1528,534],{"class":298},[239,1530,537],{"class":260},[239,1532,1533,1535,1537,1539,1541],{"class":241,"line":277},[239,1534,542],{"class":524},[239,1536,528],{"class":260},[239,1538,531],{"class":260},[239,1540,549],{"class":298},[239,1542,537],{"class":260},[239,1544,1545,1547,1549,1551,1553],{"class":241,"line":287},[239,1546,637],{"class":524},[239,1548,528],{"class":260},[239,1550,531],{"class":260},[239,1552,644],{"class":298},[239,1554,537],{"class":260},[239,1556,1557,1559,1561,1563,1565,1567,1570,1572,1574,1576],{"class":241,"line":305},[239,1558,556],{"class":260},[239,1560,559],{"class":524},[239,1562,528],{"class":260},[239,1564,531],{"class":260},[239,1566,566],{"class":260},[239,1568,1569],{"class":267}," effectSharpen",[239,1571,271],{"class":260},[239,1573,575],{"class":574},[239,1575,578],{"class":260},[239,1577,537],{"class":260},[239,1579,1580],{"class":241,"line":311},[239,1581,585],{"class":256},[342,1583,1585],{"id":1584},"list-of-supported-transforms","List of supported transforms",[214,1587,1588],{},"ImageKit's Nuxt Image integration provides an easy-to-remember name for each transformation parameter. It makes your code more readable. If you use a property that does not match any of the following supported options, it will be added in the URL as it is.",[1590,1591,1592,1605],"table",{},[1593,1594,1595],"thead",{},[1596,1597,1598,1602],"tr",{},[1599,1600,1601],"th",{},"Supported Parameter Name",[1599,1603,1604],{},"Translates to Parameter",[1606,1607,1608,1615,1623,1630,1637,1644,1651,1658,1665,1672,1679,1687,1695,1702,1709,1716,1723,1730,1737,1745,1753,1761,1769,1777,1785,1792,1799,1807,1814,1821],"tbody",{},[1596,1609,1610,1613],{},[1611,1612,963],"td",{},[1611,1614,963],{},[1596,1616,1617,1620],{},[1611,1618,1619],{},"aspectRatio",[1611,1621,1622],{},"ar",[1596,1624,1625,1628],{},[1611,1626,1627],{},"x",[1611,1629,1627],{},[1596,1631,1632,1635],{},[1611,1633,1634],{},"y",[1611,1636,1634],{},[1596,1638,1639,1642],{},[1611,1640,1641],{},"xc",[1611,1643,1641],{},[1596,1645,1646,1649],{},[1611,1647,1648],{},"yc",[1611,1650,1648],{},[1596,1652,1653,1656],{},[1611,1654,1655],{},"oix",[1611,1657,1655],{},[1596,1659,1660,1663],{},[1611,1661,1662],{},"oiy",[1611,1664,1662],{},[1596,1666,1667,1670],{},[1611,1668,1669],{},"oixc",[1611,1671,1669],{},[1596,1673,1674,1677],{},[1611,1675,1676],{},"oiyc",[1611,1678,1676],{},[1596,1680,1681,1684],{},[1611,1682,1683],{},"crop",[1611,1685,1686],{},"c",[1596,1688,1689,1692],{},[1611,1690,1691],{},"cropMode",[1611,1693,1694],{},"cm",[1596,1696,1697,1699],{},[1611,1698,413],{},[1611,1700,1701],{},"fo",[1596,1703,1704,1706],{},[1611,1705,886],{},[1611,1707,1708],{},"r",[1596,1710,1711,1713],{},[1611,1712,702],{},[1611,1714,1715],{},"b",[1596,1717,1718,1720],{},[1611,1719,794],{},[1611,1721,1722],{},"rt",[1596,1724,1725,1727],{},[1611,1726,489],{},[1611,1728,1729],{},"bl",[1596,1731,1732,1734],{},[1611,1733,678],{},[1611,1735,1736],{},"n",[1596,1738,1739,1742],{},[1611,1740,1741],{},"progressive",[1611,1743,1744],{},"pr",[1596,1746,1747,1750],{},[1611,1748,1749],{},"lossless",[1611,1751,1752],{},"lo",[1596,1754,1755,1758],{},[1611,1756,1757],{},"trim",[1611,1759,1760],{},"t",[1596,1762,1763,1766],{},[1611,1764,1765],{},"metadata",[1611,1767,1768],{},"md",[1596,1770,1771,1774],{},[1611,1772,1773],{},"colorProfile",[1611,1775,1776],{},"cp",[1596,1778,1779,1782],{},[1611,1780,1781],{},"defaultImage",[1611,1783,1784],{},"di",[1596,1786,1787,1790],{},[1611,1788,1789],{},"dpr",[1611,1791,1789],{},[1596,1793,1794,1796],{},[1611,1795,1502],{},[1611,1797,1798],{},"e-sharpen",[1596,1800,1801,1804],{},[1611,1802,1803],{},"effectUSM",[1611,1805,1806],{},"e-usm",[1596,1808,1809,1811],{},[1611,1810,1417],{},[1611,1812,1813],{},"e-contrast",[1596,1815,1816,1818],{},[1611,1817,591],{},[1611,1819,1820],{},"e-grayscale",[1596,1822,1823,1826],{},[1611,1824,1825],{},"original",[1611,1827,1828],{},"orig",[325,1830,1831],{},[214,1832,1833,1834,1839],{},"Learn more about ",[218,1835,1838],{"href":1836,"rel":1837},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations",[222],"ImageKit's Image transformations"," from the official documentation.",[1841,1842,1843],"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":234,"searchDepth":264,"depth":264,"links":1845},[1846,1848,1858,1862,1866],{"id":344,"depth":264,"text":1847},"ImageKit fit Parameters",{"id":396,"depth":264,"text":397,"children":1849},[1850,1851,1852,1853,1854,1855,1856,1857],{"id":413,"depth":277,"text":413},{"id":489,"depth":277,"text":489},{"id":588,"depth":277,"text":591},{"id":678,"depth":277,"text":678},{"id":702,"depth":277,"text":702},{"id":794,"depth":277,"text":794},{"id":886,"depth":277,"text":886},{"id":963,"depth":277,"text":963},{"id":1089,"depth":264,"text":1090,"children":1859},[1860,1861],{"id":1115,"depth":277,"text":1116},{"id":1270,"depth":277,"text":1271},{"id":1410,"depth":264,"text":1411,"children":1863},[1864,1865],{"id":1414,"depth":277,"text":1417},{"id":1499,"depth":277,"text":1502},{"id":1584,"depth":264,"text":1585},"Nuxt Image has first class integration with ImageKit.",[1869],{"label":1870,"icon":1871,"to":1872,"size":1873},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fproviders\u002Fimagekit.ts","xs",{},{"title":120,"description":1867},"bmKyZi4HALWBIzsgSrW9KHZXRvotpN0FX-BxSFB7tLg",[1878,1880],{"title":116,"path":117,"stem":118,"description":1879,"children":-1},"Nuxt Image has first class integration with ImageEngine.",{"title":124,"path":125,"stem":126,"description":1881,"children":-1},"Nuxt Image has first class integration with Imgix.",1774955428299]