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