nuxt

Build universal Vue applications with SSR, file-based routing, and auto-imports.

2|Updated Jun 13, 2023
One-click install
npx skills add https://github.com/joaoprocopio/tooling --skill nuxt-joaoprocopio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt
Source: https://github.com/joaoprocopio/tooling/tree/main/skills/nuxt
Command: npx skills add https://github.com/joaoprocopio/tooling --skill nuxt-joaoprocopio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Nuxt provides a framework to build universal Vue applications with SSR, file-based routing, auto-imports, and a modular plugin system, simplifying full-stack development.

Core Features & Use Cases

  • SSR + CSR: Enables server-side rendering with hydration for fast, SEO-friendly pages.
  • File-based Routing & Modules: Auto-generates routes from the file system and supports modules for extensibility.
  • Data Fetching & Middleware: Integrates useFetch/useAsyncData, Nitro server engine, and middleware for robust workflows.
  • Deployment Flexibility: Works with Nitro across Node.js, serverless, and edge environments.

Quick Start

Create a new Nuxt project and start a development server to begin building a universal Vue app.

Frequently Asked Questions about nuxt

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does server-side rendering work with Vue for SEO-friendly pages?

Server-side rendering with Vue generates HTML on the server and hydrates it on the client, enabling fast, SEO-friendly pages. Nuxt provides this SSR capability out of the box alongside hybrid rendering options for full-stack applications.

How do I set up file-based routing and auto-imports in a Vue application?

File-based routing and auto-imports in a Vue application are set up by structuring your directory files, which auto-generates the corresponding routes. Nuxt handles this configuration automatically, simplifying full-stack development without manual route declarations.

Can I deploy a Vue app to serverless or edge environments?

Yes, you can deploy Vue apps to serverless or edge environments using the Nitro server engine. Nuxt integrates Nitro to provide deployment flexibility across Node.js, serverless platforms, and edge networks for scalable full-stack projects.

What is the best way to fetch data and apply middleware in a universal Vue app?

The best way to fetch data and apply middleware in a universal Vue app is using built-in composables like useFetch and useAsyncData. Nuxt integrates these with its routing system to provide robust data fetching and middleware workflows.

Does Nuxt support a modular plugin system for full-stack development?

Yes, Nuxt supports a modular plugin system for full-stack development. It provides a rich module ecosystem that allows you to extend functionality and build scalable universal Vue applications tailored to your project requirements.

When do I need hybrid rendering instead of standard server-side rendering?

You need hybrid rendering instead of standard server-side rendering when your application requires mixing SSR with client-side rendering or static generation. Nuxt supports hybrid rendering across different environments to optimize performance and SEO per page.