[{"data":1,"prerenderedAt":1324},["ShallowReactive",2],{"navigation_docs":3,"-get-started-migration":220,"-get-started-migration-surround":1319},[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":222,"body":223,"description":1312,"extension":1313,"links":1314,"meta":1315,"navigation":1316,"path":27,"seo":1317,"stem":28,"__hash__":1318},"docs\u002F1.get-started\u002F5.migration.md","Migration to v2",{"type":224,"value":225,"toc":1303},"minimark",[226,230,233,238,246,333,337,345,360,363,385,397,401,412,415,471,489,532,535,626,630,637,642,710,715,808,813,816,1002,1009,1013,1028,1299],[227,228,229],"p",{},"Nuxt Image v2 brings improved performance, enhanced TypeScript support, and a better developer experience.",[227,231,232],{},"Most apps should be able to upgrade with minimal changes.",[234,235,237],"h2",{"id":236},"update-dependencies","Update dependencies",[227,239,240,241,245],{},"Update ",[242,243,244],"code",{},"@nuxt\u002Fimage"," to v2:",[247,248,250,275,289,304,318],"code-group",{"sync":249},"pm",[251,252,258],"pre",{"className":253,"code":254,"filename":255,"language":256,"meta":257,"style":257},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @nuxt\u002Fimage\n","pnpm","bash","",[242,259,260],{"__ignoreMap":257},[261,262,265,268,272],"span",{"class":263,"line":264},"line",1,[261,266,255],{"class":267},"sBMFI",[261,269,271],{"class":270},"sfazB"," add",[261,273,274],{"class":270}," @nuxt\u002Fimage\n",[251,276,279],{"className":253,"code":277,"filename":278,"language":256,"meta":257,"style":257},"yarn add @nuxt\u002Fimage\n","yarn",[242,280,281],{"__ignoreMap":257},[261,282,283,285,287],{"class":263,"line":264},[261,284,278],{"class":267},[261,286,271],{"class":270},[261,288,274],{"class":270},[251,290,293],{"className":253,"code":291,"filename":292,"language":256,"meta":257,"style":257},"npm install @nuxt\u002Fimage\n","npm",[242,294,295],{"__ignoreMap":257},[261,296,297,299,302],{"class":263,"line":264},[261,298,292],{"class":267},[261,300,301],{"class":270}," install",[261,303,274],{"class":270},[251,305,308],{"className":253,"code":306,"filename":307,"language":256,"meta":257,"style":257},"bun add @nuxt\u002Fimage\n","bun",[242,309,310],{"__ignoreMap":257},[261,311,312,314,316],{"class":263,"line":264},[261,313,307],{"class":267},[261,315,271],{"class":270},[261,317,274],{"class":270},[251,319,322],{"className":253,"code":320,"filename":321,"language":256,"meta":257,"style":257},"deno add npm:@nuxt\u002Fimage\n","deno",[242,323,324],{"__ignoreMap":257},[261,325,326,328,330],{"class":263,"line":264},[261,327,321],{"class":267},[261,329,271],{"class":270},[261,331,332],{"class":270}," npm:@nuxt\u002Fimage\n",[234,334,336],{"id":335},"check-your-nuxt-version","Check your Nuxt version",[227,338,339,340,344],{},"Nuxt Image v2 requires at least ",[341,342,343],"strong",{},"Nuxt 3.1",". Check your current version:",[251,346,348],{"className":253,"code":347,"language":256,"meta":257,"style":257},"npm list nuxt\n",[242,349,350],{"__ignoreMap":257},[261,351,352,354,357],{"class":263,"line":264},[261,353,292],{"class":267},[261,355,356],{"class":270}," list",[261,358,359],{"class":270}," nuxt\n",[227,361,362],{},"If you're on Nuxt 3.0.x, upgrade first:",[251,364,366],{"className":253,"code":365,"language":256,"meta":257,"style":257},"npx nuxt upgrade --channel v3\n",[242,367,368],{"__ignoreMap":257},[261,369,370,373,376,379,382],{"class":263,"line":264},[261,371,372],{"class":267},"npx",[261,374,375],{"class":270}," nuxt",[261,377,378],{"class":270}," upgrade",[261,380,381],{"class":270}," --channel",[261,383,384],{"class":270}," v3\n",[386,387,388,389,396],"tip",{},"Nuxt Image v2 is fully compatible with Nuxt 4. See the ",[390,391,395],"a",{"href":392,"rel":393},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fupgrade#nuxt-4",[394],"nofollow","Nuxt 4 migration guide"," if you're ready to upgrade.",[234,398,400],{"id":399},"update-screen-sizes","Update screen sizes",[227,402,403,404,407,408,411],{},"The ",[242,405,406],{},"xs"," and ",[242,409,410],{},"xxl"," breakpoints have been removed to align with Tailwind CSS defaults.",[227,413,414],{},"Search for usage in your project:",[251,416,418],{"className":253,"code":417,"language":256,"meta":257,"style":257},"grep -r \"sizes.*xs:\" --include=\"*.vue\"\ngrep -r \"sizes.*xxl:\" --include=\"*.vue\"\n",[242,419,420,449],{"__ignoreMap":257},[261,421,422,425,428,432,435,438,441,443,446],{"class":263,"line":264},[261,423,424],{"class":267},"grep",[261,426,427],{"class":270}," -r",[261,429,431],{"class":430},"sMK4o"," \"",[261,433,434],{"class":270},"sizes.*xs:",[261,436,437],{"class":430},"\"",[261,439,440],{"class":270}," --include=",[261,442,437],{"class":430},[261,444,445],{"class":270},"*.vue",[261,447,448],{"class":430},"\"\n",[261,450,452,454,456,458,461,463,465,467,469],{"class":263,"line":451},2,[261,453,424],{"class":267},[261,455,427],{"class":270},[261,457,431],{"class":430},[261,459,460],{"class":270},"sizes.*xxl:",[261,462,437],{"class":430},[261,464,440],{"class":270},[261,466,437],{"class":430},[261,468,445],{"class":270},[261,470,448],{"class":430},[227,472,473,476,477,479,480,407,483,479,485,488],{},[341,474,475],{},"If you are using these screen sizes",", you can either replace ",[242,478,406],{}," with ",[242,481,482],{},"sm",[242,484,410],{},[242,486,487],{},"2xl",":",[251,490,494],{"className":491,"code":492,"language":493,"meta":257,"style":257},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  \u003CNuxtImg \n    src=\"\u002Fimage.jpg\" \n-   sizes=\"xs:100vw sm:50vw md:400px\"\n+   sizes=\"sm:100vw md:50vw lg:400px\"\n  \u002F>\n","diff",[242,495,496,502,507,517,526],{"__ignoreMap":257},[261,497,498],{"class":263,"line":264},[261,499,501],{"class":500},"sTEyZ","  \u003CNuxtImg \n",[261,503,504],{"class":263,"line":451},[261,505,506],{"class":500},"    src=\"\u002Fimage.jpg\" \n",[261,508,510,513],{"class":263,"line":509},3,[261,511,512],{"class":430},"-",[261,514,516],{"class":515},"swJcz","   sizes=\"xs:100vw sm:50vw md:400px\"\n",[261,518,520,523],{"class":263,"line":519},4,[261,521,522],{"class":430},"+",[261,524,525],{"class":270},"   sizes=\"sm:100vw md:50vw lg:400px\"\n",[261,527,529],{"class":263,"line":528},5,[261,530,531],{"class":500},"  \u002F>\n",[227,533,534],{},"... or you can add them back in your config:",[251,536,541],{"className":537,"code":538,"filename":539,"language":540,"meta":257,"style":257},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    screens: {\n      xs: 320,\n      xxl: 1536\n    }\n  }\n})\n","nuxt.config.ts","ts",[242,542,543,562,572,581,595,605,611,617],{"__ignoreMap":257},[261,544,545,549,552,556,559],{"class":263,"line":264},[261,546,548],{"class":547},"s7zQu","export",[261,550,551],{"class":547}," default",[261,553,555],{"class":554},"s2Zo4"," defineNuxtConfig",[261,557,558],{"class":500},"(",[261,560,561],{"class":430},"{\n",[261,563,564,567,569],{"class":263,"line":451},[261,565,566],{"class":515},"  image",[261,568,488],{"class":430},[261,570,571],{"class":430}," {\n",[261,573,574,577,579],{"class":263,"line":509},[261,575,576],{"class":515},"    screens",[261,578,488],{"class":430},[261,580,571],{"class":430},[261,582,583,586,588,592],{"class":263,"line":519},[261,584,585],{"class":515},"      xs",[261,587,488],{"class":430},[261,589,591],{"class":590},"sbssI"," 320",[261,593,594],{"class":430},",\n",[261,596,597,600,602],{"class":263,"line":528},[261,598,599],{"class":515},"      xxl",[261,601,488],{"class":430},[261,603,604],{"class":590}," 1536\n",[261,606,608],{"class":263,"line":607},6,[261,609,610],{"class":430},"    }\n",[261,612,614],{"class":263,"line":613},7,[261,615,616],{"class":430},"  }\n",[261,618,620,623],{"class":263,"line":619},8,[261,621,622],{"class":430},"}",[261,624,625],{"class":500},")\n",[234,627,629],{"id":628},"update-custom-providers","Update custom providers",[227,631,632,633,636],{},"If you have custom image providers, update them to use ",[242,634,635],{},"defineProvider",".",[227,638,639],{},[341,640,641],{},"Before (v1):",[251,643,646],{"className":537,"code":644,"filename":645,"language":540,"meta":257,"style":257},"export const getImage = (src, { modifiers }) => {\n  \u002F\u002F ...\n  return { url }\n}\n","providers\u002Fmy-provider.ts",[242,647,648,686,692,705],{"__ignoreMap":257},[261,649,650,652,656,659,662,665,669,672,675,678,681,684],{"class":263,"line":264},[261,651,548],{"class":547},[261,653,655],{"class":654},"spNyl"," const",[261,657,658],{"class":500}," getImage ",[261,660,661],{"class":430},"=",[261,663,664],{"class":430}," (",[261,666,668],{"class":667},"sHdIc","src",[261,670,671],{"class":430},",",[261,673,674],{"class":430}," {",[261,676,677],{"class":667}," modifiers",[261,679,680],{"class":430}," })",[261,682,683],{"class":654}," =>",[261,685,571],{"class":430},[261,687,688],{"class":263,"line":451},[261,689,691],{"class":690},"sHwdD","  \u002F\u002F ...\n",[261,693,694,697,699,702],{"class":263,"line":509},[261,695,696],{"class":547},"  return",[261,698,674],{"class":430},[261,700,701],{"class":500}," url",[261,703,704],{"class":430}," }\n",[261,706,707],{"class":263,"line":519},[261,708,709],{"class":430},"}\n",[227,711,712],{},[341,713,714],{},"After (v2):",[251,716,718],{"className":537,"code":717,"filename":645,"language":540,"meta":257,"style":257},"import { defineProvider } from '@nuxt\u002Fimage\u002Fruntime'\n\nexport default defineProvider({\n  getImage(src, { modifiers }) {\n    \u002F\u002F ...\n    return { url }\n  }\n})\n",[242,719,720,745,751,763,782,787,798,802],{"__ignoreMap":257},[261,721,722,725,727,730,733,736,739,742],{"class":263,"line":264},[261,723,724],{"class":547},"import",[261,726,674],{"class":430},[261,728,729],{"class":500}," defineProvider",[261,731,732],{"class":430}," }",[261,734,735],{"class":547}," from",[261,737,738],{"class":430}," '",[261,740,741],{"class":270},"@nuxt\u002Fimage\u002Fruntime",[261,743,744],{"class":430},"'\n",[261,746,747],{"class":263,"line":451},[261,748,750],{"emptyLinePlaceholder":749},true,"\n",[261,752,753,755,757,759,761],{"class":263,"line":509},[261,754,548],{"class":547},[261,756,551],{"class":547},[261,758,729],{"class":554},[261,760,558],{"class":500},[261,762,561],{"class":430},[261,764,765,768,770,772,774,776,778,780],{"class":263,"line":519},[261,766,767],{"class":515},"  getImage",[261,769,558],{"class":430},[261,771,668],{"class":667},[261,773,671],{"class":430},[261,775,674],{"class":430},[261,777,677],{"class":667},[261,779,680],{"class":430},[261,781,571],{"class":430},[261,783,784],{"class":263,"line":528},[261,785,786],{"class":690},"    \u002F\u002F ...\n",[261,788,789,792,794,796],{"class":263,"line":607},[261,790,791],{"class":547},"    return",[261,793,674],{"class":430},[261,795,701],{"class":500},[261,797,704],{"class":430},[261,799,800],{"class":263,"line":613},[261,801,616],{"class":430},[261,803,804,806],{"class":263,"line":619},[261,805,622],{"class":430},[261,807,625],{"class":500},[809,810,812],"h3",{"id":811},"add-modifier-types-optional","Add modifier types (optional)",[227,814,815],{},"Add types for custom modifiers:",[251,817,819],{"className":537,"code":818,"filename":645,"language":540,"meta":257,"style":257},"import { defineProvider } from '@nuxt\u002Fimage\u002Fruntime'\nimport type { ImageModifiers } from '@nuxt\u002Fimage'\n\ninterface MyProviderModifiers extends ImageModifiers {\n  watermark?: 'logo' | 'text' | 'none'\n  rotate?: number\n}\n\nexport default defineProvider\u003CMyProviderModifiers>({\n  getImage(src, { modifiers }) {\n    \u002F\u002F ...\n    return { url }\n  }\n})\n",[242,820,821,839,861,865,880,915,925,929,933,955,974,979,990,995],{"__ignoreMap":257},[261,822,823,825,827,829,831,833,835,837],{"class":263,"line":264},[261,824,724],{"class":547},[261,826,674],{"class":430},[261,828,729],{"class":500},[261,830,732],{"class":430},[261,832,735],{"class":547},[261,834,738],{"class":430},[261,836,741],{"class":270},[261,838,744],{"class":430},[261,840,841,843,846,848,851,853,855,857,859],{"class":263,"line":451},[261,842,724],{"class":547},[261,844,845],{"class":547}," type",[261,847,674],{"class":430},[261,849,850],{"class":500}," ImageModifiers",[261,852,732],{"class":430},[261,854,735],{"class":547},[261,856,738],{"class":430},[261,858,244],{"class":270},[261,860,744],{"class":430},[261,862,863],{"class":263,"line":509},[261,864,750],{"emptyLinePlaceholder":749},[261,866,867,870,873,876,878],{"class":263,"line":519},[261,868,869],{"class":654},"interface",[261,871,872],{"class":267}," MyProviderModifiers",[261,874,875],{"class":654}," extends",[261,877,850],{"class":267},[261,879,571],{"class":430},[261,881,882,885,888,890,893,896,899,901,904,906,908,910,913],{"class":263,"line":528},[261,883,884],{"class":515},"  watermark",[261,886,887],{"class":430},"?:",[261,889,738],{"class":430},[261,891,892],{"class":270},"logo",[261,894,895],{"class":430},"'",[261,897,898],{"class":430}," |",[261,900,738],{"class":430},[261,902,903],{"class":270},"text",[261,905,895],{"class":430},[261,907,898],{"class":430},[261,909,738],{"class":430},[261,911,912],{"class":270},"none",[261,914,744],{"class":430},[261,916,917,920,922],{"class":263,"line":607},[261,918,919],{"class":515},"  rotate",[261,921,887],{"class":430},[261,923,924],{"class":267}," number\n",[261,926,927],{"class":263,"line":613},[261,928,709],{"class":430},[261,930,931],{"class":263,"line":619},[261,932,750],{"emptyLinePlaceholder":749},[261,934,936,938,940,942,945,948,951,953],{"class":263,"line":935},9,[261,937,548],{"class":547},[261,939,551],{"class":547},[261,941,729],{"class":554},[261,943,944],{"class":430},"\u003C",[261,946,947],{"class":267},"MyProviderModifiers",[261,949,950],{"class":430},">",[261,952,558],{"class":500},[261,954,561],{"class":430},[261,956,958,960,962,964,966,968,970,972],{"class":263,"line":957},10,[261,959,767],{"class":515},[261,961,558],{"class":430},[261,963,668],{"class":667},[261,965,671],{"class":430},[261,967,674],{"class":430},[261,969,677],{"class":667},[261,971,680],{"class":430},[261,973,571],{"class":430},[261,975,977],{"class":263,"line":976},11,[261,978,786],{"class":690},[261,980,982,984,986,988],{"class":263,"line":981},12,[261,983,791],{"class":547},[261,985,674],{"class":430},[261,987,701],{"class":500},[261,989,704],{"class":430},[261,991,993],{"class":263,"line":992},13,[261,994,616],{"class":430},[261,996,998,1000],{"class":263,"line":997},14,[261,999,622],{"class":430},[261,1001,625],{"class":500},[227,1003,1004,1005,407,1007,636],{},"Modifiers will now be typed within your provider, and also when it is used within ",[242,1006,36],{},[242,1008,40],{},[809,1010,1012],{"id":1011},"update-formatter","Update formatter",[227,1014,1015,1016,1019,1020,1023,1024,1027],{},"Within ",[242,1017,1018],{},"createOperationsGenerator",", if you used ",[242,1021,1022],{},"joinWith"," for parameter formatting, but didn't use ",[242,1025,1026],{},"formatter",", you will now need to add a custom formatter.",[251,1029,1031],{"className":537,"code":1030,"filename":645,"language":540,"meta":257,"style":257},"import { createOperationsGenerator, defineProvider } from '@nuxt\u002Fimage\u002Fruntime'\n\nconst operationsGenerator = createOperationsGenerator({\n  keyMap: { width: 'w', height: 'h' },\n  joinWith: '&',\n  formatter: (key, value) => `${key}=${encodeURIComponent(value)}`\n})\n\nexport default defineProvider({\n  getImage(src, { modifiers, baseURL = '\u002F' }) {\n    const operations = operationsGenerator(modifiers)\n    return {\n      url: `${baseURL}${src}?${operations}`\n    }\n  }\n})\n",[242,1032,1033,1056,1060,1076,1114,1130,1173,1179,1183,1195,1228,1248,1254,1283,1287,1292],{"__ignoreMap":257},[261,1034,1035,1037,1039,1042,1044,1046,1048,1050,1052,1054],{"class":263,"line":264},[261,1036,724],{"class":547},[261,1038,674],{"class":430},[261,1040,1041],{"class":500}," createOperationsGenerator",[261,1043,671],{"class":430},[261,1045,729],{"class":500},[261,1047,732],{"class":430},[261,1049,735],{"class":547},[261,1051,738],{"class":430},[261,1053,741],{"class":270},[261,1055,744],{"class":430},[261,1057,1058],{"class":263,"line":451},[261,1059,750],{"emptyLinePlaceholder":749},[261,1061,1062,1065,1068,1070,1072,1074],{"class":263,"line":509},[261,1063,1064],{"class":654},"const",[261,1066,1067],{"class":500}," operationsGenerator ",[261,1069,661],{"class":430},[261,1071,1041],{"class":554},[261,1073,558],{"class":500},[261,1075,561],{"class":430},[261,1077,1078,1081,1083,1085,1088,1090,1092,1095,1097,1099,1102,1104,1106,1109,1111],{"class":263,"line":519},[261,1079,1080],{"class":515},"  keyMap",[261,1082,488],{"class":430},[261,1084,674],{"class":430},[261,1086,1087],{"class":515}," width",[261,1089,488],{"class":430},[261,1091,738],{"class":430},[261,1093,1094],{"class":270},"w",[261,1096,895],{"class":430},[261,1098,671],{"class":430},[261,1100,1101],{"class":515}," height",[261,1103,488],{"class":430},[261,1105,738],{"class":430},[261,1107,1108],{"class":270},"h",[261,1110,895],{"class":430},[261,1112,1113],{"class":430}," },\n",[261,1115,1116,1119,1121,1123,1126,1128],{"class":263,"line":528},[261,1117,1118],{"class":515},"  joinWith",[261,1120,488],{"class":430},[261,1122,738],{"class":430},[261,1124,1125],{"class":270},"&",[261,1127,895],{"class":430},[261,1129,594],{"class":430},[261,1131,1132,1135,1137,1139,1142,1144,1147,1150,1152,1155,1157,1159,1161,1164,1167,1170],{"class":263,"line":607},[261,1133,1134],{"class":554},"  formatter",[261,1136,488],{"class":430},[261,1138,664],{"class":430},[261,1140,1141],{"class":667},"key",[261,1143,671],{"class":430},[261,1145,1146],{"class":667}," value",[261,1148,1149],{"class":430},")",[261,1151,683],{"class":654},[261,1153,1154],{"class":430}," `${",[261,1156,1141],{"class":500},[261,1158,622],{"class":430},[261,1160,661],{"class":270},[261,1162,1163],{"class":430},"${",[261,1165,1166],{"class":554},"encodeURIComponent",[261,1168,1169],{"class":500},"(value)",[261,1171,1172],{"class":430},"}`\n",[261,1174,1175,1177],{"class":263,"line":613},[261,1176,622],{"class":430},[261,1178,625],{"class":500},[261,1180,1181],{"class":263,"line":619},[261,1182,750],{"emptyLinePlaceholder":749},[261,1184,1185,1187,1189,1191,1193],{"class":263,"line":935},[261,1186,548],{"class":547},[261,1188,551],{"class":547},[261,1190,729],{"class":554},[261,1192,558],{"class":500},[261,1194,561],{"class":430},[261,1196,1197,1199,1201,1203,1205,1207,1209,1211,1214,1217,1219,1222,1224,1226],{"class":263,"line":957},[261,1198,767],{"class":515},[261,1200,558],{"class":430},[261,1202,668],{"class":667},[261,1204,671],{"class":430},[261,1206,674],{"class":430},[261,1208,677],{"class":667},[261,1210,671],{"class":430},[261,1212,1213],{"class":667}," baseURL",[261,1215,1216],{"class":430}," =",[261,1218,738],{"class":430},[261,1220,1221],{"class":270},"\u002F",[261,1223,895],{"class":430},[261,1225,680],{"class":430},[261,1227,571],{"class":430},[261,1229,1230,1233,1236,1238,1241,1243,1246],{"class":263,"line":976},[261,1231,1232],{"class":654},"    const",[261,1234,1235],{"class":500}," operations",[261,1237,1216],{"class":430},[261,1239,1240],{"class":554}," operationsGenerator",[261,1242,558],{"class":515},[261,1244,1245],{"class":500},"modifiers",[261,1247,625],{"class":515},[261,1249,1250,1252],{"class":263,"line":981},[261,1251,791],{"class":547},[261,1253,571],{"class":430},[261,1255,1256,1259,1261,1263,1266,1269,1271,1273,1276,1278,1281],{"class":263,"line":992},[261,1257,1258],{"class":515},"      url",[261,1260,488],{"class":430},[261,1262,1154],{"class":430},[261,1264,1265],{"class":500},"baseURL",[261,1267,1268],{"class":430},"}${",[261,1270,668],{"class":500},[261,1272,622],{"class":430},[261,1274,1275],{"class":270},"?",[261,1277,1163],{"class":430},[261,1279,1280],{"class":500},"operations",[261,1282,1172],{"class":430},[261,1284,1285],{"class":263,"line":997},[261,1286,610],{"class":430},[261,1288,1290],{"class":263,"line":1289},15,[261,1291,616],{"class":430},[261,1293,1295,1297],{"class":263,"line":1294},16,[261,1296,622],{"class":430},[261,1298,625],{"class":500},[1300,1301,1302],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":257,"searchDepth":451,"depth":451,"links":1304},[1305,1306,1307,1308],{"id":236,"depth":451,"text":237},{"id":335,"depth":451,"text":336},{"id":399,"depth":451,"text":400},{"id":628,"depth":451,"text":629,"children":1309},[1310,1311],{"id":811,"depth":509,"text":812},{"id":1011,"depth":509,"text":1012},"A comprehensive guide to migrate your application from Nuxt Image v1 to Nuxt Image v2.","md",null,{},{"title":26},{"title":222,"description":1312},"ItmcbIzmwg5r_C0R0bbn2c0mQu0opUELLApmRJKZHK4",[1320,1322],{"title":22,"path":23,"stem":24,"description":1321,"children":-1},"We can never thank you enough for your contributions.",{"title":36,"path":37,"stem":38,"description":1323,"children":-1},"Discover how to use and configure the Nuxt Image component.",1775284313245]