Nuxt & Vue
I have been shipping Vue and Nuxt in production for years, mostly in large e-commerce codebases where a bad structural decision costs months. These articles come from that context: what worked, what broke, and what I would do again.
If you are migrating to Nuxt 4, start with the directory structure and type-safety guides. If your app is growing sideways, the layers and Pinia abstraction articles show how to keep features isolated without fighting the framework.
Start here
-
Nuxt 4: New Directory Structure and Migration Guide
Discover the new Nuxt 4 directory structure with the app/ directory and learn how to migrate your Nuxt 3 projects safely and without breaking anything.
-
Modular Architecture with Nuxt Layers in Vue Projects
Discover how Nuxt Layers organizes Vue.js projects with modular architecture. Create scalable and maintainable front-end applications with backend concepts.
-
Composable Abstraction Layer: the missing pattern between Pinia and its Vue components
Learn how the Composable Abstraction Layer eliminates the coupling between Pinia and Vue 3, centralizing logic, side-effects and ensuring testability per layer.
Series in this guide
All articles (11)
-
React is a View Library, Not an Architecture
Your component started innocent, but today it does everything. Learn why React is a View library, not an architecture, and how to separate domain from UI.
-
How We Reorganized an E-commerce Checkout Without Stopping Sales
How we reorganized a major e-commerce checkout in production with Nuxt Layers, the CAL pattern, and automated linting rules — without stopping a single sale.
-
Composable Abstraction Layer: the missing pattern between Pinia and its Vue components
Learn how the Composable Abstraction Layer eliminates the coupling between Pinia and Vue 3, centralizing logic, side-effects and ensuring testability per layer.
-
Modular Architecture with Nuxt Layers in Vue Projects
Discover how Nuxt Layers organizes Vue.js projects with modular architecture. Create scalable and maintainable front-end applications with backend concepts.
-
Nuxt 4: TypeScript and Type Safety - Complete Guide
Explore TypeScript in Nuxt 4: auto-generated types, native type safety, and intelligent inference for safer, more productive Vue.js development.
-
Nuxt 4: New Directory Structure and Migration Guide
Discover the new Nuxt 4 directory structure with the app/ directory and learn how to migrate your Nuxt 3 projects safely and without breaking anything.
-
Persistent Storage in Nuxt with Unstorage
Learn how to use Unstorage on Nuxt to persist server-side data with Redis and Cloudflare KV. Complete guide with practical storage examples in Nuxt 3.
-
Reactivity: SolidJS vs React vs Vue
Compare the reactivity systems of React, Vue and SolidJS: re-rendering, proxies and signals. Understand the differences and the impact on front-end performance.
-
Components for Debug and Rendering with DevOnly and ClientOnly in Nuxt 3
Learn how to use DevOnly and ClientOnly in Nuxt 3 for conditional rendering, safe debugging in development, and more efficient and optimized production builds.
-
How to Preserve Component State Between Routes with KeepAlive in Nuxt 3
Learn how to use KeepAlive in Nuxt 3 to preserve the state of components between route changes and ensure a more fluid and performant experience.
-
How to add webpack package analysis to your nuxt project
Learn how to configure webpack bundle analysis in Nuxt with an interactive treemap to visualize and optimize your application's bundle size.