Skip to content

Latest commit

 

History

History
123 lines (93 loc) · 2.7 KB

1.installation.md

File metadata and controls

123 lines (93 loc) · 2.7 KB
Raw
description
Using image module in your Nuxt project is only one command away. ✨

Installation

Add @nuxt/image devDependency to your project:

:::::code-group ::::code-block{label="Yarn" active}

yarn add --dev @nuxt/image

:::: ::::code-block{label="NPM"}

npm install -D @nuxt/image

:::: :::::

Add the module to buildModules in your nuxt.config:

export default {
  target: 'static',
  buildModules: [
    '@nuxt/image',
  ]
}

:::alert{type="info"} If you have a server target and are using the default provider (ipx), make sure you add @nuxt/image to your modules instead to self-host your /_ipx endpoint.

export default {
  modules: [
    '@nuxt/image',
  ]
}

:::

:::alert{type="success"} You can now start using <nuxt-img> and <nuxt-picture> components in your Nuxt app ✨ :::

Configuration

Add an image section in your nuxt.config.js:

export default {
  image: {
    // Options
  }
}

See module options for available options.

TypeScript

If you're using Typescript, add the types to your "types" array in tsconfig.json after the @nuxt/types (Nuxt 2.9.0+) or @nuxt/vue-app entry.

{
  "compilerOptions": {
    "types": ["@nuxt/types", "@nuxt/image"]
  }
}

Upgrading

:::alert{type="warning"} Behavior and API changes might happen in 0.x releases of image module. Update with caution. :::

Troubleshooting

If an error occurs during installation:

  • Ensure using LTS version of NodeJS or latest update of 12.x, 14.x or 16.x (NodeJS Downloads page)

  • Try to upgrade to latest versions:

:::::code-group ::::code-block{label="yarn" active}

yarn upgrade @nuxt/image

:::: ::::code-block{label="npm"}

npm up @nuxt/image

:::: :::::

  • Try recreating lock-file:

:::::code-group ::::code-block{label="yarn" active}

rm yarn.lock && yarn

:::: ::::code-block{label="npm"}

rm package-lock.json && npm i

:::: :::::

  • If there is still an error related to sharp and node-gyp, 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 node-gyp for install requirements.

  • If none of the above worked, please open an issue and include error trace, OS, Node version and the package manager used for installing.