made with vue.js

Nuxt Areas

Scalable Folder Management for large Nuxt Projects

Visit Site


Scalable Folder Management for large Nuxt Projects

"Nuxt Areas is a Nuxt module which enables you to group together related content (pages, stores, components, etc) in discrete folders called "areas".

Co-locating files this way has various advantages:

  • it's easier to work on a discrete unit of functionality, such as "products" or "users"
  • it's easier to understand what the site does as a whole
  • it's easier to see how related files work together
  • it's less hopping about between multiple branches of the folder tree
  • it's easier to find a home for components, classes, or data
  • naming is easier and imports are shorter

Nuxt's more "global" concerns such as plugins, modules, static, etc remain in the root, making the overall "shape" of the site more intuitive.

Like Nuxt, Areas builds routes from pages, and registers stores and components."


Dave Stewart

Social Media Links

Vue2 Transitions Component Transitions
icon-eye-dark Created with Sketch. 5.210
Vue Breakpoint Component A render-less component for composing CSS breakpoints
icon-eye-dark Created with Sketch. 3.648
Sentry for Vue Vue Application Monitoring
πŸ’š Sponsored by Friends
We’re hosting on Digital Ocean! πŸ’™ Try it today and get a free $100 credit.
Vue Stripe Stripe Checkout & Elements for Vue
icon-eye-dark Created with Sketch. 1.405
Vue Remote Websocket-based Remote Event System
icon-eye-dark Created with Sketch. 3.055