[{"data":1,"prerenderedAt":840},["ShallowReactive",2],{"navigation_docs":3,"-providers-shopify":196,"-providers-shopify-surround":835},[4,30,47,183],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","/get-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","/get-started/installation","1.get-started/1.installation",{"title":14,"path":15,"stem":16},"Configuration","/get-started/configuration","1.get-started/2.configuration",{"title":18,"path":19,"stem":20},"Providers","/get-started/providers","1.get-started/3.providers",{"title":22,"path":23,"stem":24},"Contributing","/get-started/contributing","1.get-started/4.contributing",{"title":26,"path":27,"stem":28},"Migration","/get-started/migration","1.get-started/5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","/usage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","/usage/nuxt-img","2.usage/1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","/usage/nuxt-picture","2.usage/2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","/usage/use-image","2.usage/3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"/providers","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],{"title":52,"path":53,"stem":54},"Aliyun","/providers/aliyun","3.providers/aliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","/providers/aws-amplify","3.providers/aws-amplify",{"title":60,"path":61,"stem":62},"Bunny","/providers/bunny","3.providers/bunny",{"title":64,"path":65,"stem":66},"Caisy","/providers/caisy","3.providers/caisy",{"title":68,"path":69,"stem":70},"Cloudflare","/providers/cloudflare","3.providers/cloudflare",{"title":72,"path":73,"stem":74},"Cloudimage","/providers/cloudimage","3.providers/cloudimage",{"title":76,"path":77,"stem":78},"Cloudinary","/providers/cloudinary","3.providers/cloudinary",{"title":80,"path":81,"stem":82},"Contentful","/providers/contentful","3.providers/contentful",{"title":84,"path":85,"stem":86},"Directus","/providers/directus","3.providers/directus",{"title":88,"path":89,"stem":90},"Fastly","/providers/fastly","3.providers/fastly",{"title":92,"path":93,"stem":94},"Filerobot","/providers/filerobot","3.providers/filerobot",{"title":96,"path":97,"stem":98},"GitHub","/providers/github","3.providers/github",{"title":100,"path":101,"stem":102},"Glide","/providers/glide","3.providers/glide",{"title":104,"path":105,"stem":106},"Gumlet","/providers/gumlet","3.providers/gumlet",{"title":108,"path":109,"stem":110},"Hygraph","/providers/hygraph","3.providers/hygraph",{"title":112,"path":113,"stem":114},"ImageEngine","/providers/imageengine","3.providers/imageengine",{"title":116,"path":117,"stem":118},"ImageKit","/providers/imagekit","3.providers/imagekit",{"title":120,"path":121,"stem":122},"Imgix","/providers/imgix","3.providers/imgix",{"title":124,"path":125,"stem":126},"IPX","/providers/ipx","3.providers/ipx",{"title":128,"path":129,"stem":130},"Netlify","/providers/netlify","3.providers/netlify",{"title":132,"path":133,"stem":134},"None","/providers/none","3.providers/none",{"title":136,"path":137,"stem":138},"Prepr","/providers/prepr","3.providers/prepr",{"title":140,"path":141,"stem":142},"Prismic","/providers/prismic","3.providers/prismic",{"title":144,"path":145,"stem":146},"Sanity","/providers/sanity","3.providers/sanity",{"title":148,"path":149,"stem":150},"Shopify","/providers/shopify","3.providers/shopify",{"title":152,"path":153,"stem":154},"Sirv","/providers/sirv","3.providers/sirv",{"title":156,"path":157,"stem":158},"Storyblok","/providers/storyblok","3.providers/storyblok",{"title":160,"path":161,"stem":162},"Strapi","/providers/strapi","3.providers/strapi",{"title":164,"path":165,"stem":166},"Twicpics","/providers/twicpics","3.providers/twicpics",{"title":168,"path":169,"stem":170},"Unsplash","/providers/unsplash","3.providers/unsplash",{"title":172,"path":173,"stem":174},"Uploadcare","/providers/uploadcare","3.providers/uploadcare",{"title":176,"path":177,"stem":178},"Vercel","/providers/vercel","3.providers/vercel",{"title":180,"path":181,"stem":182},"Weserv","/providers/weserv","3.providers/weserv",{"title":184,"path":185,"stem":186,"children":187,"page":29},"Advanced","/advanced","4.advanced",[188,192],{"title":189,"path":190,"stem":191},"Custom Provider","/advanced/custom-provider","4.advanced/1.custom-provider",{"title":193,"path":194,"stem":195},"Static Images","/advanced/static-images","4.advanced/2.static-images",{"id":197,"title":148,"body":198,"description":823,"extension":824,"links":825,"meta":831,"navigation":832,"path":149,"seo":833,"stem":150,"__hash__":834},"docs/3.providers/shopify.md",{"type":199,"value":200,"toc":815},"minimark",[201,213,221,228,325,330,333,357,360,392,396,402,470,473,477,531,534,539,571,625,630,635,748,752,757,811],[202,203,204,205,212],"p",{},"Integration between ",[206,207,211],"a",{"href":208,"rel":209},"https://cdn.shopify.com/",[210],"nofollow","Shopify CDN"," and Nuxt Image.",[202,214,215,216,220],{},"To use this provider, you just need to pass the image URL from the Storefront API response to the ",[217,218,219],"code",{},"src"," prop.",[202,222,223,224,227],{},"Configure the provider in your ",[217,225,226],{},"nuxt.config.ts"," (optional):",[229,230,235],"pre",{"className":231,"code":232,"filename":226,"language":233,"meta":234,"style":234},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    shopify: {\n      baseURL: 'https://cdn.shopify.com/',\n    }\n  }\n})\n","ts","",[217,236,237,261,274,284,304,310,316],{"__ignoreMap":234},[238,239,242,246,249,253,257],"span",{"class":240,"line":241},"line",1,[238,243,245],{"class":244},"s7zQu","export",[238,247,248],{"class":244}," default",[238,250,252],{"class":251},"s2Zo4"," defineNuxtConfig",[238,254,256],{"class":255},"sTEyZ","(",[238,258,260],{"class":259},"sMK4o","{\n",[238,262,264,268,271],{"class":240,"line":263},2,[238,265,267],{"class":266},"swJcz","  image",[238,269,270],{"class":259},":",[238,272,273],{"class":259}," {\n",[238,275,277,280,282],{"class":240,"line":276},3,[238,278,279],{"class":266},"    shopify",[238,281,270],{"class":259},[238,283,273],{"class":259},[238,285,287,290,292,295,298,301],{"class":240,"line":286},4,[238,288,289],{"class":266},"      baseURL",[238,291,270],{"class":259},[238,293,294],{"class":259}," '",[238,296,208],{"class":297},"sfazB",[238,299,300],{"class":259},"'",[238,302,303],{"class":259},",\n",[238,305,307],{"class":240,"line":306},5,[238,308,309],{"class":259},"    }\n",[238,311,313],{"class":240,"line":312},6,[238,314,315],{"class":259},"  }\n",[238,317,319,322],{"class":240,"line":318},7,[238,320,321],{"class":259},"}",[238,323,324],{"class":255},")\n",[326,327,329],"h2",{"id":328},"modifiers","Modifiers",[202,331,332],{},"The Shopify CDN provider supports the following default modifiers:",[334,335,336,342,347,352],"ul",{},[337,338,339],"li",{},[217,340,341],{},"width",[337,343,344],{},[217,345,346],{},"height",[337,348,349],{},[217,350,351],{},"format",[337,353,354],{},[217,355,356],{},"quality",[202,358,359],{},"Additionally, the following modifiers are supported:",[334,361,362,367,372,377,382,387],{},[337,363,364],{},[217,365,366],{},"padColor",[337,368,369],{},[217,370,371],{},"crop",[337,373,374],{},[217,375,376],{},"cropLeft",[337,378,379],{},[217,380,381],{},"cropTop",[337,383,384],{},[217,385,386],{},"cropWidth",[337,388,389],{},[217,390,391],{},"cropHeight",[393,394,395],"h3",{"id":351},"Format",[202,397,398,399,401],{},"The ",[217,400,351],{}," modifier is supported.",[229,403,407],{"className":404,"code":405,"language":406,"meta":234,"style":234},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ format: 'gif' }\" />\n","vue",[217,408,409],{"__ignoreMap":234},[238,410,411,414,417,421,424,427,430,432,435,437,439,442,444,447,449,451,453,455,458,460,462,465,467],{"class":240,"line":241},[238,412,413],{"class":259},"\u003C",[238,415,416],{"class":266},"NuxtImg",[238,418,420],{"class":419},"spNyl"," src",[238,422,423],{"class":259},"=",[238,425,426],{"class":259},"\"",[238,428,429],{"class":297},"...",[238,431,426],{"class":259},[238,433,434],{"class":419}," width",[238,436,423],{"class":259},[238,438,426],{"class":259},[238,440,441],{"class":297},"300",[238,443,426],{"class":259},[238,445,446],{"class":419}," height",[238,448,423],{"class":259},[238,450,426],{"class":259},[238,452,441],{"class":297},[238,454,426],{"class":259},[238,456,457],{"class":419}," modifiers",[238,459,423],{"class":259},[238,461,426],{"class":259},[238,463,464],{"class":297},"{ format: 'gif' }",[238,466,426],{"class":259},[238,468,469],{"class":259}," />\n",[393,471,472],{"id":356},"Quality",[202,474,398,475,401],{},[217,476,356],{},[229,478,480],{"className":404,"code":479,"language":406,"meta":234,"style":234},"\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ quality: 10 }\" />\n",[217,481,482],{"__ignoreMap":234},[238,483,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,527,529],{"class":240,"line":241},[238,485,413],{"class":259},[238,487,416],{"class":266},[238,489,420],{"class":419},[238,491,423],{"class":259},[238,493,426],{"class":259},[238,495,429],{"class":297},[238,497,426],{"class":259},[238,499,434],{"class":419},[238,501,423],{"class":259},[238,503,426],{"class":259},[238,505,441],{"class":297},[238,507,426],{"class":259},[238,509,446],{"class":419},[238,511,423],{"class":259},[238,513,426],{"class":259},[238,515,441],{"class":297},[238,517,426],{"class":259},[238,519,457],{"class":419},[238,521,423],{"class":259},[238,523,426],{"class":259},[238,525,526],{"class":297},"{ quality: 10 }",[238,528,426],{"class":259},[238,530,469],{"class":259},[393,532,533],{"id":371},"Crop",[202,535,398,536,538],{},[217,537,371],{}," modifier is supported with the following values:",[334,540,541,546,551,556,561,566],{},[337,542,543],{},[217,544,545],{},"center",[337,547,548],{},[217,549,550],{},"top",[337,552,553],{},[217,554,555],{},"bottom",[337,557,558],{},[217,559,560],{},"left",[337,562,563],{},[217,564,565],{},"right",[337,567,568],{},[217,569,570],{},"region",[229,572,574],{"className":404,"code":573,"language":406,"meta":234,"style":234},"\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ crop: 'center' }\" />\n",[217,575,576],{"__ignoreMap":234},[238,577,578,580,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,621,623],{"class":240,"line":241},[238,579,413],{"class":259},[238,581,416],{"class":266},[238,583,420],{"class":419},[238,585,423],{"class":259},[238,587,426],{"class":259},[238,589,429],{"class":297},[238,591,426],{"class":259},[238,593,434],{"class":419},[238,595,423],{"class":259},[238,597,426],{"class":259},[238,599,441],{"class":297},[238,601,426],{"class":259},[238,603,446],{"class":419},[238,605,423],{"class":259},[238,607,426],{"class":259},[238,609,441],{"class":297},[238,611,426],{"class":259},[238,613,457],{"class":419},[238,615,423],{"class":259},[238,617,426],{"class":259},[238,619,620],{"class":297},"{ crop: 'center' }",[238,622,426],{"class":259},[238,624,469],{"class":259},[626,627,629],"h4",{"id":628},"crop-region","Crop Region",[202,631,398,632,634],{},[217,633,371],{}," modifier can also be used to crop an image to a specific region.",[229,636,638],{"className":404,"code":637,"language":406,"meta":234,"style":234},"\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/>\n",[217,639,640,647,663,678,693,705,710,715,721,727,733,742],{"__ignoreMap":234},[238,641,642,644],{"class":240,"line":241},[238,643,413],{"class":259},[238,645,646],{"class":266},"NuxtImg\n",[238,648,649,652,654,656,658,660],{"class":240,"line":263},[238,650,651],{"class":419},"  src",[238,653,423],{"class":259},[238,655,426],{"class":259},[238,657,429],{"class":297},[238,659,426],{"class":259},[238,661,662],{"class":255}," \n",[238,664,665,668,670,672,674,676],{"class":240,"line":276},[238,666,667],{"class":419},"  width",[238,669,423],{"class":259},[238,671,426],{"class":259},[238,673,441],{"class":297},[238,675,426],{"class":259},[238,677,662],{"class":255},[238,679,680,683,685,687,689,691],{"class":240,"line":286},[238,681,682],{"class":419},"  height",[238,684,423],{"class":259},[238,686,426],{"class":259},[238,688,441],{"class":297},[238,690,426],{"class":259},[238,692,662],{"class":255},[238,694,695,698,700,702],{"class":240,"line":306},[238,696,697],{"class":419},"  modifiers",[238,699,423],{"class":259},[238,701,426],{"class":259},[238,703,704],{"class":297},"{ \n",[238,706,707],{"class":240,"line":312},[238,708,709],{"class":297},"    crop: 'region', \n",[238,711,712],{"class":240,"line":318},[238,713,714],{"class":297},"    cropLeft: 100, \n",[238,716,718],{"class":240,"line":717},8,[238,719,720],{"class":297},"    cropTop: 100, \n",[238,722,724],{"class":240,"line":723},9,[238,725,726],{"class":297},"    cropWidth: 450, \n",[238,728,730],{"class":240,"line":729},10,[238,731,732],{"class":297},"    cropHeight: 300\n",[238,734,736,739],{"class":240,"line":735},11,[238,737,738],{"class":297},"  }",[238,740,741],{"class":259},"\"\n",[238,743,745],{"class":240,"line":744},12,[238,746,747],{"class":255},"/>\n",[393,749,751],{"id":750},"pad-color","Pad color",[202,753,398,754,756],{},[217,755,366],{}," modifier can be used to pad an image with a background color. Must be a hex color value.",[229,758,760],{"className":404,"code":759,"language":406,"meta":234,"style":234},"\u003CNuxtImg src=\"...\" width=\"300\" height=\"300\" modifiers=\"{ padColor: 'ff0000' }\" />\n",[217,761,762],{"__ignoreMap":234},[238,763,764,766,768,770,772,774,776,778,780,782,784,786,788,790,792,794,796,798,800,802,804,807,809],{"class":240,"line":241},[238,765,413],{"class":259},[238,767,416],{"class":266},[238,769,420],{"class":419},[238,771,423],{"class":259},[238,773,426],{"class":259},[238,775,429],{"class":297},[238,777,426],{"class":259},[238,779,434],{"class":419},[238,781,423],{"class":259},[238,783,426],{"class":259},[238,785,441],{"class":297},[238,787,426],{"class":259},[238,789,446],{"class":419},[238,791,423],{"class":259},[238,793,426],{"class":259},[238,795,441],{"class":297},[238,797,426],{"class":259},[238,799,457],{"class":419},[238,801,423],{"class":259},[238,803,426],{"class":259},[238,805,806],{"class":297},"{ padColor: 'ff0000' }",[238,808,426],{"class":259},[238,810,469],{"class":259},[812,813,814],"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":234,"searchDepth":263,"depth":263,"links":816},[817],{"id":328,"depth":263,"text":329,"children":818},[819,820,821,822],{"id":351,"depth":276,"text":395},{"id":356,"depth":276,"text":472},{"id":371,"depth":276,"text":533},{"id":750,"depth":276,"text":751},"Nuxt Image integration with Shopify CDN.","md",[826],{"label":827,"icon":828,"to":829,"size":830},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/providers/shopify.ts","xs",{},true,{"title":148,"description":823},"KTdY2aL6MRBv611QJ2A-cVchb6_C8B9EiKIJ6EbU9D8",[836,838],{"title":144,"path":145,"stem":146,"description":837,"children":-1},"Nuxt Image has first class integration with Sanity.",{"title":152,"path":153,"stem":154,"description":839,"children":-1},"Nuxt Image integration with Sirv media management, transformation and delivery platform.",1762338918202]