Introduction
Explore how to create a scalable project architecture in Vue by organizing code with nested subviews and a decoupled API layer. Understand better practices beyond the default Vue-CLI setup to manage large applications effectively.
We'll cover the following...
Project architecture
When starting a new project, developers always need to concern themselves with how to structure it or what the best architecture is. Vue-CLI is a great start because it provides a basic structure for Vue applications out of the box. The directories that are automatically created for us in the src folder are:
We also have files like App.vue, main.js, and registerServiceWorker.js. The main.js is the main entrance of the application where the root Vue instance is created and mounted. This structure is a good starting point, but we need much more than that for a large-scale application. A good project structure should help separate different application parts by their functionality and concerns.
Large project architecture
A popular approach for large applications is the module-based pattern. In the ...