162 lines
3.5 KiB
Markdown
162 lines
3.5 KiB
Markdown
# 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
|
|
|
|
```vue
|
|
<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.
|
|
|
|
```typescript
|
|
// 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
|
|
|
|
```vue
|
|
<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`:
|
|
|
|
```javascript
|
|
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:
|
|
|
|
```typescript
|
|
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:
|
|
|
|
```typescript
|
|
// nuxt.config.ts
|
|
export default defineNuxtConfig({
|
|
fonts: {
|
|
families: [{ name: "Inter", provider: "google" }],
|
|
},
|
|
})
|
|
```
|
|
|
|
```vue
|
|
<style>
|
|
.text {
|
|
font-family: "Inter", sans-serif;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Scripts (@nuxt/scripts)
|
|
|
|
**Check:** `@nuxt/scripts` in package.json
|
|
|
|
Load third-party scripts efficiently:
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
useScript({
|
|
src: "https://www.googletagmanager.com/gtag/js",
|
|
async: true,
|
|
})
|
|
</script>
|
|
```
|