Vue.js Modular Architecture 

As front-end developers, it is high time for us to think about the architecture of our projects and raise quality standards during development. This video brings up an important topic. If the architecture described in this video doesn't quite suit you, here's a tip. Architectures are based on two groups of principles: coupling and cohesion. I would describe the last group as follows: combine what "uses each other", "is used simultaneously" and "changes for the same reason". Based on these principles, you can change the architecture to suit yourself. Start by creating a directory when creating a new page and put into it all the files that appear during the development of this page: vue components, stores, composables, etc. If any of this will be used on other pages, put it in the project root directories (by type). Over time, you will find a directory structure that you like. The main thing is to follow these 3 principles and then you will get all the advantages of a "modular architecture" (which is actually just an architecture)

Haha, have to point out that this is what Angular has been promoting since Day 1, which I am a huge fan of. Glad to see it in a Vue form. I am actually in the middle of a similar refactoring and this tutorial helps. Thanks for sharing.

Really nice architecture! I like to use scoped slots to further decouple the gathering of the data (store) from the presentation of that data. Webpack knowledge is definitely a must so that js exports load properly. This is an excellent video Sanjar. Thank you!

folder structure is not architecture. Design patterns are. You can have a clean and easy to find folder architecture with a really mess up code with a lot of complexity and coupling

I have worked with Angular and React... But I can tell you that Vue with this modular architecture looks amazing!! Thank you Sanjar Mirakhmedov for sharing good content!!👌

Забавно, я думал об этом вчера даже нигде не слышав. И тут твой видос. Значит такой паттерн существует)

Due to several people pointing out, I just wanted to make clear that the video is not full on about architecting/writing the actual code, but rather showing how to implement a modular/feature based folder structure with opinionated way of wiring up things. Important to note here, that it's not an absolute one way to go, you can come up with your own implementation of a modular folder structure.

I recommend using shared folder as well coz sometimes u need to acces data between features and that's i think can become nasty

Can you do this tutorial for Vue 3?

Круто! Давай еще! Можно даже на русском запилить такое же видео - на русском очень мало инфы об архитектуре вью да и вообще что то сложнее туду личта по вью

thanks sir, very very useful, im from indonesia

really similar like composer project, great tutorial.

You earned a like bro. Really appreciate your video. Thanks a lot

Great video, i've refactorred my codebase using this approach. Looks promising. One thing i couldn't solve is using keep-alive with nested router-views, so i just implemented all the stuff you've talked in the video but without using the Module.vue component and nested sub-routes. In addition, it looks a bit different with vue 3 and vue-router 4, but the general idea is the same:) Do you think it's fine to drop Module.vue and nested router-view?

Its good when you separate out files when its been used multiple times but for smaller app its not needed you can just define your logic in one file and its fine. Separate out things (logic) when needed

can someone help me do this with nuxt? it's more closed in terms of changing folder structure

cool!

Nicee Architecture to implement

i keep getting the error "router.addRoutes is not a function" inside the router.js of my module... i am using "vue": "^3.3.4", "vue-router": "^4.2.4" any idea why this function does not work / exist ?

It looks interesting and maybe worth trying. But how does this work with e.g. i18n and some VSCode extensions 🤔

There is also patterns like atomic wich i like to use c:

Very nice. Thanks!

Does this have any performance advantages or is it purely organizational?

very good video Sanjar.

There is a way to implement it with Nuxt?

Ok but what happens if we need to have navigation ? And we don't want to rerender the navigation bar every time in new module since its loosing its animation states ?

Has benefits if you have a large team and a large project. Otherwise won't make a real difference

does it make sense to also create a "components" folder inside a module to store components only used within that module views

This video is so good

Thank you bro

thanks you!

Thanks for this content bro I appreciate it. by the way, I subscribe to your channel.

Does this really work in large scale projects? I have a project that has more than 100 pages and around 60 components. If I use this method I'll have to have more than 300+ files and folders.

wow man

Тег вью 3, хотя используется вью 2😢

is dis counted as mvc architecture??

This is ridiculous. This structure is out of the box in Vue. This is NOT a architecture, design patterns are as mentioned.

#amflearningbydoing #amflearning nice content