nuxt-best-practices

Guide Nuxt 3/4 developers in optimizing data fetching, code organization, SSR, and type safety.

51|3|Updated Jan 10, 2023

Search Tags:#typescript #best practices #performance #optimization #ssr #nuxt

Ready to run

npx skills add https://github.com/vinayakkulkarni/tileserver-rs --skill nuxt-best-practices

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nuxt-best-practices
Source: https://github.com/vinayakkulkarni/tileserver-rs/tree/main/.claude/skills/nuxt-best-practices
Command: npx skills add https://github.com/vinayakkulkarni/tileserver-rs --skill nuxt-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices to optimize Nuxt 3/4 applications for performance, maintainability, and developer experience.

Core Features & Use Cases

Performance Optimization: Covers data fetching, rendering modes, and bundle size.
Code Organization: Enforces clear structure for composables, types, and components.
SSR & Hydration: Ensures correct handling of server-side rendering and client-side hydration.
Use Case: Refactor a Nuxt application to improve its Lighthouse score, reduce load times, and make its codebase easier to manage and scale.

Quick Start

Apply the nuxt-best-practices skill to review and refactor the current Nuxt project's data fetching logic.

Frequently Asked Questions about nuxt-best-practices

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

FAQPage Schema

How do I optimize Nuxt 3 applications for better performance and maintainability?▼

You optimize Nuxt 3 applications by enforcing best practices for data fetching, code organization, server-side rendering, and type safety to improve Lighthouse scores and reduce load times.

What is the best way to structure composables and types in a Nuxt project?▼

The best way to structure composables and types in a Nuxt project is by enforcing clear code organization rules for component naming, type locations, and error handling to ensure maintainability.

How does server-side rendering and hydration work in Nuxt 3?▼

Server-side rendering and hydration in Nuxt 3 require correct handling practices to ensure client-side hydration matches server output, preventing errors and improving full-stack developer experience.

Can I use TypeScript to enforce type safety in Nuxt data fetching?▼

Yes, you can use TypeScript to enforce type safety in Nuxt data fetching by defining strict type locations and rules for efficient API interactions, ensuring robust full-stack development.

Does this approach support Nuxt 4 applications?▼

Yes, this approach supports Nuxt 4 applications, providing comprehensive guidelines to optimize rendering modes, bundle size, and data fetching for both Nuxt 3 and 4 full-stack environments.

Why are my Nuxt SSR components experiencing hydration errors?▼

Nuxt SSR components experience hydration errors when server-side rendering output mismatches client-side state, which requires enforcing strict best practices for correct handling and data fetching.