Is it more beneficial to utilize multiple Vue apps or just one app per page?

Our website is primarily built using Razor/MVC, but we have been incorporating Vue gradually over the past few years. Currently, we have multiple Vue apps integrated separately into different sections of our site - such as modals, forms, and widgets in the header.

In some cases, we have utilized Pinia to manage state within complex apps with multiple sub-components, although not between different Vue apps.

We are now reaching a point where Vue is becoming more prominent, and several key pages are transitioning to full Vue implementation.

I am wondering if there are any drawbacks to having multiple Vue instances or apps on a single page. Should we consider defining the Pinia store once and sharing it among apps, or should we aim for one app per page or potentially transform parts of the site into a single-page application?

Is there a recommended best practice for this scenario?

At the moment, we are inclined towards having multiple Vue apps without a specific rationale.

vue.jsvuejs3vue-component

Answer №1

If you want to efficiently mount various components in different DOM nodes using just one app instance per page (enabling a single Vue app for the entire page), there is a technique I've outlined in:

Mounting components individually without a root like #app

(complete source code provided)

Another approach is utilizing Web Components with Vue:

https://vuejs.org/guide/extras/web-components.html

Additionally, if you still employ multiple Vue apps per page, you can seamlessly use shared ES modules and even Pinia stores across the apps.

In my opinion, the most optimal route would be to choose this last option to prevent extensive refactoring which could result in loss of time for implementing actual functionalities.

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

Showing a Vue component within a Laravel Blade template

Currently, I am performing a basic calculation within app.js by multiplying the product price with the quantity. My goal is to showcase the total value in Laravel for users to preview their order. app.js const app = new Vue({ el: '#item', ...

phplaravelvue.jslaravel-blade

A guide on verifying the presence of a v-data-table element using Cypress

The vuetify v-data-table component includes a feature called "show-select" which adds a checkbox to each list item. I am facing an issue where I need to check elements in the table for a Cypress test, but so far, it has not been successful. I assigned an i ...

vue.jsvuetify.jscypress

Tips on including a CDN stylesheet into the Cypress component test runner

Within my vue-cli project, I have successfully set up the cypress component test runner by following the official documentation available at https://docs.cypress.io/guides/component-testing/introduction. However, I am facing an issue with using icon fonts ...

vue.jscypressvue-clicypress-component-test-runner

Issue encountered when integrating vue2-google-maps into a project using vue.js and Laravel 5.6.12

I am currently utilizing Laravel 5.6.12 in combination with vue.js I am attempting to integrate Google Maps using the following GitHub link I am adhering to the instructions provided in the aforementioned link, as follows. Installation npm install vue2 ...

google-maps-api-3vue.jslaravel-5.6

Different methods to send dynamically created vuejs array data to a mysql database

I'm currently utilizing this code in my LARAVEL project http://jsfiddle.net/teepluss/12wqxxL3/ The cart_items array is dynamically generated with items. I am seeking guidance on looping over the generated items and either posting them to the databa ...

phpjsonlaravel-5vue.jslaravel-5.4

What is the correct way to register an imported component in a Vue single file component to comply with the eslint-plugin-vue vue/no-unregistered-components guideline?

Recently entering the realm of Vue, I'm in the process of achieving pristine eslint-plugin-vue outcomes on a trial project. However, when inspecting the test file named Home.vue displayed below, an alert is triggered: The "HelloWorld" compon ...

vue.jsvuejs2vue-componentvuetify.jseslint

Incorporating a helper JavaScript file to seamlessly integrate Typeform into a project built with Vue

Struggling with incorporating a typeform into my website through the use of both vue and laravel. The problem arises when trying to embed the typeform using a script, as Vue throws an error when attempting to include the script directly within the compone ...

javascriptlaravelvue.jsvuejs2vue-component

Just initiate an API request when the data in the Vuex store is outdated or missing

Currently, I am utilizing Vuex for state management within my VueJS 2 application. Within the mounted property of a specific component, I trigger an action... mounted: function () { this.$store.dispatch({ type: 'LOAD_LOCATION', id: thi ...

javascriptvue.jsvuejs2vuex

Passing arguments with $emit - Vue

Here is a simple method to handle alerts using $emit. But when passing arguments, it seems like the event is not being triggered at all. The goal is to update the value of alert with the result. Listening for the event on mount: this.$eventHub.$on(' ...

javascriptvue.js

The bidirectional data binding feature is malfunctioning following an XMLHttpRequest request

When watching a property from Vuex, I use the following approach: computed: { ticket() { return this.$store.getters['order/reservation'].offer_id } }, watch: { ticket(newTicketId) { console.log('Caught change of ...

javascriptvue.jsvuejs2vuexnuxt.js

An error occurred when trying to read the 'insertBefore' property of null, triggering an uncaught TypeError in the promise

<div class="button" @click="display = !display"> <i class="fas fa-plus-circle" v-if="display"></i> <i class="fas fa-minus-circle" v-else></i> </div> After clicking t ...

vue.js

Is there a way to pass a v-modal as an array when setting Axios params?

I am currently dealing with a Vue Multiselect setup where the v-model is an array to accommodate multiple selected options. The challenge I am facing involves calling a route within the loadExtraOptions method and passing the array of IDs as a parameter ...

javascriptvue.jsaxiosvue-multiselect

What steps can I take to prevent Vue from rendering template comments?

Recently, I have been working with a Vue application (version 2.6.0) and started adding comments to the templates using this syntax: <--! This comment describes what this component does --> The problem is that these comments are now appeari ...

vue.jsvuejs2

Replicate the action of highlighting a section of a website and copying it to the clipboard using JavaScript

I am currently in the process of transferring an outdated application to a new platform, but I'm facing difficulty understanding the changed JavaScript code. My goal is to find a parent HTML element named "output" and then select all its child elemen ...

javascriptvue.js

Issue with Vue JS function not providing the desired array output

I declared a property in my data model like this: someArray: [] A function returns an array: getMyArray: function (someId) { var result = [7, 8, 9, 10]; return result; } I'm assigning the result of the function to m ...

javascriptvue.js

Is it feasible to incorporate VueJS SFC components with templates in the rendered HTML?

My background includes working with both single-page apps and multi-page apps (traditional websites). Previously, I have utilized AngularJS 1.x on each page, which allowed me to keep all components in separate files and run them as needed on different page ...

vue.jsvue-component

Simultaneous Vue components

Here's an example of a string: "Greetings Earthlings! I come in peace." Along with a set of words. ["Greetings", "Earthlings", "peace"] I want to automate the process of enclosing matching words within Vue components. For instance, it should look ...

vue.jsrecursionv-for

I am encountering an issue with my dynamic Vue.js component layout not functioning properly when used with named slots

I am struggling with combining dynamically generated layouts and named slots. To define my layouts, I use the "component :is" method //app.vue <template> <component :is="layout"> <router-view /> </component> </t ...

vue.jslayoutnamedv-slot

Download files from Firebase storage to a user's device

I have a variety of files such as images, videos, and audio stored in my firebase storage. My goal is to provide users with the ability to download these files to their computers by clicking on a download button. After reviewing the firebase documentation ...

javascriptfirebasevue.jsfirebase-storage

Leveraging 'v-for' to construct dropdown options in HTML and setting the key as the value for each option

Here is some HTML code using Vue syntax: <select id='select-id' > <option selected disabled value=''>Select Option</option> <option v-for="(value, key) in object">{{ key }} - {{ value}}</option> </s ...

vue.jsvue-component