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