[{"data":1,"prerenderedAt":806},["ShallowReactive",2],{"navigation_docs":3,"-get-started-installation":192,"-get-started-installation-surround":803},[4,26,43,179],{"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,171,175],{"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},"GitHub","/providers/github","3.providers/github",{"title":96,"path":97,"stem":98},"Glide","/providers/glide","3.providers/glide",{"title":100,"path":101,"stem":102},"Gumlet","/providers/gumlet","3.providers/gumlet",{"title":104,"path":105,"stem":106},"Hygraph","/providers/hygraph","3.providers/hygraph",{"title":108,"path":109,"stem":110},"ImageEngine","/providers/imageengine","3.providers/imageengine",{"title":112,"path":113,"stem":114},"ImageKit","/providers/imagekit","3.providers/imagekit",{"title":116,"path":117,"stem":118},"Imgix","/providers/imgix","3.providers/imgix",{"title":120,"path":121,"stem":122},"IPX","/providers/ipx","3.providers/ipx",{"title":124,"path":125,"stem":126},"Netlify","/providers/netlify","3.providers/netlify",{"title":128,"path":129,"stem":130},"None","/providers/none","3.providers/none",{"title":132,"path":133,"stem":134},"Prepr","/providers/prepr","3.providers/prepr",{"title":136,"path":137,"stem":138},"Prismic","/providers/prismic","3.providers/prismic",{"title":140,"path":141,"stem":142},"Sanity","/providers/sanity","3.providers/sanity",{"title":144,"path":145,"stem":146},"Shopify","/providers/shopify","3.providers/shopify",{"title":148,"path":149,"stem":150},"Sirv","/providers/sirv","3.providers/sirv",{"title":152,"path":153,"stem":154},"Storyblok","/providers/storyblok","3.providers/storyblok",{"title":156,"path":157,"stem":158},"Strapi","/providers/strapi","3.providers/strapi",{"title":160,"path":161,"stem":162},"Twicpics","/providers/twicpics","3.providers/twicpics",{"title":164,"path":165,"stem":166},"Unsplash","/providers/unsplash","3.providers/unsplash",{"title":168,"path":169,"stem":170},"Uploadcare","/providers/uploadcare","3.providers/uploadcare",{"title":172,"path":173,"stem":174},"Vercel","/providers/vercel","3.providers/vercel",{"title":176,"path":177,"stem":178},"Weserv","/providers/weserv","3.providers/weserv",{"title":180,"path":181,"stem":182,"children":183,"page":25},"Advanced","/advanced","4.advanced",[184,188],{"title":185,"path":186,"stem":187},"Custom Provider","/advanced/custom-provider","4.advanced/1.custom-provider",{"title":189,"path":190,"stem":191},"Static Images","/advanced/static-images","4.advanced/2.static-images",{"id":193,"title":10,"body":194,"description":796,"extension":797,"links":798,"meta":799,"navigation":800,"path":11,"seo":801,"stem":12,"__hash__":802},"docs/1.get-started/1.installation.md",{"type":195,"value":196,"toc":786},"minimark",[197,233,238,246,277,281,287,348,359,426,429,438,482,490,494,516,519,528,533,542,584,599,603,609,642,650,654,657,673,733,738,756,782],[198,199,200,201,205,206,210,211,214,215,222,223,226,227,232],"note",{},"You are reading the ",[202,203,204],"code",{},"v1"," documentation compatible with ",[207,208,209],"strong",{},"Nuxt 3",". ",[212,213],"br",{}," Checkout ",[216,217,221],"a",{"href":218,"rel":219},"https://v0.image.nuxtjs.org/getting-started/installation",[220],"nofollow","v0.image.nuxtjs.org"," for ",[207,224,225],{},"Nuxt 2"," compatible version. (",[216,228,231],{"href":229,"rel":230},"https://github.com/nuxt/image/discussions/548",[220],"Announcement",").",[234,235,237],"h2",{"id":236},"automatic-installation","Automatic Installation",[239,240,241,242,245],"p",{},"To get started, add ",[202,243,244],{},"@nuxt/image"," to your project:",[247,248,253],"pre",{"className":249,"code":250,"language":251,"meta":252,"style":252},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxt module add image\n","bash","",[202,254,255],{"__ignoreMap":252},[256,257,260,264,268,271,274],"span",{"class":258,"line":259},"line",1,[256,261,263],{"class":262},"sBMFI","npx",[256,265,267],{"class":266},"sfazB"," nuxt",[256,269,270],{"class":266}," module",[256,272,273],{"class":266}," add",[256,275,276],{"class":266}," image\n",[234,278,280],{"id":279},"manual-installation","Manual Installation",[239,282,283,284,286],{},"Add ",[202,285,244],{}," dependency to your project:",[288,289,290,306,320,334],"code-group",{},[247,291,294],{"className":249,"code":292,"filename":293,"language":251,"meta":252,"style":252},"npm i @nuxt/image\n","npm",[202,295,296],{"__ignoreMap":252},[256,297,298,300,303],{"class":258,"line":259},[256,299,293],{"class":262},[256,301,302],{"class":266}," i",[256,304,305],{"class":266}," @nuxt/image\n",[247,307,310],{"className":249,"code":308,"filename":309,"language":251,"meta":252,"style":252},"yarn add @nuxt/image\n","yarn",[202,311,312],{"__ignoreMap":252},[256,313,314,316,318],{"class":258,"line":259},[256,315,309],{"class":262},[256,317,273],{"class":266},[256,319,305],{"class":266},[247,321,324],{"className":249,"code":322,"filename":323,"language":251,"meta":252,"style":252},"pnpm add @nuxt/image\n","pnpm",[202,325,326],{"__ignoreMap":252},[256,327,328,330,332],{"class":258,"line":259},[256,329,323],{"class":262},[256,331,273],{"class":266},[256,333,305],{"class":266},[247,335,338],{"className":249,"code":336,"filename":337,"language":251,"meta":252,"style":252},"bun add @nuxt/image\n","bun",[202,339,340],{"__ignoreMap":252},[256,341,342,344,346],{"class":258,"line":259},[256,343,337],{"class":262},[256,345,273],{"class":266},[256,347,305],{"class":266},[239,349,350,351,354,355,358],{},"Then, add it to the ",[202,352,353],{},"modules"," in your ",[202,356,357],{},"nuxt.config",":",[247,360,365],{"className":361,"code":362,"filename":363,"language":364,"meta":252,"style":252},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n    '@nuxt/image'\n  ]\n})\n","nuxt.config.ts","ts",[202,366,367,388,400,411,417],{"__ignoreMap":252},[256,368,369,373,376,380,384],{"class":258,"line":259},[256,370,372],{"class":371},"s7zQu","export",[256,374,375],{"class":371}," default",[256,377,379],{"class":378},"s2Zo4"," defineNuxtConfig",[256,381,383],{"class":382},"sTEyZ","(",[256,385,387],{"class":386},"sMK4o","{\n",[256,389,391,395,397],{"class":258,"line":390},2,[256,392,394],{"class":393},"swJcz","  modules",[256,396,358],{"class":386},[256,398,399],{"class":382}," [\n",[256,401,403,406,408],{"class":258,"line":402},3,[256,404,405],{"class":386},"    '",[256,407,244],{"class":266},[256,409,410],{"class":386},"'\n",[256,412,414],{"class":258,"line":413},4,[256,415,416],{"class":382},"  ]\n",[256,418,420,423],{"class":258,"line":419},5,[256,421,422],{"class":386},"}",[256,424,425],{"class":382},")\n",[234,427,14],{"id":428},"configuration",[239,430,431,432,435,436,358],{},"Add an ",[202,433,434],{},"image"," section in your ",[202,437,357],{},[247,439,441],{"className":361,"code":440,"filename":363,"language":364,"meta":252,"style":252},"export default defineNuxtConfig({\n  image: {\n    // Options\n  }\n})\n",[202,442,443,455,465,471,476],{"__ignoreMap":252},[256,444,445,447,449,451,453],{"class":258,"line":259},[256,446,372],{"class":371},[256,448,375],{"class":371},[256,450,379],{"class":378},[256,452,383],{"class":382},[256,454,387],{"class":386},[256,456,457,460,462],{"class":258,"line":390},[256,458,459],{"class":393},"  image",[256,461,358],{"class":386},[256,463,464],{"class":386}," {\n",[256,466,467],{"class":258,"line":402},[256,468,470],{"class":469},"sHwdD","    // Options\n",[256,472,473],{"class":258,"line":413},[256,474,475],{"class":386},"  }\n",[256,477,478,480],{"class":258,"line":419},[256,479,422],{"class":386},[256,481,425],{"class":382},[483,484,485,486,489],"tip",{},"Checkout the ",[216,487,488],{"href":15},"image configuration"," for all available options and features to customize.",[234,491,493],{"id":492},"edge-channel","Edge Channel",[239,495,496,497,500,501,503,504,507,508,515],{},"After each commit is merged into the ",[202,498,499],{},"main"," branch of ",[202,502,244],{}," and ",[207,505,506],{},"passing all tests",", we trigger an automated npm release using GitHub Actions publishing a ",[216,509,512],{"href":510,"rel":511},"https://npmjs.com/package/@nuxt/image-nightly",[220],[202,513,514],{},"@nuxt/image-nightly"," package.",[239,517,518],{},"You can opt in to use this release channel and avoid waiting for the next release and helping the module by beta testing changes.",[239,520,521,522,527],{},"The build and publishing method and quality of edge releases are the same as stable ones. The only difference is that you should often check the ",[216,523,526],{"href":524,"rel":525},"https://github.com/nuxt/image",[220],"GitHub repository"," for updates. There is a slight chance of regressions not being caught during the review process and by the automated tests. Therefore, we internally use this channel to double-check everything before each release.",[529,530,532],"h3",{"id":531},"opting-into-the-edge-channel","Opting into the edge channel",[239,534,535,536,538,539,358],{},"Update ",[202,537,244],{}," dependency inside ",[202,540,541],{},"package.json",[247,543,547],{"className":544,"code":545,"filename":541,"language":546,"meta":252,"style":252},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"devDependencies\": {\n-   \"@nuxt/image\": \"^1.0.0\"\n+   \"@nuxt/image\": \"npm:@nuxt/image-nightly@latest\"\n  }\n}\n","diff",[202,548,549,553,558,566,574,578],{"__ignoreMap":252},[256,550,551],{"class":258,"line":259},[256,552,387],{"class":382},[256,554,555],{"class":258,"line":390},[256,556,557],{"class":382},"  \"devDependencies\": {\n",[256,559,560,563],{"class":258,"line":402},[256,561,562],{"class":386},"-",[256,564,565],{"class":393},"   \"@nuxt/image\": \"^1.0.0\"\n",[256,567,568,571],{"class":258,"line":413},[256,569,570],{"class":386},"+",[256,572,573],{"class":266},"   \"@nuxt/image\": \"npm:@nuxt/image-nightly@latest\"\n",[256,575,576],{"class":258,"line":419},[256,577,475],{"class":382},[256,579,581],{"class":258,"line":580},6,[256,582,583],{"class":382},"}\n",[239,585,586,587,590,591,594,595,598],{},"Remove lockfile (",[202,588,589],{},"package-lock.json",", ",[202,592,593],{},"yarn.lock",", or ",[202,596,597],{},"pnpm-lock.yaml",") and reinstall dependencies.",[529,600,602],{"id":601},"opting-out-from-the-edge-channel","Opting out from the edge channel",[239,604,535,605,538,607,358],{},[202,606,244],{},[202,608,541],{},[247,610,612],{"className":544,"code":611,"filename":541,"language":546,"meta":252,"style":252},"{\n  \"devDependencies\": {\n-   \"@nuxt/image\": \"npm:@nuxt/image-nightly@latest\"\n+   \"@nuxt/image\": \"^1.0.0\"\n  }\n}\n",[202,613,614,618,622,628,634,638],{"__ignoreMap":252},[256,615,616],{"class":258,"line":259},[256,617,387],{"class":382},[256,619,620],{"class":258,"line":390},[256,621,557],{"class":382},[256,623,624,626],{"class":258,"line":402},[256,625,562],{"class":386},[256,627,573],{"class":393},[256,629,630,632],{"class":258,"line":413},[256,631,570],{"class":386},[256,633,565],{"class":266},[256,635,636],{"class":258,"line":419},[256,637,475],{"class":382},[256,639,640],{"class":258,"line":580},[256,641,583],{"class":382},[239,643,586,644,590,646,594,648,598],{},[202,645,589],{},[202,647,593],{},[202,649,597],{},[234,651,653],{"id":652},"troubleshooting","Troubleshooting",[239,655,656],{},"If an error occurs during installation:",[658,659,660,670],"ul",{},[661,662,663,664,669],"li",{},"Ensure using LTS version of NodeJS (",[216,665,668],{"href":666,"rel":667},"https://nodejs.org/en/download",[220],"NodeJS Download page",")",[661,671,672],{},"Try to upgrade to latest versions:",[674,675,676],"div",{},[288,677,678,692,706,719],{},[247,679,681],{"className":249,"code":680,"filename":293,"language":251,"meta":252,"style":252},"npm up @nuxt/image\n",[202,682,683],{"__ignoreMap":252},[256,684,685,687,690],{"class":258,"line":259},[256,686,293],{"class":262},[256,688,689],{"class":266}," up",[256,691,305],{"class":266},[247,693,695],{"className":249,"code":694,"filename":309,"language":251,"meta":252,"style":252},"yarn upgrade @nuxt/image\n",[202,696,697],{"__ignoreMap":252},[256,698,699,701,704],{"class":258,"line":259},[256,700,309],{"class":262},[256,702,703],{"class":266}," upgrade",[256,705,305],{"class":266},[247,707,709],{"className":249,"code":708,"filename":323,"language":251,"meta":252,"style":252},"pnpm up @nuxt/image\n",[202,710,711],{"__ignoreMap":252},[256,712,713,715,717],{"class":258,"line":259},[256,714,323],{"class":262},[256,716,689],{"class":266},[256,718,305],{"class":266},[247,720,722],{"className":249,"code":721,"filename":337,"language":251,"meta":252,"style":252},"bun update @nuxt/image\n",[202,723,724],{"__ignoreMap":252},[256,725,726,728,731],{"class":258,"line":259},[256,727,337],{"class":262},[256,729,730],{"class":266}," update",[256,732,305],{"class":266},[658,734,735],{},[661,736,737],{},"Try recreating lockfile:",[674,739,740],{},[247,741,743],{"className":249,"code":742,"language":251,"meta":252,"style":252},"npx nuxt upgrade --force\n",[202,744,745],{"__ignoreMap":252},[256,746,747,749,751,753],{"class":258,"line":259},[256,748,263],{"class":262},[256,750,267],{"class":266},[256,752,703],{"class":266},[256,754,755],{"class":266}," --force\n",[658,757,758,773],{},[661,759,760,761,503,764,767,768,772],{},"If there is still an error related to ",[202,762,763],{},"sharp",[202,765,766],{},"node-gyp",", it is probably because your OS architecture or NodeJS version is not included in pre-built binaries and needs to be built from source (for example, this sometimes occurs on Apple M1). Checkout ",[216,769,766],{"href":770,"rel":771},"https://github.com/nodejs/node-gyp#installation",[220]," for install requirements.",[661,774,775,776,781],{},"If none of the above worked, please ",[216,777,780],{"href":778,"rel":779},"https://github.com/nuxt/image/issues",[220],"open an issue"," and include error trace, OS, Node version and the package manager used for installing.",[783,784,785],"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 .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 .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":252,"searchDepth":390,"depth":390,"links":787},[788,789,790,791,795],{"id":236,"depth":390,"text":237},{"id":279,"depth":390,"text":280},{"id":428,"depth":390,"text":14},{"id":492,"depth":390,"text":493,"children":792},[793,794],{"id":531,"depth":402,"text":532},{"id":601,"depth":402,"text":602},{"id":652,"depth":390,"text":653},"Using image module in your Nuxt project is only one command away.","md",null,{},true,{"title":10,"description":796},"8JPk-xic_v_-_kNr6oyDFvJ_SF4UbVS0zNAd_ptyjcE",[798,804],{"title":14,"path":15,"stem":16,"description":805,"children":-1},"Nuxt Image is configured with sensible defaults.",1762265120426]