Looking for some guidance on structuring my Vuejs project architecture - assistance required!

Seeking expertise on restructuring a complex project that amalgamates various Vuejs and Nuxt applications within a Java backend. The current setup is convoluted, prompting the need for a more streamlined approach.

The current project boasts:

  • A large Vuejs project housing multiple micro front-end applications with individual vuejs instances.
  • A standalone Nuxt application.
  • A Java Backend/API project with integrated views of the nuxt application and micro front-end applications.

This dated system has now outgrown its initial design, warranting a thorough reevaluation to enhance efficiency.

The proposed plan involves converting the Java project into a pure API and developing a dedicated Front-End project to manage the micro Vuejs applications effectively.

I am curious about your thoughts on structuring the front-end going forward.

Current considerations include:

  1. Incorporating all micro applications into the Nuxt application to centralize management. Pros: Streamlined workflow. Cons: Potential loss of modularity in micro front-ends.
  2. Exploring the feasibility of exporting micro front-ends for integration into Nuxt (possibilities unknown).
  3. Creating a Node.js wrapper application to host micro front-ends similar to existing setup but possibly improving organization.

All micro front-ends operate with their respective Vuex Store, adding complexity to the restructuring process.

Your insights, solutions, or suggestions would be greatly valued. Thank you for any assistance provided.

javascriptvue.jsarchitecturenuxt.js

Answer №1

When it comes to the front end, sticking to one project definitely makes maintenance easier. It's possible to have one cohesive project while still maintaining modularity.

Many of us tend to structure our code in a monolithic way like this:

app
    components
    store
    views
    ...

However, an alternative approach is organizing your code by feature:

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

    feature1
        components
        store
        views

    feature2
        components
        store
        views

Vuex allows for the store to be divided into multiple modules. Each feature can then have its own separate store. You can learn more about this at https://vuex.vuejs.org/guide/modules.html.

For the server side, it's beneficial to make your JAVA application API-only. Mixing frontend and backend in the same project can lead to difficulties in maintenance. As an alternative, you could consider hosting your Nuxt app on a node server for Server-Side Rendering (SSR) at a later stage if desired.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the largest file size that JavaScript is capable of processing?

Similar Inquiry: Javascript Memory Limit Currently, I am in the process of constructing an HTML page using client-side JavaScript that aims to load a significant XML data file weighing around 150mb upon page initialization. Initially, when the file si ...

javascriptjqueryxml

Stop Chrome from automatically scrolling to the top of the page when making changes to the DOM

Currently utilizing Action Cable to create a discussion room where users can exchange questions. Upon posting a question, all participants within the room are supposed to see it. Nonetheless, I've encountered an odd issue specifically on Chrome: whene ...

javascriptjqueryruby-on-railsgoogle-chromeactioncable

When I changed the encoding of a live texture to sRGB in Three.js, the frame rate dropped by fifty percent

I am currently working on a threejs application that requires updating a texture in each frame. The output encoding of the THREE.WebGLRenderer is set to sRGB. Upon setting the texture encoding to sRGB, I observed that the rendering result is accurate. How ...

javascriptbrowserthree.jswebgl

The 'with()' function in Eloquent is returning a null value

I am currently facing an issue with a simple relationship setup between two models: User and Prescription. A user can have multiple prescriptions associated with them. However, in the PrescriptionsController, when I attempt to retrieve the user that the pr ...

laravelvue.jseloquent

The button's background color will vanish if you click anywhere outside the button or on the body of

Struggling with a tabpane created using HTML, CSS, and JavaScript. The problem arises when the background color of the active tab's button disappears upon clicking outside the button or on the body. While switching between tabs, I can change the color ...

javascripthtmlcss

Conceal the year, month, and day within a datetime-local input

I am working with <input type="datetime-local" step="1"/> input fields, and I want users to only be able to edit the hours, minutes, or seconds. This is due to setting the minimum value using let min = new Date().setHours(0,0,0) and the maximum value ...

javascripthtmldatetimeinput

I'm experiencing a problem when trying to add a document to Firebase Firestore using React Native - it doesn't seem to

I'm currently working on a React Native project that utilizes Firebase v9. My goal is to add a user object to my user collection whenever a new user signs up through the sign-up screen. However, I've encountered an issue where the user object is ...

