Modules — Installing & Using

Modules extend Nuxt with auto-registered components, composables, plugins, and config — most are one command away.

4 min read Level 2/5 #nuxt#modules

What you'll learn

Install a module with the nuxi module add command
Verify the module is added to the modules array in nuxt.config
Find and follow module docs for runtime usage

The Nuxt module ecosystem is huge. Want responsive images, a CMS, auth, internationalization, icons, fonts, or devtools? There’s almost certainly a module for it.

The One-Liner

npx nuxi module add @nuxt/image

This single command:

Installs the package as a dependency.
Adds the module to the modules array in nuxt.config.ts.
Runs any module-specific install hooks (creating folders, scaffolding files).

What Ends Up in nuxt.config

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    // module-specific config goes here
  },
})

Most modules read a top-level key matching their name. Check the module’s docs for available options.

Discovering Modules

The curated catalog lives at modules.nuxt.com. Categories include:

SEO — @nuxtjs/seo, nuxt-simple-sitemap
Auth — @sidebase/nuxt-auth, nuxt-auth-utils
Content — @nuxt/content
i18n — @nuxtjs/i18n
Fonts & icons — @nuxt/fonts, @nuxt/icon
Devtools — @nuxt/devtools

What a Module Gives You

Once installed, a module can auto-register:

Components (used directly in templates)
Composables (auto-imported)
Plugins (run at startup)
Server routes and middleware
Runtime config defaults

The benefit: zero-import ergonomics for entire feature areas.

@nuxt/image — Responsive, Optimized Images →