Vue.js Modular Architecture
Vložit
- čas přidán 18. 03. 2021
- In this video, I will go through the Modular Architecture in Vue.js applications as well as show a basic implementation, and explain why it is a better approach, than the traditional Folder By Type architecture in bigger applications, that should be scaled and maintained for a long time.
Project Source Code: github.com/DarkC0der11/vue-mo...
Premium Courses from Me:
Vue.js + Vuetify Custom Video Player: www.udemy.com/course/create-c...
#vuejs #vue3 #javascript
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!
Very nice. Thanks!
Забавно, я думал об этом вчера даже нигде не слышав. И тут твой видос. Значит такой паттерн существует)
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!!👌
Glad you have enjoyed the video, by the way same architecture can be applied to React and Angular as well, the principles stay the same=)
Nicee Architecture to implement
really similar like composer project, great tutorial.
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.
very good video Sanjar.
I recommend using shared folder as well coz sometimes u need to acces data between features and that's i think can become nasty
This video is so good
You earned a like bro. Really appreciate your video. Thanks a lot
Thank you very much, I am glad that you’ve enjoyed the video ;)
@@sanjarmirakhmedov8311 Can you please make a small video/playlist of a very basic project like a todo list or a stopwatch and explain the whole modular architecture of Vue using the project?
Thank you bro
thanks you!
thanks sir, very very useful, im from indonesia
Glad you enjoyed the video!
Thanks for this content bro I appreciate it. by the way, I subscribe to your channel.
can someone help me do this with nuxt? it's more closed in terms of changing folder structure
cool!
Can you do this tutorial for Vue 3?
There is also patterns like atomic wich i like to use c:
It looks interesting and maybe worth trying.
But how does this work with e.g. i18n and some VSCode extensions 🤔
wow man
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?
did you solved it? I have the same issue
There is a way to implement it with Nuxt?
Круто! Давай еще! Можно даже на русском запилить такое же видео - на русском очень мало инфы об архитектуре вью да и вообще что то сложнее туду личта по вью
Большое спасибо, рад что тебе понравилось! Может быть в будущем будут видео на русском ;)
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
does it make sense to also create a "components" folder inside a module to store components only used within that module views
Sure thing, you can come up with your very own structure within the modules, the video explains only the very abstract/core concepts of splitting your app into several independent modules
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 ?
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 ?
If you want to persist the navigation across all modules, then you define it in the Root component as it's shown in the video, so that the only thing re-renders is the .
Does this have any performance advantages or is it purely organizational?
It's purely organization, because you basically handle only the way you split up the files and folders, but not how they run.
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.
Yes, it is specifically good for large projects, the increase in folders/file size is a benefit rather than downside, it’s easier to manage folder for a feature, than one gigantic folder for all features.
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
Indeed, the topic of the video is not about the actual code architecture, but rather solely organizing folders/files, anyways thank you for adding extra information that other people can benefit from!
@@sanjarmirakhmedov8311 Then your video title is wrong and/or misleading. As Matheus said, this isn't an architecture. It's a code organisation approach.
is dis counted as mvc architecture??
Not really, this is just a way to organize your frontend code so that its more manageable and scalable, its more of a folder/file architecture with some minor additional stuff.
MVC is a bit different topic, related to code logic organization.
Has benefits if you have a large team and a large project. Otherwise won't make a real difference
Of course, if you are building a very simple application with few pages and components, then it would probably be an overkill, but if your app already features few modules, then its really beneficial even if the team is small. Mentally it's easier to focus on one feature at a time, and have everything under your hand nicely in one folder.
Тег вью 3, хотя используется вью 2😢
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