Structuring Very Large Applications


#1

I’m considering porting over one of my applications to Vue.js from Backbone. The application is quite large in terms of number of features. Not like a few dozen components large but like several hundred components large. Lot of this can be broken into a dozen or so core namespaces. Therefore, I’m wondering what the best directory structure is, if one exists out there.

Going off the documentation and examples, we can do:

  • src/
    • assets/
    • components/
    • filters/
    • mixins/
    • router/
    • store/
      • modules/
    • views/

But as I said, the list of components, modules and views will be quite high. I’m considering doing a pod-based folder structure. Something like:

  • src/
    • common/
      • assets/
      • components/
      • filters/
      • mixins/
      • router/
      • store/
      • views/
    • nameSpaceAlpha/
      • assets/
      • components/
      • filters/
      • mixins/
      • router/
      • store/
      • views/
    • nameSpaceBravo/
      • assets/
      • components/
      • filters/
      • mixins/
      • router/
      • store/
      • views/

One of the advantages I see to this approach is you can fairly easily work within the namespaced folder without worrying about the other areas.

Has anyone done anything of this sort yet? How has it worked out for you? Any pros and cons you can think of?


#2

It is a good idea, the only drawback will be in the router,
I think it would be desirable to create a main router.js and include all other router of each module within the main router.


#3

i use a similar structure

  • app/
  • moduleA/
    • components/
    • vuex/
    • index.js
    • routes.js
  • moduleB/
    • components/
    • vuex/
    • index.js
    • routes.js
  • index.js
  • routers.js
  • vuex.js
  • Main.vue
  • router/
  • vuex/
  • components/ -> shared
  • main.js
// app/routes.js
import { routes as moduleA } from './moduleA'
import { routes as moduleB } from './moduleB'

export default [ ...moduleA, ...moduleB ]
// app/vuex.js
import { vuex as moduleA } from './moduleA'
import { vuex as moduleB } from './moduleB'

export default { moduleA, moduleB }
// app/moduleA/index.js
export { default as routes } from './routes'
export { default as vuex } from './vuex'
// app/index.js
export { default as routes } from './routes'
export { default as vuex } from './vuex'

It has been very helpful


How to make a scalable app with many routes
Forma más organizada de estructurar las carpetas del proyecto
#4

Any more thought on this ? This is a really interesting post, the examples for large apps with multiple stores are rare.


#5

I like what @vinicius73 suggested.

Any advice for building very large applications?
It’s interesting that I didn’t find much information about building very large applications with Vue.js.
For example how good performance would be to build something like a shopping card admin, freshbooks, zendesk (big application with dozens of pages) with vuejs in front end and php(laravel) on the backend.
The Vue.js would generate a very big app.js ?

I know to what to be careful from back-end side (php, mysql), but I don’t know what to expect from Vue.js


#6

Hello,

I’m face on the same problem.
Is there a solution to put all path modules in the app/routes.js file dynamically?

Thank you.


#7

Sir,

please mention how will be the routes in // app/moduleA/routes.js.

Thank you.


#8

I´d like the same