CODEWITHSUNDEEP
javascriptvue.jsarchitecturenuxt.js
Ayeye Brazo
Ayeye Brazo

Reputation: 3476

Need help to organise my Vuejs project architecture

This is not a technical question, it is more architecture/structure issue I'm facing and it would be nice to hear more opinions until I find the best solution to my problem.

Currently my project has:

As you can imagine, this is a very old project that scaled up to be a huge mess and now I would like to find the best solution to restructure everything.

The main idea is to convert the Java project to be only an API and create a Front-End project to host the micro vuejs applications.

Now I would like to know your opinions on how to structure the front-end.

Actually my ideas are:

  1. Since the Nuxt application is the newer, I was wondering to move all the micro applications inside it. Pro: I would have only one project to manage. Cons: I would lost the modularity of the micro front-ends.
  2. Export the Micro front-end and try to import it inside Nuxt (I don't know about the real possibility to achieve this result).
  3. Create a Node.js wrapper application (with the menu, etc...) to host all the micro front-ends. This would be pretty much similar to the current solution but maybe I would clean up everything.

One thing to consider is that all micro front-ends has their own Vuex Store.

I would really appreciate any kind of help, opinion, solution, etc... Thanks

Upvotes: 1

Views: 158

Answers (1)

jeremy castelli
jeremy castelli

Reputation: 1260

For the front end your right, maintaining one project is way more easier. I think you can achieve doing 1 project AND keeping the modularity/

We tend to organize our code in monolitic way like this

app
    components
    store
    views
    ...

but you can also organize your code by feature

app
    components (global components used everywhere in the app)
    store (root state)
    views (base architecture)
    ...

    feature1
        components
        store
        views

    feature2
        components
        store
        views

vuex allow the store to be splitted in multiple modules https://vuex.vuejs.org/guide/modules.html so each feature can keep it's own store

For the server part, it's a good idea to make your JAVA app API only. I tend to think that mixing front and back in a same project is less maintainable . In a second time (if you wish) you can host your nuxt app on a node server and do SSR

Upvotes: 2

Related Questions