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