Vue - App Architecture

Michał Dulik — Tue, 24 Jan 2023 17:01:49 +0000

When it comes to project structure Vue has no documentation specifying a particular structure, it does provide a good starting layout (folder-by-type) generated with Vue CLI.

Folder by type is the most common architecture in Vue projects, it is simple and comes by default with every Vue app created using Vue CLI.

With this type of architecture you separate your files by types, for instance you store your components store routes utils etc. in their corresponding folders.

...
└── src
    ├── main.ts  
    ├── App.vue          
    ├── assets
    │   └── logo.png  
    └── components
        └── HelloWorld.vue
...

This is a pretty good architecture for small projects. However, as your app grows up you quickly notice that it becomes harder to navigate and develop, especially when you are focused on working on a specific feature.

Let's say you have a store management application with three features, which are the orders, products and clients. Working on a product's feature, you have to jump between several folders (assets, components, routes, stores, tests, etc.) and find the files that correspond to that feature.

When your project gets more and more features, this becomes really unmanageable, and you will end up with bloated component routes and store folders.

Pros:

Most developers are familiar with this structure
Ensures a flat folder structure

Cons:

Each directory contains items that usually aren't relative to each other
It can get quite tricky to find out which files are used by which features

Folder by feature or in other words, the modular architecture puts all of your files related to a specific feature into its own folder.

...
└── src
    ├── main.ts  
    ├── App.vue          
    ├── modules
        ├── products
        │   ├── image.jpg
        │   ├── ProductsModule.vue
        │   ├── routes.ts
        │   ├── index.ts
        │   └── ...
        ├── order
        │   └── ...
        └── client  
            └── ...
...

You can notice that in this architecture, the root folders in the modules directory hold only feature related files.

Inside each module folder, you can have any structure that you want, as long as you expose the common module interface for registering it.

However, if you use folder-by-feature, you end up losing information about the type of file (because it's no longer in a components, store or assets folder).

Pros:

The folder structure itself communicates the application features
Separated files by feature

Cons:

Sometime it is hard to draw the boundaries of the feature exactly

Which is the right one to pick ?

Unfortunately, there is no right or wrong here. Based on what I've seen, I can tell you that folder by feature performs better when it comes to scaling.

Hybrid structure:

Use both folder-by-feature and folder-by-type:

...
└── src
    ├── main.ts  
    ├── App.vue          
    ├── modules
        ├── core
        │   ├── components
        │   │   └── MyButton.vue
        │   └── store
        │   │   └── GlobalStore.ts
        │   └── ...
        ├── products
        │   ├── assets
        │   ├── components
        │   ├── pages
        │   ├── store
        │   ├── middlewares
        │   ├── ProductsModule.vue
        │   ├── routes.ts
        │   ├── index.ts
        │   └── ...
        ├── order
        │   └── ...
        └── client  
            └── ...
...

Now we have mixed features and types folders:

assets, components and middlewares are the type ones
products, orders and clients are the features

Countless have been the hours of me trying to decide what structure to choose. I have tried both of them over the past years. I have come up to the conclusion that the Hybrid structure is the best one for me.

PS.

I was thinking about making a tutorial series about Vue's modular app architecture. Let me know in the comments what you thinki about it.

Bye ✋

Projects To Complete When Learning Web Development

Michał Dulik — Sun, 12 Jul 2020 16:57:49 +0000

If you’re intermediate beginner web developer, you have probably run into the wall. The basic tutorials are too easy now. But it’s hard to figure out what to code.

You are probably looking for project ideas with quality design. Fortunately, there is devchallenges.io, completly free website where each challenge is different and will test you different aspects of coding. It includes small user stories and beautiful designs.

When you complete a challenge, you submit your solution, which can be shared with others. Solutions page is a good place for people to learn from each other. It is for you to share your thought and help others.

Forem: Michał Dulik

Vue - App Architecture

Which is the right one to pick ?

Hybrid structure:

PS.

Projects To Complete When Learning Web Development

Here are some sample projects

Job Board App

Quizz App

Unsplash clone

Checkout page

Author of devchallenges.io

Thu NghiemFollow