javascriptfirebasereact-nativegoogle-cloud-firestore

How can v-model be effectively utilized without relying on it within the main app.js file?

Recently, I encountered a challenge with the code snippet in my blade file: <input type="text" class="form-control" :model="productname" id="name" name="name" aria-describedby="emailHelp" place ...

laravelvue.jsvuejs2vue-component

My Ionic app displays a blank nested view

Below are the route configurations in app.js: .state('signup', { url: '/signup', templateUrl: 'templates/signup.html', controller: 'signupCtrl' }) .state('profile', { url: ' ...

javascriptcssangularjsionic-frameworkangular-ui-router

Holding off on routing the pathName through the router until the next-page-transitions have been completed

In my current setup, I have two distinct elements at play. Using the code snippet below: className={router.pathname.startsWith("/pagename") ? "menu-active" : ""} I am able to apply the menu-active class to the pagename naviga ...

javascriptcssreactjsnext.jscss-transitions

JavaScript toggle display function not functioning properly when clicked

I've been attempting to create a drop-down list using HTML and JavaScript, but for some inexplicable reason, it's just not functioning as expected despite scouring through countless tutorials on YouTube. Below is the snippet of code that I'm ...

javascripthtml

Is there a way to make an input field mandatory in Gravity Forms by utilizing javascript or jquery?

I am currently in the process of developing a registration form for an upcoming event using gravity forms. The objective is to allow users to register only if the number of participants matches the number of available shirts. In case they do not match, the ...

javascriptjqueryif-statementgravity-forms-plugin

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

As someone unfamiliar with AngularJS, I have a simple inquiry regarding the subject. The code on my page begins by defining an app and controller: <script> var isisApp = angular.module('isisApp', []); isisApp.controller('Acco ...

javascripthtmlangularjs

What is the best way to highlight the option with a value of 0 by giving it a red background using either CSS, jQuery, or both, regardless of whether it is

I have tried various CSS and jQuery combinations to address the issue of displaying the option with a value of 0 in red only when it is not selected. .red { background: red; } select option[value=0] { background: red; } <select id="ups"> < ...

javascripthtmljquerycss

Ways to provide input parameters to a method upon clicking an element without using the HTML onclick attribute

Is there a way to pass data between pages without redirecting to the next.php page every time a button is clicked? One suggestion is to remove the onclick attribute from the button: <button class="submit-btn"></button> and use this jQuery fu ...

javascriptphpjqueryajax

React form events onSubmit and onClick fail to trigger within Zurb Foundation's 'Reveal' modal dialog

Since upgrading from React 16.12.0 to React 17.0.0, I've encountered an issue with my code. Previously, everything worked perfectly fine, but now none of my events seem to be firing (meaning the console.log statement never appears). class MyClass exte ...

javascriptreactjszurb-foundationonsubmit

The NodeJS server experiences a crash immediately after attempting to save data into the MongoDB database

I have encountered an issue with a script that saves objects to a MongoDB database using mongoose. The object is successfully saved to the database, but immediately after, the server crashes and throws the error message: catch(err) { process.nextTick(funct ...

javascriptnode.jsmongodbexpressmongoose

What causes the variable assigned in the outer subscription's scope to change as the inner subscriptions change?

In my Angular 6 code snippet provided below, I am facing an issue: ngOnInit() { this.route.queryParams.subscribe((params: Params) => { const stuffId: string = params.stuffId; this.service.getState().subscribe((state) => { ...

javascriptangularrxjsobservablestate

How can I configure my React Project to direct users to example.com/login.html when they land on the root URL?

My goal is to verify a user's identity through a third-party authentication server. The redirect_uri indicates that after the user logs in, they will be redirected to example.com/login.html. Inside the login.html file, there will be specific html/scr ...

javascripthtmlreactjssingle-page-application

What is the method for displaying html files in a POST request?

This is the code snippet I am working with: app.post('/convert', function(req,res){ var auxiliar = "somo Ubuntu command line(this works)"; exec(auxiliar, function(err, stdout, stderr){ if(err){ console.log ...

javascripthtmlnode.jsexpress