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