Nuxt 3 Complete Guide: Building Modern Vue Applications
Embark on mastering Nuxt 3, the revolutionary Vue framework rebuilt from the ground up with Composition API, TypeScript-first architecture, and Nitro engine delivering exceptional performance for modern web applications requiring server-side rendering, static generation, or hybrid rendering strategies. This exhaustive guide begins with architectural understanding differentiating Nuxt 3 from its predecessor: automatic imports eliminating tedious import statements, file-based routing with powerful dynamic segments and nested layouts, unified data fetching through composables like useFetch and useAsyncData that work seamlessly across SSR and client-side contexts, and Nitro server engine enabling deployment flexibility from traditional Node servers to edge runtime environments like Cloudflare Workers or Vercel Edge Functions.
Installation and project scaffolding cover nuxi CLI mastery for generating new projects with optimal configurations, understanding directory structure conventions where each folder serves specific purposes, and configuring nuxt. config. ts for environment-specific behaviors, module integration, and build optimization.
Why this matters
Component development explores auto-imported components from components directory, creating reusable composition utilities in composables folder with proper TypeScript typing, implementing layouts for shared page structures with default and custom variants, and leveraging pages directory for automatic route generation including dynamic params, catch-all routes, and programmatic navigation. Advanced routing techniques reveal middleware for authentication guards and authorization logic, route validation ensuring params meet business requirements, nested routes building complex hierarchical page structures, and programmatic route manipulation through navigateTo composable. Server-side capabilities demonstrate building API routes in server/api directory with automatic endpoint generation, implementing server middleware for request preprocessing, handling form submissions with server-side validation, and integrating with databases through Prisma or Drizzle ORM within Nuxt server context.
Data fetching patterns compare useFetch for external API calls with automatic caching, useAsyncData for custom async operations with manual cache keys, useState for reactive state management persisting across client-side navigation, and useLazyFetch for deferred loading improving initial page performance. State management evolution shows when Pinia integration provides value for complex shared state versus when Nuxt built-in composables suffice for simpler scenarios, implementing stores with TypeScript type safety, and managing authentication state with persistent sessions. Hybrid rendering strategies explain when SSG provides optimal performance for content-heavy sites, when SSR delivers dynamic personalization, when ISR balances static performance with fresh content, and configuring per-route rendering modes within single applications through routeRules.
How to put it to work
Module ecosystem exploration covers essential modules like @nuxt/content for file-based CMS functionality, @nuxtjs/tailwindcss for styling integration, @pinia/nuxt for state management, nuxt-icon for icon solutions, and building custom modules that extend Nuxt capabilities. Performance optimization techniques include component lazy loading with Lazy prefix, route-level code splitting, image optimization with Nuxt Image module, implementing service workers for offline functionality, and leveraging Nitro caching strategies for API responses. SEO implementation demonstrates useHead composable for meta tag management, structured data injection for rich search results, sitemap generation with @nuxtjs/sitemap, and ensuring proper SSR for search engine crawlers.
Testing strategies cover Vitest integration for unit testing composables and components, Playwright for end-to-end testing with SSR considerations, and testing data fetching logic with mock server responses. Deployment workflows guide production builds with optimization enabled, deploying to Vercel with zero configuration, hosting on Netlify with proper redirects and headers, containerizing with Docker for self-hosted environments, and utilizing Cloudflare Pages for global edge deployment with minimal latency.
Working example
typescript · copy and adapt
// pages/index.vue - Nuxt 3 Page Component
<script setup lang="ts">
// Auto-imports: no need to import ref, computed, useFetch, etc.
const { data: posts } = await useFetch('/api/posts', '$flaVpt6xri')
const count = ref(0)
// SEO with useHead
useHead({
title: 'Home Page',
meta: [
{ name: 'description', content: 'Welcome to my Nuxt 3 app' }
]
})
</script>
<template>
<div>
<h1>My Posts</h1>
<ArticleCard v-for="post in posts" :key="post.id" :post="post" />
</div>
</template>
// server/api/posts.ts - API Route
export default defineEventHandler(async (event) => {
// Server-side only code
const posts = await $fetch('https://api.example.com/posts')
return posts
})
// composables/useUser.ts - Auto-imported Composable
export const useUser = () => {
const user = useState('user', () => null)
const fetchUser = async () => {
const { data } = await useFetch('/api/user')
user.value = data.value
}
return { user, fetchUser }
}
// nuxt.config.ts - Configuration
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
routeRules: {
'/': { prerender: true }, // SSG
'/admin/**': { ssr: false }, // CSR
'/api/**': { cors: true }
}
})Keep these in view
Key points
- 01NuxtUse this as a checkpoint when you test the approach in your own workflow.
- 02VueUse this as a checkpoint when you test the approach in your own workflow.
- 03SSRUse this as a checkpoint when you test the approach in your own workflow.
- 04JavaScriptUse this as a checkpoint when you test the approach in your own workflow.
Practical next step
Start with the smallest useful version, keep the constraints from this guide visible, and verify the result in your own environment. Tools change quickly; the durable skill is knowing what to check and why.
Editorial note: WiseyJoy articles are independently assembled for education. Product names belong to their respective owners. If you find an outdated step, email [email protected] so we can review it.
Related field notes
Dec 5, 2024
Tailwind CSS Advanced Techniques: Beyond the Basics
Transcend basic utility usage and unlock Tailwind CSS full potential through advanced configuration strategies, custom plugin development, sophisticated animation systems, and performance optimizations that maintain development velocity while delivering production-ready stylesheets optimized for real-world performance constraints. This advanced masterclass begins with deep customization through tailwind.config.js, extending the default theme with brand-specific color palettes using semantic naming conventions that convey intent rather than appearance, defining custom spacing scales that align with design system requirements, and creating typography configurations that ensure consistent text hierarchy across applications. Plugin architecture exploration reveals building custom utilities that encapsulate complex styling patterns, creating variant modifiers that extend responsive, hover, and focus states with custom conditions like data attributes or parent selectors, and developing component plugins that generate complete UI patterns with single class names while maintaining Tailwind philosophy. Advanced composition patterns demonstrate extracting components without sacrificing utility-first benefits through @apply directive when appropriate, building design system abstractions that balance reusability with flexibility, and implementing CSS custom properties integration for runtime theming supporting light/dark modes and user preference systems. Animation mastery covers extending animation and keyframes configuration with custom motion designs, implementing sophisticated multi-step animations coordinating multiple properties, creating performant transitions using GPU-accelerated properties, and building micro-interactions that enhance perceived performance through strategic loading states and skeleton screens. Responsive design advances beyond basic breakpoints into container queries for component-based responsiveness, implementing fluid typography using clamp functions for smooth scaling across viewport ranges, and developing adaptive layouts that reorganize content structure rather than merely adjusting sizes. Dark mode implementation reveals multiple strategies from class-based switching enabling user preference toggles, media query approach respecting system preferences, and building sophisticated theme systems supporting arbitrary color schemes beyond binary light/dark options. Performance optimization techniques address purge configuration ensuring production builds eliminate unused styles while preserving dynamic class generation, implementing JIT mode for instant compilation during development with production parity, analyzing bundle sizes identifying optimization opportunities, and lazy loading stylesheets for route-based code splitting in large applications. Custom variant creation enables powerful utility extensions like group-hover for parent-based styling, peer variants for sibling relationship styling, arbitrary variants targeting specific selectors beyond Tailwind defaults, and stacking variants building complex multi-condition utilities. Form styling strategies develop consistent input appearances across browsers, implementing custom checkbox and radio button designs maintaining accessibility, building multi-step form layouts with progress indication, and styling validation states providing clear user feedback. Component library integration demonstrates wrapping headless UI libraries with Tailwind styling maintaining separation of behavior and presentation, building design system documentation with Storybook showcasing component variants, and ensuring consistency across team members through shared configuration and linting rules. Debugging techniques reveal using browser DevTools effectively with utility classes, implementing prettier-plugin-tailwindcss for automatic class sorting improving readability, and resolving specificity conflicts when integrating with legacy stylesheets. Migration strategies guide transitioning existing projects from traditional CSS or other frameworks, incremental adoption approaches allowing gradual conversion, coexistence patterns where Tailwind integrates with existing styling systems, and measuring impact through performance metrics validating benefits justify migration effort.
Read guide
Dec 3, 2024
Next.js 14 App Router: Complete Migration and Best Practices
Navigate the paradigm shift introduced by Next.js 14 App Router, representing the most significant architectural evolution in React server-side rendering that fundamentally reimagines how developers structure applications through React Server Components, streaming architectures, and intuitive file-system conventions that collapse complexity while expanding capabilities. This definitive guide begins with conceptual foundations distinguishing App Router from legacy Pages Router: server components as default execution context enabling zero-bundle JavaScript for non-interactive UI, client components explicitly designated for interactivity through use client directive, and streaming HTML delivery that sends page shells immediately while progressively enhancing with data-driven content. Directory structure mastery reveals app folder conventions where folders define routes, special files like page.tsx create route endpoints, layout.tsx establishes nested UI shells persisting across navigation, loading.tsx implements instant loading states with Suspense boundaries, and error.tsx provides graceful error handling with automatic error boundary wrapping. Server Components deep-dive explains their revolutionary implications: direct database access eliminating API layer overhead, server-only code that never ships to browsers protecting sensitive logic, improved performance through reduced JavaScript payloads, and SEO advantages from fully-rendered HTML. Client Components integration demonstrates strategic use for interactive elements like form inputs, click handlers, browser API access, and state management while maintaining server-first architecture that minimizes client-side code. Data fetching evolution replaces getServerSideProps and getStaticProps with async server components fetching directly in component bodies, implementing fetch caching strategies through Next.js automatic request deduplication, and using React cache for component-level memoization. Streaming and Suspense patterns enable progressive page rendering where critical content displays immediately while slower data sections stream in without blocking, implementing loading skeletons for perceived performance, and error boundaries isolating failures preventing entire page crashes. Route handlers in app/api directory replace API routes with new conventions supporting GET, POST, and other HTTP methods, returning Response objects with proper headers, implementing middleware logic within routes, and building REST or GraphQL endpoints using familiar patterns. Parallel routes unlock sophisticated layouts rendering multiple page sections simultaneously with independent loading states, implementing dashboard layouts fetching separate data sources, and building modal routing patterns where dialogs overlay without navigation. Intercepting routes enable modal workflows intercepting navigation for dialog displays while maintaining URL-based routing enabling direct access and sharing. Metadata API improvements demonstrate generating dynamic SEO tags through generateMetadata function, implementing Open Graph images with automatic generation, creating type-safe metadata objects, and ensuring proper tags for social sharing across platforms. Image optimization with next/image in App Router reveals fill layouts for responsive containers, configuring remote patterns for external images, implementing blur placeholders automatically generated, and optimizing Core Web Vitals through proper sizing. Server Actions revolutionize form handling enabling form submissions directly calling server functions without API routes, implementing progressive enhancement where forms work without JavaScript, handling validation server-side with type-safety, and managing optimistic updates for instant user feedback. Migration strategies guide incremental adoption starting with new features in App Router while maintaining Pages Router for existing functionality, converting page by page allowing thorough testing, updating data fetching patterns from old conventions, and refactoring client-side state management when server solutions suffice. Performance optimization reveals using React Suspense strategically, implementing proper loading boundaries, leveraging partial prerendering for hybrid static-dynamic pages, and monitoring Core Web Vitals ensuring real-world performance meets standards. Deployment considerations cover Vercel platform optimizations, self-hosting with standalone output, configuring caching strategies for edge networks, and ensuring proper environment variable handling across server and client boundaries.
Read guide
Dec 1, 2024
TypeScript Best Practices: Writing Clean, Maintainable Code
Elevate your TypeScript expertise beyond basic type annotations into sophisticated type system mastery that prevents runtime errors, enables confident refactoring, facilitates team collaboration through self-documenting code, and leverages advanced language features that transform TypeScript from JavaScript with types into a genuinely superior development experience. This comprehensive guide establishes foundational principles: strict mode configuration enabling maximum type safety through noImplicitAny, strictNullChecks, and comprehensive compiler options that catch subtle bugs during development rather than production. Type inference optimization demonstrates trusting TypeScript inference for obvious types avoiding annotation noise, explicitly typing function boundaries where clarity and documentation matter, using const assertions for literal type preservation, and understanding contextual typing in callback scenarios. Interface versus type alias decisions reveal when interfaces provide better extensibility through declaration merging, when type aliases enable advanced features like unions and mapped types, and developing consistent patterns across codebases preventing confusion. Generic programming unlocks reusable abstractions maintaining type safety, implementing constrained generics ensuring type parameters meet requirements, using default generic parameters for convenient APIs, and building utility functions that preserve type information through transformations. Advanced type manipulation explores mapped types transforming object shapes, conditional types implementing type-level logic, template literal types for string manipulation at type level, and recursive types modeling complex data structures. Discriminated unions provide type-safe state machines where TypeScript narrows types based on discriminant properties, implementing exhaustive switch statements that compiler verifies handle all cases, modeling API responses with success and error variants, and building Redux actions with proper type discrimination. Utility types mastery covers built-in helpers like Partial, Required, Readonly, Record, Pick, Omit, and understanding their implementation revealing type system capabilities. Null and undefined handling strategies demonstrate optional chaining and nullish coalescing for concise safe access, strict null checking catching potential null reference errors, and using type guards for definitive type narrowing. Type assertion patterns reveal when type assertions become necessary at library boundaries, preferring user-defined type guards over assertions for better encapsulation, implementing unknown type for truly dynamic data requiring validation, and avoiding type assertion abuse that undermines type safety benefits. Module organization best practices include proper export strategies preferring named exports for tree-shaking, organizing types in dedicated files when shared across modules, using barrel files judiciously without performance penalties, and implementing path aliases for cleaner imports. Error handling approaches compare typed errors using discriminated unions, exception typing with unknown in catch blocks, implementing Result types for functional error handling, and building robust error boundaries in React applications. Testing considerations demonstrate typing test fixtures properly, using type assertions in tests when necessary, implementing test utilities with proper generics, and ensuring mock objects satisfy real interfaces. Performance optimization addresses bundle size implications of type-only imports, using import type for type-only references enabling clean tree-shaking, understanding TypeScript compilation performance, and optimizing project references for monorepo builds. Configuration best practices reveal essential tsconfig.json settings, extending base configurations for consistency, implementing project references for complex workspaces, and using composite projects for incremental builds. Migration strategies guide adopting TypeScript in existing JavaScript projects, incremental strictness increases allowing gradual improvement, handling third-party library types through DefinitelyTyped or custom declarations, and measuring migration progress through type coverage tools.
Read guide