[{"_path":"/getting-started/installation","_draft":false,"_partial":false,"_empty":false,"title":"Installation","description":"Using image module in your Nuxt project is only one command away. ✨","excerpt":{"type":"root","children":[{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You are reading the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v0"}]},{"type":"text","value":" documentation compatible with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 2"}]},{"type":"text","value":". Check out "},{"type":"element","tag":"a","props":{"href":"https://v1.image.nuxtjs.org/get-started","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"v1.image.nuxtjs.org"}]},{"type":"text","value":" for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" support. ("},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/discussions/548","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Announcement"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" devDependency to your project:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add --dev @nuxt/image@v0\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add --dev @nuxt/image@v0\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install -D @nuxt/image@v0\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install -D @nuxt/image@v0\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add the module to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buildModules"}]},{"type":"text","value":" in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  target: 'static',\n  buildModules: [\n    '@nuxt/image',\n  ]\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  target: 'static',\n  buildModules: [\n    '@nuxt/image',\n  ]\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" target (default) and are using the default provider, add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" section instead:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  modules: [\n    '@nuxt/image',\n  ]\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  modules: [\n    '@nuxt/image',\n  ]\n}\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can now start using "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-picture"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]}]},{"type":"text","value":" components in your Nuxt app ✨"}]}]},{"type":"element","tag":"h2","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" section in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    // Options\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    // Options\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/api/options"},"children":[{"type":"text","value":"module options"}]},{"type":"text","value":" for available options."}]},{"type":"element","tag":"h2","props":{"id":"typescript"},"children":[{"type":"text","value":"TypeScript"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using Typescript, add the types to your \"types\" array in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsconfig.json"}]},{"type":"text","value":" after the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/types"}]},{"type":"text","value":" (Nuxt 2.9.0+) or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/vue-app"}]},{"type":"text","value":" entry."}]},{"type":"element","tag":"code","props":{"code":"{\n  \"compilerOptions\": {\n    \"types\": [\"@nuxt/types\", \"@nuxt/image\"]\n  }\n}\n","filename":"tsconfig.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  \"compilerOptions\": {\n    \"types\": [\"@nuxt/types\", \"@nuxt/image\"]\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"upgrading"},"children":[{"type":"text","value":"Upgrading"}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Behavior and API changes might happen in 0.x releases of image module. Update with caution."}]}]},{"type":"element","tag":"h2","props":{"id":"troubleshooting"},"children":[{"type":"text","value":"Troubleshooting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If an error occurs during installation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure using LTS version of NodeJS or latest update of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"12.x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"14.x"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"16.x"}]},{"type":"text","value":" ("},{"type":"element","tag":"a","props":{"href":"https://nodejs.org/en/download/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NodeJS Downloads page"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try to upgrade to latest versions:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn upgrade @nuxt/image\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn upgrade @nuxt/image\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm up @nuxt/image\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm up @nuxt/image\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try recreating lock-file:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"rm yarn.lock && yarn\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"rm yarn.lock && yarn\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"rm package-lock.json && npm i\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"rm package-lock.json && npm i\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If there is still an error related to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":", it is is probably becase your OS architecture or NodeJS version is not included in pre-built binaries and needs to built from source (for example, this sometimes occurs on Apple M1). Checkout "},{"type":"element","tag":"a","props":{"href":"https://github.com/nodejs/node-gyp#installation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":" for install requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If none of the above worked, please "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"open an issue"}]},{"type":"text","value":" and include error trace, OS, Node version and the package manager used for installing."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You are reading the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v0"}]},{"type":"text","value":" documentation compatible with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 2"}]},{"type":"text","value":". Check out "},{"type":"element","tag":"a","props":{"href":"https://v1.image.nuxtjs.org/get-started","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"v1.image.nuxtjs.org"}]},{"type":"text","value":" for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" support. ("},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/discussions/548","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Announcement"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" devDependency to your project:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add --dev @nuxt/image@v0\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"yarn add --dev @nuxt/image@v0"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install -D @nuxt/image@v0\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"npm install -D @nuxt/image@v0"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add the module to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buildModules"}]},{"type":"text","value":" in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  target: 'static',\n  buildModules: [\n    '@nuxt/image',\n  ]\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"target"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"'static'"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"buildModules"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"'@nuxt/image'"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" target (default) and are using the default provider, add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" section instead:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  modules: [\n    '@nuxt/image',\n  ]\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"'@nuxt/image'"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can now start using "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-picture"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]}]},{"type":"text","value":" components in your Nuxt app ✨"}]}]},{"type":"element","tag":"h2","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" section in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    // Options\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-077a9c"},"children":[{"type":"text","value":"// Options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/api/options"},"children":[{"type":"text","value":"module options"}]},{"type":"text","value":" for available options."}]},{"type":"element","tag":"h2","props":{"id":"typescript"},"children":[{"type":"text","value":"TypeScript"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using Typescript, add the types to your \"types\" array in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsconfig.json"}]},{"type":"text","value":" after the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/types"}]},{"type":"text","value":" (Nuxt 2.9.0+) or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/vue-app"}]},{"type":"text","value":" entry."}]},{"type":"element","tag":"code","props":{"code":"{\n  \"compilerOptions\": {\n    \"types\": [\"@nuxt/types\", \"@nuxt/image\"]\n  }\n}\n","filename":"tsconfig.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"\"compilerOptions\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"\"types\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"\"@nuxt/types\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"\"@nuxt/image\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"upgrading"},"children":[{"type":"text","value":"Upgrading"}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Behavior and API changes might happen in 0.x releases of image module. Update with caution."}]}]},{"type":"element","tag":"h2","props":{"id":"troubleshooting"},"children":[{"type":"text","value":"Troubleshooting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If an error occurs during installation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure using LTS version of NodeJS or latest update of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"12.x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"14.x"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"16.x"}]},{"type":"text","value":" ("},{"type":"element","tag":"a","props":{"href":"https://nodejs.org/en/download/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NodeJS Downloads page"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try to upgrade to latest versions:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn upgrade @nuxt/image\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"yarn upgrade @nuxt/image"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"npm up @nuxt/image\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"npm up @nuxt/image"}]}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try recreating lock-file:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"rm yarn.lock && yarn\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"rm yarn.lock && yarn"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"rm package-lock.json && npm i\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"rm package-lock.json && npm i"}]}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If there is still an error related to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":", it is is probably becase your OS architecture or NodeJS version is not included in pre-built binaries and needs to built from source (for example, this sometimes occurs on Apple M1). Checkout "},{"type":"element","tag":"a","props":{"href":"https://github.com/nodejs/node-gyp#installation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":" for install requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If none of the above worked, please "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"open an issue"}]},{"type":"text","value":" and include error trace, OS, Node version and the package manager used for installing."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-077a9c{color:#7F848E}.ct-89f603{color:#98C379}.ct-a540ab{color:#E06C75}.ct-e9b8cc{color:#C678DD}.ct-ad13a9{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"configuration","depth":2,"text":"Configuration"},{"id":"typescript","depth":2,"text":"TypeScript"},{"id":"upgrading","depth":2,"text":"Upgrading"},{"id":"troubleshooting","depth":2,"text":"Troubleshooting"}]}},"_type":"markdown","_id":"content:1.getting-started:1.installation.md","_source":"content","_file":"1.getting-started/1.installation.md","_extension":"md"},{"_path":"/getting-started/static","_draft":false,"_partial":false,"_empty":false,"title":"Static Images","description":"Optimizing images for static websites.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are building a static site Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. (This only works with server-side rendered pages. If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssr: false"}]},{"type":"text","value":", won't work)"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider=\"static\""}]},{"type":"text","value":" directly. (See "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"text","value":"component documentation"}]},{"type":"text","value":" for more information.)"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are building a static site Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. (This only works with server-side rendered pages. If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssr: false"}]},{"type":"text","value":", won't work)"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider=\"static\""}]},{"type":"text","value":" directly. (See "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"text","value":"component documentation"}]},{"type":"text","value":" for more information.)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.getting-started:3.static.md","_source":"content","_file":"1.getting-started/3.static.md","_extension":"md"}]