Nuxtjs Vue This document provides comprehensive guidelines for nuxtjs vue development and best practices. Vue.js Integration Composition Composition API with Nuxt Implement proper composition api with nuxt Follow best practices for optimal results Reactive Reactive data with ref() and reactive() Implement proper reactive data with ref() and reactive() Follow best practices for optimal results Computed Computed properties and watchers Implement proper computed properties and watchers Follow best practices for optimal results Component Component communication patterns Implement proper component communication patterns Follow best practices for optimal results Vue Vue 3 features and optimizations Implement proper vue 3 features and optimizations Follow best practices for optimal results Layouts & Pages Default Default and custom layouts Implement proper default and custom layouts Follow best practices for optimal results Page-specific Page-specific layouts Implement proper page-specific layouts Follow best practices for optimal results Error Error pages and 404 handling Implement proper error pages and 404 handling Follow best practices for optimal results Layout Layout transitions Implement proper layout transitions Follow best practices for optimal results Responsive Responsive layout strategies Implement proper responsive layout strategies Follow best practices for optimal results State Management Pinia Pinia for state management Implement proper pinia for state management Follow best practices for optimal results Store Store composition and modules Implement proper store composition and modules Follow best practices for optimal results Server-side Server-side state hydration Implement proper server-side state hydration Follow best practices for optimal results Persistent Persistent state with cookies Implement proper persistent state with cookies Follow best practices for optimal results Real-time Real-time state synchronization Implement proper real-time state synchronization Follow best practices for optimal results Nuxt Modules Official Official modules (@nuxtjs/) Implement proper official modules (@nuxtjs/) Follow best practices for optimal results Community Community module ecosystem Implement proper community module ecosystem Follow best practices for optimal results Custom Custom module development Implement proper custom module development Follow best practices for optimal results Module Module configuration and options Implement proper module configuration and options Follow best practices for optimal results PWA PWA module for offline functionality Implement proper pwa module for offline functionality Follow best practices for optimal results Performance Optimization Code Code splitting and lazy loading Implement proper code splitting and lazy loading Follow best practices for optimal results Image Image optimization Implement proper image optimization Follow best practices for optimal results Bundle Bundle analysis and optimization Implement proper bundle analysis and optimization Follow best practices for optimal results Critical Critical CSS generation Implement proper critical css generation Follow best practices for optimal results Service Service worker integration Implement proper service worker integration Follow best practices for optimal results API Development Server Server API routes Implement proper server api routes Follow best practices for optimal results Middleware Middleware for API requests Implement proper middleware for api requests Follow best practices for optimal results Database Database integration Implement proper database integration Follow best practices for optimal results RESTful RESTful API patterns Implement proper restful api patterns Follow best practices for optimal results GraphQL GraphQL integration Implement proper graphql integration Follow best practices for optimal results Development Tools TypeScript TypeScript integration Implement proper typescript integration Follow best practices for optimal results ESLint ESLint and Prettier setup Implement proper eslint and prettier setup Follow best practices for optimal results Testing Testing with Jest and Vue Test Utils Implement proper testing with jest and vue test utils Follow best practices for optimal results Storybook Storybook for component development Implement proper storybook for component development Follow best practices for optimal results Hot Hot module replacement Implement proper hot module replacement Follow best practices for optimal results Production Considerations Performance Performance monitoring Implement proper performance monitoring Follow best practices for optimal results Error Error tracking and logging Implement proper error tracking and logging Follow best practices for optimal results Analytics Analytics integration Implement proper analytics integration Follow best practices for optimal results Security Security best practices Implement proper security best practices Follow best practices for optimal results Scalability Scalability planning Implement proper scalability planning Follow best practices for optimal results Follow these comprehensive guidelines for successful nuxtjs vue implementation.

Vue 3 Composition API Best Practices Comprehensive guide for mastering Vue 3's Composition API, reactivity system, and building scalable Vue applications. Advanced Reactivity Patterns Computed Properties and Watchers Use computed for derived state that depends on reactive data Implement watchers for side effects and complex reactions Understand when to use watch vs watchEffect Example advanced reactivity: Custom Composables Design Create reusable logic with custom composables Follow naming conventions (use prefix) Implement proper cleanup and lifecycle management Example composable patterns: Performance Optimization Techniques Use shallow reactive when deep reactivity isn't needed Implement proper component lazy loading Optimize large list rendering with virtual scrolling Example performance patterns: State Management and Routing Pinia State Management Use Pinia for global state management Implement proper store composition patterns Handle async operations in stores Example Pinia store: Vue Router 4 Integration Use the composition API with Vue Router Implement proper route guards and navigation Handle route parameters and query strings Example router integration: Summary Checklist [ ] Use script setup syntax for cleaner component code [ ] Implement proper reactivity with ref() and reactive() [ ] Create reusable logic with custom composables [ ] Use TypeScript for type safety throughout [ ] Implement proper computed and watcher patterns [ ] Design clear prop and emit interfaces [ ] Use provide/inject for dependency injection [ ] Integrate Pinia for global state management [ ] Handle routing with Vue Router 4 composition API [ ] Optimize performance with shallow reactivity when appropriate [ ] Write comprehensive tests for composables and components [ ] Follow Vue 3 best practices and conventions Follow these patterns to build scalable, maintainable, and performant Vue 3 applications using the Composition API effectively.