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