15 Must-Have Nuxt Modules to Supercharge Your Development in 2025

The Nuxt ecosystem now includes hundreds of modules.

But which ones actually deserve a spot in your next project?

Everyone's already using the obvious choices.

So here are 15 Nuxt modules that strike the balance between power and practicality. They'll save you hours of configuration headaches.

Here they are, in no particular order:

1. @nuxtjs/color-mode

This official Nuxt module handles dark and light mode with automatic system preference detection and persistence.

It adds .dark-mode or .light-mode classes to your HTML element for easy CSS targeting. This makes theme switching straightforward.

<script setup>
const colorMode = useColorMode()

const toggleTheme = () => {
  colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
}
</script>

<template>
  <button @click="toggleTheme">
    Switch to {{ colorMode.preference === 'dark' ? 'light' : 'dark' }} mode
  </button>
</template>

Documentation: https://color-mode.nuxtjs.org/

GitHub: https://github.com/nuxt-modules/color-mode

2. @nuxt/content

Nuxt Content transforms your Nuxt application into a file-based CMS with version control and type safety.

Write content in Markdown, YAML, CSV, or JSON in your content/ directory. Then query and display it using a MongoDB-like API.

You can even use Vue components directly in Markdown with automatic syntax highlighting. Perfect for documentation sites and blogs.

<script setup>
const { data: article } = await useAsyncData(() =>
  queryCollection('articles')
    .where('featured', true)
    .first()
)
</script>

<template>
  <ContentRenderer v-if="article" :value="article" />
</template>

Documentation: https://content.nuxt.com/

3. @vite-pwa/nuxt

This zero-configuration PWA plugin transforms your Nuxt app into an installable, offline-ready experience.

Built on Vite Plugin PWA and Workbox, it automatically generates service workers and web manifests. You get Workbox caching strategies and automatic updates.

No complex setup required.

Documentation: https://vite-pwa-org.netlify.app/frameworks/nuxt

GitHub: https://github.com/vite-pwa/nuxt

4. @nuxt/icon

The official Nuxt icon module provides instant access to 200,000+ icons from Iconify through a simple <Icon> component.

On-demand loading keeps your bundle lean. You get access to Material Design, FontAwesome, Heroicons, and dozens more collections.

Plus support for emojis and custom SVGs. All optimized for SSR.

<template>
  <nav class="social-links">
    <a href="<https://github.com/yourname>">
      <Icon name="mdi:github" size="32" />
    </a>
    <a href="<https://twitter.com/yourname>">
      <Icon name="mdi:twitter" size="32" color="#1DA1F2" />
    </a>
    <a href="mailto:you@example.com">
      <Icon name="heroicons:envelope" size="32" />
    </a>
  </nav>
</template>

Documentation: https://nuxt.com/modules/icon

GitHub: https://github.com/nuxt/icon

5. @nuxtjs/supabase

The official Nuxt module for Supabase provides first-class integration with authentication, database operations, and storage management.

Auto-imported composables work across client and server contexts with full SSR support. You get automatic authentication state and JWT token handling built in.

The module generates TypeScript types directly from your schemas. And it supports OAuth, email/password, and magic link authentication out of the box.

<script setup>
const supabase = useSupabaseClient()
const user = useSupabaseUser()

const { data: bookmarks } = await useAsyncData('bookmarks', async () => {
  const { data } = await supabase
    .from('bookmarks')
    .select('*')
    .order('created_at', { ascending: false })
  return data
})

const signInWithGithub = async () => {
  await supabase.auth.signInWithOAuth({
    provider: 'github'
  })
}
</script>

<template>
  <div>
    <div v-if="user">
      <h1>Your Bookmarks</h1>
      <div v-for="bookmark in bookmarks" :key="bookmark.id">
        {{ bookmark.title }}
      </div>
    </div>
    <button v-else @click="signInWithGithub">
      Sign in with GitHub
    </button>
  </div>
</template>

Documentation: https://supabase.nuxtjs.org

GitHub: https://github.com/nuxt-modules/supabase

6. @vueuse/nuxt

The official Nuxt integration for VueUse brings 200+ reactive utilities for common tasks. You get mouse tracking, dark mode detection, localStorage persistence, and browser APIs.

All composables auto-import with full TypeScript support and SSR compatibility. No more writing boilerplate for functionality you've built dozens of times.

<script setup>
// No imports needed!
const { x, y } = useMouse()
const isDark = usePreferredDark()
const wishlist = useLocalStorage('wishlist', [])
const isOnline = useOnline()

const addToWishlist = (item) => {
  wishlist.value.push(item)
}
</script>

<template>
  <div>
    <p>Mouse position: {{ x }}, {{ y }}</p>
    <p>Dark mode: {{ isDark ? 'Yes' : 'No' }}</p>
    <p>Connection: {{ isOnline ? 'Online' : 'Offline' }}</p>
    <p>Wishlist items: {{ wishlist.length }}</p>
  </div>
</template>

Documentation: https://vueuse.org/nuxt/readme.html

GitHub: https://github.com/vueuse/vueuse

7. @nuxt/scripts

Developed by the Nuxt core team and Google's Chrome Aurora team, this module optimizes third-party scripts like Google Analytics, Intercom, and YouTube.

It uses intelligent, non-blocking loading triggered by page load, user interaction, or consent. You get 20+ pre-configured integrations with type-safe composables.

The module includes built-in privacy controls. And it provides facade components for heavy integrations.

<script setup>
const { proxy } = useScriptGoogleAnalytics({
  id: 'G-XXXXXXXXXX'
})

const completePurchase = (amount) => {
  // Track events even before script loads
  proxy.gtag('event', 'purchase', {
    value: amount,
    currency: 'USD'
  })
}
</script>

Documentation: https://scripts.nuxt.com

