Large scale Vue.js application structure

Vue.js is great framework as it had very small learning curve, it’s easy to setup and it offers really nice transition from AngularJS. With it’s component approach you can split the application into small parts and reuse certain components around the application.

Problem comes when your application grows and you need to structure it better. This is the structure I’m using for my large scale Vue.js applications.

Setup Vue.js project

Best way to start with Vue.js is to use Vue CLI to setup your project.

Prerequisites: Node.js (>=6.x, 8.x preferred), npm version 3+ and Git.

or with yarn

and then initialize a project with webpack template (there are many more templates available)

This will ask us few question

and create a project. Great.

Initial structure

Application structure is pretty basic and well structured. We mostly put all out code into src/components, but it can quickly before clustered.

Improved structure for large scale applications

Structure follow the logic to split code into logical parts (projects, users, ..). I like to imagine that I’m able just to add or move the whole module folder and it should be plug-and-play.

Including modules

Each module has index.js file which register everything important. For example, basic index.js is

Then in main.js we just import it.

Routes

For each module we can define custom routes by using vue-router addRoutes method.

Here we put page components into pages/ folder to have more organized structure.

Translations

There are many libraries for translation, currently I’m using vue-i18n and I’m quite satisfied. We create main 18n.js to init translations.

and then in each module translation file (for example modules/projects/translations/en.js) we add translations.

or for other languages

Core module

We also created a core module to hold code that doesn’t find anywhere else. This can be useful to store some global filters or components.

Other possibilities

This structure is excellent because it compacts the code together into logical components. Same logic is if we want to add state management (for example using Vuex), tests, assets or any other parts.