gh-lttr-claude-marketplace-plugins-nuxt/skills/nuxt/references/nuxt-modules.md

Nuxt Modules Reference

Check package.json for installed modules before suggesting module-specific features.

Image Optimization (@nuxt/image)

Check: @nuxt/image in package.json

Provides optimized image components with automatic format conversion and responsive images. For comprehensive guidance, see references/nuxt-image.md.

Content Management (@nuxt/content)

Check: @nuxt/content in package.json

File-based CMS for Nuxt with markdown, YAML, and JSON support. For comprehensive guidance including queries, components, and content navigation, see references/nuxt-content.md.

Icon Management (@nuxt/icon)

Check: @nuxt/icon in package.json

Icon Component

<Icon name="heroicons:home" size="24" />
<Icon name="mdi:github" class="text-2xl" />

UI Components (@nuxt/ui)

Check: @nuxt/ui in package.json

Provides pre-built components with Tailwind CSS. For comprehensive Nuxt UI guidance including setup, v3/v4 differences, and migration, see references/nuxt-ui.md.

SEO (@nuxtjs/seo)

Check: @nuxtjs/seo in package.json

Provides SEO utilities including sitemap, robots.txt, and OG images.

// Auto-generates sitemap
// Configure in nuxt.config.ts
export default defineNuxtConfig({
  site: {
    url: "https://example.com",
    name: "My Site",
  },
})

Internationalization (@nuxtjs/i18n)

Check: @nuxtjs/i18n in package.json

Provides internationalization with auto-imports, locale routing, and SEO support. For comprehensive guidance including setup, translations, and routing, see references/nuxt-i18n.md.

Tailwind CSS (@nuxtjs/tailwindcss)

Check: @nuxtjs/tailwindcss in package.json

Auto-configured Tailwind CSS integration. For comprehensive guidance including setup, configuration, dark mode, and best practices, see references/tailwind.md.

Color Mode (@nuxtjs/color-mode)

Check: @nuxtjs/color-mode in package.json

Toggle Dark Mode

<script setup lang="ts">
const colorMode = useColorMode()

function toggleDark() {
  colorMode.preference = colorMode.value === "dark" ? "light" : "dark"
}
</script>

<template>
  <button @click="toggleDark">
    {{ colorMode.value === "dark" ? "🌞" : "🌙" }}
  </button>
</template>

ESLint (@nuxt/eslint)

Check: @nuxt/eslint in package.json

Provides auto-configured ESLint with Nuxt-specific rules. Configuration in eslint.config.mjs:

import { createConfigForNuxt } from "@nuxt/eslint-config/flat"

export default createConfigForNuxt({
  features: {
    stylistic: true,
  },
})

Security (nuxt-security)

Check: nuxt-security in package.json

Security Headers

Automatically applies security headers. Configure in nuxt.config.ts:

export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        "img-src": ["'self'", "https:", "data:"],
      },
    },
    rateLimiter: {
      tokensPerInterval: 150,
      interval: "hour",
    },
  },
})

Fonts (@nuxt/fonts)

Check: @nuxt/fonts in package.json

Automatically optimizes and loads fonts:

// nuxt.config.ts
export default defineNuxtConfig({
  fonts: {
    families: [{ name: "Inter", provider: "google" }],
  },
})

<style>
.text {
  font-family: "Inter", sans-serif;
}
</style>

Scripts (@nuxt/scripts)

Check: @nuxt/scripts in package.json

Load third-party scripts efficiently:

<script setup lang="ts">
useScript({
  src: "https://www.googletagmanager.com/gtag/js",
  async: true,
})
</script>