GitHub: https://github.com/nuxt/scripts

8. @nuxtjs/i18n

The official internationalization solution for Nuxt applications, powered by Vue I18n, provides a complete toolkit for building multilingual websites with minimal configuration.

It automates locale-aware routing with automatic URL generation. Translation files are lazy-loaded for better performance.

You also get SEO metadata for each language, browser language detection, and locale-specific redirects.

<template>
  <div>
    <h1>{{ $t('greeting') }}</h1>
    <p>{{ $t('welcomeMessage', { name: user.name }) }}</p>
    <p>{{ $t('itemsInCart', { count: cart.length }) }}</p>
  </div>
</template>

Documentation: https://i18n.nuxtjs.org/

GitHub: https://github.com/nuxt-modules/i18n

9. @nuxt/fonts

A zero-configuration module that automatically detects and optimizes web fonts from your CSS declarations.

Just use font-family in your CSS. The module handles loading optimization and layout shift prevention through font metrics.

It works with six providers: Google Fonts, Bunny, Fontshare, Fontsource, Adobe, and local fonts. Caching is handled automatically.

<template>
  <div class="hero">
    <h1 class="title">Welcome to Our Bakery</h1>
    <p class="subtitle">Fresh bread daily</p>
  </div>
</template>

<style scoped>
.title {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
}

.subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
}
</style>

Documentation: https://fonts.nuxt.com

GitHub: https://github.com/nuxt/fonts

10. @nuxt/ui

A comprehensive UI library with 100+ production-ready components built on Reka UI and Tailwind CSS v4.

The components are fully accessible with WAI-ARIA compliance, keyboard navigation, and screen reader support. You get beautiful defaults right out of the box.

TypeScript-first development makes everything type-safe. Theming is customizable, and setup requires zero configuration.

So you can focus on features instead of styling buttons.

<template>
  <UApp>
    <UContainer>
      <UInput
        v-model="query"
        placeholder="Search recipes..."
        size="lg"
      />
      <UButton
        color="primary"
        size="lg"
        @click="search"
      >
        Find Recipes
      </UButton>
    </UContainer>
  </UApp>
</template>

Documentation: https://ui.nuxt.com

GitHub: https://github.com/nuxt/ui

Vue School Course: https://vueschool.io/courses/nuxt-ui-build-a-dashboard-template

The official Nuxt integration for Pinia handles SSR serialization and state hydration automatically. Stores auto-import from your stores folder, and composables like defineStore() and storeToRefs() work out of the box with full SSR support for Nuxt 3 and 4 applications.

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    total: 0
  }),
  actions: {
    addItem(item) {
      this.items.push(item)
      this.total += item.price
    },
    removeItem(itemId) {
      const index = this.items.findIndex(i => i.id === itemId)
      if (index > -1) {
        this.total -= this.items[index].price
        this.items.splice(index, 1)
      }
    }
  }
})

<script setup>
const cart = useCartStore()
</script>

<template>
  <div>
    <p>Items: {{ cart.items.length }}</p>
    <p>Total: ${{ cart.total }}</p>
  </div>
</template>

Documentation: https://pinia.vuejs.org/ssr/nuxt.html

GitHub: https://github.com/vuejs/pinia

12. @nuxtjs/seo

An all-in-one technical SEO solution that bundles six specialized modules into one package.

You get robots.txt control, XML sitemaps, and Open Graph image generation. Schema.org structured data is included along with link checking and SEO utilities.

All components work together with centralized configuration. Minimal effort required.

Documentation: https://nuxtseo.com/

GitHub: https://github.com/harlan-zw/nuxt-seo

13. @nuxt/image

A plug-and-play image optimization module that automates responsive image generation, lazy loading, and modern format conversion (WebP, AVIF).

You get built-in support for 20+ image providers (Cloudinary, Imgix, and more). Responsive sizing works automatically, and images optimize for retina displays.

All through a drop-in <NuxtImg> component that replaces native <img> elements.

<template>
  <div class="gallery">
    <NuxtImg
      src="/products/sourdough-loaf.jpg"
      alt="Fresh sourdough loaf"
      sizes="100vw sm:50vw md:400px"
      width="800"
      height="600"
      format="webp"
      quality="85"
      loading="lazy"
    />
  </div>
</template>

Documentation: https://image.nuxt.com/

GitHub: https://github.com/nuxt/image

14. @nuxtjs/tailwindcss

The official Nuxt module for seamless Tailwind CSS integration with zero configuration required.

You get built-in CSS nesting support and a configuration viewer for visual discovery. The module works with Nuxt Layers.

And you can expose your Tailwind config to your runtime app. You can also extend it through hooks.

Documentation: https://tailwindcss.nuxtjs.org/

GitHub: https://github.com/nuxt-modules/tailwindcss

15. @nuxtjs/sitemap

Automatically generates XML sitemaps from your Nuxt application. It supports static and dynamic routes, CMS integration, lastmod timestamps, and image discovery.

Sitemaps stay up-to-date as your site changes. The module integrates with Nuxt I18n and Nuxt Content.

This helps search engines like Google discover and index your pages more easily.

Documentation: https://nuxtseo.com/sitemap

GitHub: https://github.com/nuxt-modules/sitemap

Conclusion

The Nuxt ecosystem continues to thrive in 2025 with powerful tools that eliminate complexity and speed up development.

Whether you're building a content-rich blog with @nuxt/content, creating a multilingual application with @nuxtjs/i18n, or optimizing performance with @nuxt/image and @nuxt/scripts, these modules represent the best of what the community offers.

The beauty of Nuxt modules is their "install and go" philosophy. Most require zero or minimal configuration. They come with production-ready functionality out of the box.

Start with the modules that solve your immediate needs. You'll discover how they transform your development workflow.