CODEWITHSUNDEEP
javascriptvue.jsarchitecturevuejs2
CanardMandarin
CanardMandarin

Reputation: 303

How to structure components in a large vue.js app?

I was using Vue.js for small one page application or for small components.But now I'm trying to build the whole front end of an app with it and I got some trouble with the architecture of my project.

Should I create one component for each pages? (Like in the vue router doc) like HomePage, ArticlePage, LoginPage, ContactPage, etc.?

But how can I organize my component folder with so many components?

And I was wondering if there is some typical architecture for large vue.js apps?

Here is my current architecture:

VueJs architecture

Upvotes: 2

Views: 4531

Answers (2)

tommychoo
tommychoo

Reputation: 653

You should make more folder and sub-folder to classification the architecture.

I share my current using this approach, Its more reusable and prefer you are inside a more than one man develop team.

Absolute suitable for large application. It include 3 Parts.

Part 1, Part 2, Part 3

Upvotes: 0

ragnar
ragnar

Reputation: 1302

That structure is fine and I guess you have it inside src/. The structures is always something very subjective so there is not a perfect way. You are the one that will deal with it so you should have it as feel more confortable.

I also use a folder called directives, another for plugins, and another for views where I place the "pages" content.

Example:

├ assets
├ components
│  ├ alerts.vue
│  └ menu.vue
├ directives
│  └ datepicker.vue
├ plugins
│  ├ auth.js
│  └ alerts.js
├ views
│  ├ home.vue
│  └ users
│    ├ edit.vue
│    └ list.vue
├─ App.vue
└─ main.js

Also try to don't confuse the assets folder, because the one insidesrc/ is one that will be proccessed. For common assets that do not need to be processed or you don't want to package place them in static/ folder instead.

Upvotes: 3

Related Questions