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