Nuxt Areas

Overview

Nuxt is the main full stack framework for Vue JS.

It ships out of the box with a folder structure siloed by responsibility:

+- src
    +- components
    |   +- product-list.vue             <- stripe 1
    |   +- user-list.vue
    +- pages
    |   +- products.vue                 <- stripe 2
    |   +- users.vue
    +- store
        +- products.js                  <- stripe 3
        +- users.js
        +- user.js

This results in files being "striped" across the application, and as applications grow, not only do related files get further apart, but they sit in a sea of unrelated files, adding a physical and cognitive overhead to working with the various subsystems of the site.

Library

Nuxt Areas is a Nuxt module that allows you to restructure your app to group related files by "area":

+- src
    +- areas
        +- products                     <- area 1
        |   +- components
        |   |   +- product-list.vue
        |   +- pages
        |   |   +- index.vue
        |   +- store.js
        +- users                        <- area 2
            +- classes
            |   +- User.js
            +- components
            |   +- user-list.vue
            +- pages
            |   +- index.vue
            +- store
                +- users.js
                +- user.js

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

The library is available for Vue 2 and Vue 3 and handles:

• routing (dynamic and custom)
• store registration
• component registration
• Webpack aliases
• watching and debugging

Nuxt 3

Nuxt 3 introduced its own "layers" functionality that allows you to achieve similar results, and more.

I wrote about that in detail in my article Modular site architecture with Nuxt layers .

Branding

If you're wondering what the logo is all about, it is the Eye of Providence, or "all-seeing eye".

When I was experimenting with designs, I tested ideas with folders, network icons, the share icon, triangles, the letter "A", but nothing seemed to resonate.

Someone on Twitter mentioned "Area 51" which I thought was amusing but didn't take it seriously as a logo idea, but later the Eye of Providence popped into my head. Crazily, it seemed like it might work:

• Areas give you a top-down overview – the eye
• it gives you a hierarchy – the triangle
• it's a pretty radical approach – the rays & stars

Plus, it's a little bit wacky and goes with the slightly esoteric title!

The Area 51 idea made it in as the demo repo for registering areas from external folders, NPM modules, etc.

The original logo was designed by myself using online resources (I'm fine with a bit of logo design, but I'm no illustrator), and I commissioned the alien eye to match the original design.

Links

• GitHub
• Main Demo
• Area 51 Demo 👽