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