Nuxt modules

A module is a package that extends Nuxt itself: it adds components, composables, server handlers or changes the build. You already used one when you added Pinia. Ready-made modules exist for images, fonts, translations, authentication and much more; their list is on nuxt.com in the Modules section.

Installing

Add the official image module:

npx nuxi module add image

The command installs the @nuxt/image package and adds it to the config:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image']
})

The order in the modules array is the order of loading. After restarting npm run dev the module starts working.

Using it

The module added the <NuxtImg> component. It works like <img> but can resize the image to the size you need:

<!-- app/pages/index.vue -->
<template>
  <section>
    <NuxtImg src="/images/cover.jpg" width="600" alt="Blog cover" />
  </section>
</template>

The image is taken from the public/ folder. Look at the image address in the browser developer tools: the module serves a resized copy 600 pixels wide instead of the original file.

Module settings

A module usually reads its settings from a key with its name in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    quality: 80,
    format: ['webp']
  }
})

Now images are served as WebP with quality 80. The module's documentation lists its settings; the editor suggests them too, because the module adds types.

Popular modules

Removing

To turn a module off, remove it from the modules array and then uninstall the package: npm uninstall @nuxt/image. The module's components, such as <NuxtImg>, stop working after that, so replace them with ordinary tags.

Common mistake

Installing a module with npm install @nuxt/image and using <NuxtImg> right away. The package lands in node_modules, but Nuxt does not know about it until its name is in the modules array, and Vue warns about an unknown component. Install modules with npx nuxi module add: it both installs the package and registers it in the config.