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