Nuxt Modules

Creating and Using Nuxt Modules

Nuxt modules are functions that extend Nuxt's core functionality. They can add features, integrate libraries, modify configuration, and hook into Nuxt's lifecycle.

Modules are the foundation of the Nuxt ecosystem, enabling features like @nuxt/content, @nuxtjs/i18n, and many others.

Official Nuxt Modules

The Nuxt team maintains several official modules:

@nuxt/content - File-based CMS for Vue content
@nuxt/image - Optimized image component
@nuxt/devtools - Developer tools for debugging
@nuxtjs/i18n - Internationalization
@nuxtjs/color-mode - Dark/light mode
@nuxtjs/seo - SEO and meta tags
@pinia/nuxt - State management
@vueuse/nuxt - Collection of Vue composition utilities

Browse all official modules →

Community Modules

The Nuxt community has created hundreds of modules for various use cases:

nuxt-auth-utils - Authentication utilities
@nuxtjs/tailwindcss - Tailwind CSS integration
@nuxtjs/supabase - Supabase integration
@nuxt/ui - Fully styled UI components
nuxt-security - Security headers and best practices
@vite-pwa/nuxt - PWA support

Explore community modules →

Tip: Always check the Nuxt Modules directory before building custom functionality. There's likely a module that already solves your problem!

Module Anatomy

A basic module is a function that receives module options and the Nuxt instance:

// modules/my-module.ts
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    // Default options
  },
  setup(options, nuxt) {
    // Module logic
  }
})

What Modules Can Do

Modules can:

✅ Add components, composables, and plugins
✅ Modify Nuxt configuration
✅ Hook into build process
✅ Add server middleware and routes
✅ Register auto-imports
✅ Extend webpack/vite config

Hooks

Modules can hook into Nuxt's lifecycle:

setup(options, nuxt) {
  nuxt.hook('ready', async (nuxt) => {
    console.log('Nuxt is ready!')
  })

  nuxt.hook('build:done', () => {
    console.log('Build complete!')
  })
}

Adding Components

Modules can register components to be auto-imported:

import { addComponent, createResolver } from '@nuxt/kit'

setup(options, nuxt) {
  const resolver = createResolver(import.meta.url)

  addComponent({
    name: 'MyComponent',
    filePath: resolver.resolve('./runtime/MyComponent.vue')
  })
}

Challenge

Create a simple module that adds a global component:

Create modules/my-module.ts that:
- Uses defineNuxtModule from @nuxt/kit
- Adds a component called HelloModule that displays a greeting
- For simplicity, inline the component template using addComponent
Register the module in nuxt.config.ts
Use the HelloModule component in app.vue

Pitfall: Watch out for circular dependencies! Modules run during the build process, so they can't import from your app code.

Tip: Use @nuxt/kit helpers like addComponent, addPlugin, addServerHandler instead of manually modifying config.

If you get stuck, you can check the solution by clicking the button below.

Modules are powerful for creating reusable functionality across Nuxt projects. Start simple, and gradually add more features as needed.

Plugins

Composables