[{"data":1,"prerenderedAt":864},["ShallowReactive",2],{"navigation_docs":3,"-providers-shopify":220,"-providers-shopify-surround":859},[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":164,"body":222,"description":847,"extension":848,"links":849,"meta":855,"navigation":856,"path":165,"seo":857,"stem":166,"__hash__":858},"docs\u002F3.providers\u002Fshopify.md",{"type":223,"value":224,"toc":839},"minimark",[225,237,245,252,349,354,357,381,384,416,420,426,494,497,501,555,558,563,595,649,654,659,772,776,781,835],[226,227,228,229,236],"p",{},"Integration between ",[230,231,235],"a",{"href":232,"rel":233},"https:\u002F\u002Fcdn.shopify.com\u002F",[234],"nofollow","Shopify CDN"," and Nuxt Image.",[226,238,239,240,244],{},"To use this provider, you just need to pass the image URL from the Storefront API response to the ",[241,242,243],"code",{},"src"," prop.",[226,246,247,248,251],{},"Configure the provider in your ",[241,249,250],{},"nuxt.config.ts"," (optional):",[253,254,259],"pre",{"className":255,"code":256,"filename":250,"language":257,"meta":258,"style":258},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    shopify: {\n      baseURL: 'https:\u002F\u002Fcdn.shopify.com\u002F',\n    }\n  }\n})\n","ts","",[241,260,261,285,298,308,328,334,340],{"__ignoreMap":258},[262,263,266,270,273,277,281],"span",{"class":264,"line":265},"line",1,[262,267,269],{"class":268},"s7zQu","export",[262,271,272],{"class":268}," default",[262,274,276],{"class":275},"s2Zo4"," defineNuxtConfig",[262,278,280],{"class":279},"sTEyZ","(",[262,282,284],{"class":283},"sMK4o","{\n",[262,286,288,292,295],{"class":264,"line":287},2,[262,289,291],{"class":290},"swJcz","  image",[262,293,294],{"class":283},":",[262,296,297],{"class":283}," {\n",[262,299,301,304,306],{"class":264,"line":300},3,[262,302,303],{"class":290},"    shopify",[262,305,294],{"class":283},[262,307,297],{"class":283},[262,309,311,314,316,319,322,325],{"class":264,"line":310},4,[262,312,313],{"class":290},"      baseURL",[262,315,294],{"class":283},[262,317,318],{"class":283}," '",[262,320,232],{"class":321},"sfazB",[262,323,324],{"class":283},"'",[262,326,327],{"class":283},",\n",[262,329,331],{"class":264,"line":330},5,[262,332,333],{"class":283},"    }\n",[262,335,337],{"class":264,"line":336},6,[262,338,339],{"class":283},"  }\n",[262,341,343,346],{"class":264,"line":342},7,[262,344,345],{"class":283},"}",[262,347,348],{"class":279},")\n",[350,351,353],"h2",{"id":352},"modifiers","Modifiers",[226,355,356],{},"The Shopify CDN provider supports the following default modifiers:",[358,359,360,366,371,376],"ul",{},[361,362,363],"li",{},[241,364,365],{},"width",[361,367,368],{},[241,369,370],{},"height",[361,372,373],{},[241,374,375],{},"format",[361,377,378],{},[241,379,380],{},"quality",[226,382,383],{},"Additionally, the following modifiers are supported:",[358,385,386,391,396,401,406,411],{},[361,387,388],{},[241,389,390],{},"padColor",[361,392,393],{},[241,394,395],{},"crop",[361,397,398],{},[241,399,400],{},"cropLeft",[361,402,403],{},[241,404,405],{},"cropTop",[361,407,408],{},[241,409,410],{},"cropWidth",[361,412,413],{},[241,414,415],{},"cropHeight",[417,418,419],"h3",{"id":375},"Format",[226,421,422,423,425],{},"The ",[241,424,375],{}," modifier is supported.",[253,427,431],{"className":428,"code":429,"language":430,"meta":258,"style":258},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ format: 'gif' }\" \u002F>\n","vue",[241,432,433],{"__ignoreMap":258},[262,434,435,438,441,445,448,451,454,456,459,461,463,466,468,471,473,475,477,479,482,484,486,489,491],{"class":264,"line":265},[262,436,437],{"class":283},"\u003C",[262,439,440],{"class":290},"NuxtImg",[262,442,444],{"class":443},"spNyl"," src",[262,446,447],{"class":283},"=",[262,449,450],{"class":283},"\"",[262,452,453],{"class":321},"...",[262,455,450],{"class":283},[262,457,458],{"class":443}," width",[262,460,447],{"class":283},[262,462,450],{"class":283},[262,464,465],{"class":321},"300",[262,467,450],{"class":283},[262,469,470],{"class":443}," height",[262,472,447],{"class":283},[262,474,450],{"class":283},[262,476,465],{"class":321},[262,478,450],{"class":283},[262,480,481],{"class":443}," modifiers",[262,483,447],{"class":283},[262,485,450],{"class":283},[262,487,488],{"class":321},"{ format: 'gif' }",[262,490,450],{"class":283},[262,492,493],{"class":283}," \u002F>\n",[417,495,496],{"id":380},"Quality",[226,498,422,499,425],{},[241,500,380],{},[253,502,504],{"className":428,"code":503,"language":430,"meta":258,"style":258},"\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ quality: 10 }\" \u002F>\n",[241,505,506],{"__ignoreMap":258},[262,507,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,551,553],{"class":264,"line":265},[262,509,437],{"class":283},[262,511,440],{"class":290},[262,513,444],{"class":443},[262,515,447],{"class":283},[262,517,450],{"class":283},[262,519,453],{"class":321},[262,521,450],{"class":283},[262,523,458],{"class":443},[262,525,447],{"class":283},[262,527,450],{"class":283},[262,529,465],{"class":321},[262,531,450],{"class":283},[262,533,470],{"class":443},[262,535,447],{"class":283},[262,537,450],{"class":283},[262,539,465],{"class":321},[262,541,450],{"class":283},[262,543,481],{"class":443},[262,545,447],{"class":283},[262,547,450],{"class":283},[262,549,550],{"class":321},"{ quality: 10 }",[262,552,450],{"class":283},[262,554,493],{"class":283},[417,556,557],{"id":395},"Crop",[226,559,422,560,562],{},[241,561,395],{}," modifier is supported with the following values:",[358,564,565,570,575,580,585,590],{},[361,566,567],{},[241,568,569],{},"center",[361,571,572],{},[241,573,574],{},"top",[361,576,577],{},[241,578,579],{},"bottom",[361,581,582],{},[241,583,584],{},"left",[361,586,587],{},[241,588,589],{},"right",[361,591,592],{},[241,593,594],{},"region",[253,596,598],{"className":428,"code":597,"language":430,"meta":258,"style":258},"\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ crop: 'center' }\" \u002F>\n",[241,599,600],{"__ignoreMap":258},[262,601,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,645,647],{"class":264,"line":265},[262,603,437],{"class":283},[262,605,440],{"class":290},[262,607,444],{"class":443},[262,609,447],{"class":283},[262,611,450],{"class":283},[262,613,453],{"class":321},[262,615,450],{"class":283},[262,617,458],{"class":443},[262,619,447],{"class":283},[262,621,450],{"class":283},[262,623,465],{"class":321},[262,625,450],{"class":283},[262,627,470],{"class":443},[262,629,447],{"class":283},[262,631,450],{"class":283},[262,633,465],{"class":321},[262,635,450],{"class":283},[262,637,481],{"class":443},[262,639,447],{"class":283},[262,641,450],{"class":283},[262,643,644],{"class":321},"{ crop: 'center' }",[262,646,450],{"class":283},[262,648,493],{"class":283},[650,651,653],"h4",{"id":652},"crop-region","Crop Region",[226,655,422,656,658],{},[241,657,395],{}," modifier can also be used to crop an image to a specific region.",[253,660,662],{"className":428,"code":661,"language":430,"meta":258,"style":258},"\u003CNuxtImg\n  src=\"...\" \n  width=\"300\" \n  height=\"300\" \n  modifiers=\"{ \n    crop: 'region', \n    cropLeft: 100, \n    cropTop: 100, \n    cropWidth: 450, \n    cropHeight: 300\n  }\"\n\u002F>\n",[241,663,664,671,687,702,717,729,734,739,745,751,757,766],{"__ignoreMap":258},[262,665,666,668],{"class":264,"line":265},[262,667,437],{"class":283},[262,669,670],{"class":290},"NuxtImg\n",[262,672,673,676,678,680,682,684],{"class":264,"line":287},[262,674,675],{"class":443},"  src",[262,677,447],{"class":283},[262,679,450],{"class":283},[262,681,453],{"class":321},[262,683,450],{"class":283},[262,685,686],{"class":279}," \n",[262,688,689,692,694,696,698,700],{"class":264,"line":300},[262,690,691],{"class":443},"  width",[262,693,447],{"class":283},[262,695,450],{"class":283},[262,697,465],{"class":321},[262,699,450],{"class":283},[262,701,686],{"class":279},[262,703,704,707,709,711,713,715],{"class":264,"line":310},[262,705,706],{"class":443},"  height",[262,708,447],{"class":283},[262,710,450],{"class":283},[262,712,465],{"class":321},[262,714,450],{"class":283},[262,716,686],{"class":279},[262,718,719,722,724,726],{"class":264,"line":330},[262,720,721],{"class":443},"  modifiers",[262,723,447],{"class":283},[262,725,450],{"class":283},[262,727,728],{"class":321},"{ \n",[262,730,731],{"class":264,"line":336},[262,732,733],{"class":321},"    crop: 'region', \n",[262,735,736],{"class":264,"line":342},[262,737,738],{"class":321},"    cropLeft: 100, \n",[262,740,742],{"class":264,"line":741},8,[262,743,744],{"class":321},"    cropTop: 100, \n",[262,746,748],{"class":264,"line":747},9,[262,749,750],{"class":321},"    cropWidth: 450, \n",[262,752,754],{"class":264,"line":753},10,[262,755,756],{"class":321},"    cropHeight: 300\n",[262,758,760,763],{"class":264,"line":759},11,[262,761,762],{"class":321},"  }",[262,764,765],{"class":283},"\"\n",[262,767,769],{"class":264,"line":768},12,[262,770,771],{"class":279},"\u002F>\n",[417,773,775],{"id":774},"pad-color","Pad color",[226,777,422,778,780],{},[241,779,390],{}," modifier can be used to pad an image with a background color. Must be a hex color value.",[253,782,784],{"className":428,"code":783,"language":430,"meta":258,"style":258},"\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ padColor: 'ff0000' }\" \u002F>\n",[241,785,786],{"__ignoreMap":258},[262,787,788,790,792,794,796,798,800,802,804,806,808,810,812,814,816,818,820,822,824,826,828,831,833],{"class":264,"line":265},[262,789,437],{"class":283},[262,791,440],{"class":290},[262,793,444],{"class":443},[262,795,447],{"class":283},[262,797,450],{"class":283},[262,799,453],{"class":321},[262,801,450],{"class":283},[262,803,458],{"class":443},[262,805,447],{"class":283},[262,807,450],{"class":283},[262,809,465],{"class":321},[262,811,450],{"class":283},[262,813,470],{"class":443},[262,815,447],{"class":283},[262,817,450],{"class":283},[262,819,465],{"class":321},[262,821,450],{"class":283},[262,823,481],{"class":443},[262,825,447],{"class":283},[262,827,450],{"class":283},[262,829,830],{"class":321},"{ padColor: 'ff0000' }",[262,832,450],{"class":283},[262,834,493],{"class":283},[836,837,838],"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}",{"title":258,"searchDepth":287,"depth":287,"links":840},[841],{"id":352,"depth":287,"text":353,"children":842},[843,844,845,846],{"id":375,"depth":300,"text":419},{"id":380,"depth":300,"text":496},{"id":395,"depth":300,"text":557},{"id":774,"depth":300,"text":775},"Nuxt Image integration with Shopify CDN.","md",[850],{"label":851,"icon":852,"to":853,"size":854},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fproviders\u002Fshopify.ts","xs",{},true,{"title":164,"description":847},"KTdY2aL6MRBv611QJ2A-cVchb6_C8B9EiKIJ6EbU9D8",[860,862],{"title":160,"path":161,"stem":162,"description":861,"children":-1},"Nuxt Image has first class integration with Sanity.",{"title":168,"path":169,"stem":170,"description":863,"children":-1},"Nuxt Image integration with Sirv media management, transformation and delivery platform.",1775283770897]