nuxt

Nuxt.js Vue framework with SSR and auto-imports. Use for full-stack Vue applications.

7 stars

byG1Joshi

View on GitHub Installation ↓

Best use case

nuxt is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Nuxt.js Vue framework with SSR and auto-imports. Use for full-stack Vue applications.

Teams using nuxt should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/nuxt/SKILL.md --create-dirs "https://raw.githubusercontent.com/G1Joshi/Agent-Skills/main/skills/frameworks/nuxt/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/nuxt/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How nuxt Compares

Feature / Agent	nuxt	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Nuxt.js Vue framework with SSR and auto-imports. Use for full-stack Vue applications.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Nuxt

Nuxt is the full-stack framework for Vue. Nuxt 4 (2025) simplifies directory structure and enhances performance with the Nitro server engine.

## When to Use

- **Vue Applications**: The de-facto standard for production Vue apps.
- **Universal Rendering**: Switch between SSR, SSG, and CSR per-route.
- **Module Ecosystem**: rich modules (Nuxt Image, Nuxt Content, Pinia).

## Quick Start

Nuxt auto-imports components and composables.

```vue
<script setup>
// useFetch is auto-imported
const { data: quote } = await useFetch("/api/quote");
</script>

<template>
  <blockquote>{{ quote.text }}</blockquote>
</template>
```

## Core Concepts

### Nitro Engine

Nuxt's server engine. It builds your server to run anywhere (Node, Deno, Bun, Edge/Serverless) without config.

### Auto-Imports

You don't need to `import { ref } from 'vue'` or `import UserCard from './components/UserCard.vue'`. Nuxt does it for you.

### Server Routes

`server/api/hello.ts` creates an API endpoint `/api/hello`.

## Best Practices (2025)

**Do**:

- **Use `useFetch`**: It handles SSR data fetching correctly (preventing double-fetch on client).
- **Use Nuxt Modules**: Don't manually configure libraries. Use `@nuxt/image`, `@nuxtjs/tailwindcss`.
- **Use `app/` directory**: Nuxt 4 defaults code to `app/` to keep root clean.

**Don't**:

- **Don't use `axios`**: Use the built-in `$fetch` (OFetch) which is smarter and lighter.

## References

- [Nuxt Documentation](https://nuxt.com/)