davestewart/nuxt-areas

A nuxt module:

Summary

Nuxt Areas is a Nuxt module that organises large Nuxt projects by grouping related files into "areas" — folders that co-locate components, pages, stores, and classes for a single feature. Like Nuxt itself, it builds routes from pages and registers stores and components from each area automatically. Global concerns such as plugins, modules, and static assets stay at the project root.

What it is useful for

The module targets large Nuxt codebases where flat or deeply nested folder structures make navigation painful. By keeping everything for a feature like "products" or "users" inside one folder, engineers can focus on a single unit of functionality without jumping between branches of the tree. The README lists concrete benefits: easier understanding of what the site does as a whole, shorter imports, simpler naming, and a clearer home for new files. Areas can also be added from external sources, which the README describes as a way to share or modularise parts of an application without modifying the consuming project.

How engineers can use it

Usage follows the pattern shown in the README: create an areas directory under src, then add one subfolder per feature. Each subfolder can hold its own components, pages, store.js or store/ directory, and classes. The example in the README shows a products area with product-list.vue and an index.vue page, alongside a users area with its own components, pages, and stores. A Vue 2 interactive demo is available on StackBlitz, with source code in the linked demo repository (davestewart/nuxt-areas-demo-vue2).

The README does not document installation or configuration commands, so for setup specifics, dependency names, and the full configuration surface, the docs in the repository's docs/ folder are the authoritative source. The README also does not specify which Nuxt versions are supported; engineers should confirm compatibility with their existing Nuxt version before adopting the module. As a Nuxt module, it is expected to be registered through a project's Nuxt configuration, but the exact step is not included in the README and should be checked in the official docs.