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