Tips for incorporating various Vue Js components into an outdated system

I have an old Java system with multiple pages that includes a Vue dashboard component on App.vue. The issue arises when I try to use Vue on another page without wanting the dashboard to appear there as well.

After researching, I found conflicting information about how to solve this. Some suggest editing the webpack configuration and dealing with entries, while others recommend creating multiple Vue instances or apps.

Currently, I am creating a new Vue instance on main.js to export my new component with its own unique identifier for use on the other page. This means I now have two Vue instances in my main.js file.

Regarding the webpack solution, I am unsure how to call bundled components on a div without causing conflicts with existing instances.

Using multiple Vue instances may seem like a more straightforward option, but is it considered bad practice? What is the best approach to tackle this issue? Any advice would be greatly appreciated. Thank you.

Answer №1

If you're looking for the best solution, consider delving into custom elements, which are already supported by Vue 2 (with Vue 3 currently in development).

Custom Elements, also known as web components, offer the opportunity to seamlessly integrate components into any HTML page.

For more information, take a look at the following resources: Vue official documentation on web components and the official web components documentation at webcomponents.org

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

There are currently no articles found that match the search query

Recently, I started working with Django, but I am facing an issue with slug. Whenever I send a request to the Slug, I encounter an error. The error message I receive is: Articles matching query does not exist. Furthermore, I am facing another error while ...

Utilize Bootstrap in an Angular template to effortlessly expand one element while collapsing all others

I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as w ...

What is the best way to organize a json based on numerical values?

Can anyone guide me through sorting a JSON data into an array based on numeric value, and then explain how to efficiently access that information? {"362439239671087109":{"coins":19},"178538363954003968":{"coins":18},"234255082345070592":{"coins":137}} Th ...

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

Tips for validating a session on a React client following a successful authentication via an Express session

After setting up an express REST API backend and React Front End, the front end app redirects users to the signin page using OAuth. The express server then creates a session ID after successful authentication, which can be seen as a browser cookie connect. ...

Utilizing XPath, SAX, or DOM to Retrieve Data from an XML Document in a Targeted Use Case

Currently, I am immersed in an academic project that involves development in Java and XML. My task at hand entails parsing XML and extracting necessary values, preferably storing them in a HashMap for further processing. Below is a brief snippet of the act ...

Exploring the World of Angular JS Services

Following the recommended practices, I am working on encapsulating my global functions into reusable factory services. In the provided code snippet, my objective is to execute a function that takes the string value of "Qprogress" from my JSON data, perform ...

using node.js to save query results as global variables

Help needed! I'm struggling to pass the results of my query statement to a global variable in order to dynamically configure my jsganntimproved chart. Any suggestions on what could be going wrong? In the snippet below, the console.log(taskItem) retur ...

Node.js local storage/cookie functionality

Running three different apps on Node.js at ports 3000, 3005, and 3007. I need to set a LocalStorage or Cookie variable at port 3000 and access it from the apps running at ports 3005 and 3007. Folder structure: nodep/ |-app.js (runs at port 30 ...

Exploring web pages with JavaScript events

I am currently trying to compile a list of singles that were released in the year 2018 from allmusic.com. While accessing their advanced search page and setting the parameters is simple enough, the challenge lies in extracting the information manually. Th ...

Having trouble with javascript regex for date validation?

I am facing an issue with using JavaScript regex to validate date inputs. It is identifying valid dates as invalid, and I'm not sure what the problem is: /^([0-9]d{2})+(\.|-|\/)+([0-9]d{2})+(\.|-|\/)+([0-9]d{4})+$/ The date forma ...

Utilizing the Public Directory in Vite Compilation

One issue I encountered in my project with Vite version 2.9.7 is related to the handling of images stored in the public folder within the project's root directory. To import these images, I utilized Vite's import.meta.glob function, like so: imp ...

Enhance the functionality of the Bootstrap navbar by enabling the slideUp and slideDown effects

I can't get jQuery's slideUp and slideDown methods to smoothly animate the Bootstrap navbar. When I tried using the slideUp method, the navbar only slid up a little before disappearing completely, and the same issue occurred with the slideDown me ...

Utilizing the Jquery hover feature to reveal or conceal an element

My Hover function is designed to display and hide sub menus when a person hovers on them. The issue I'm facing is that the menu disappears when I move the mouse down towards it. Can someone help me identify what I am doing wrong here? ...

Understanding the source of an useEffect's trigger to create a conditional statement

Within my useEffect, I have two states included in the dependencies array: const [currentTab, setCurrentTab] = useState('open'); const [searchParams, setSearchParams] = useState(''); useEffect(() => { if (condition) { // logi ...

Execute JavaScript function in NodeJS server background

I have developed a function that periodically monitors the battery statuses of connected android devices and returns an array. How can I execute this function on server startup and ensure it continues to run while sharing its information with other pages? ...

Looking for a slideshow with interactive play buttons?

Looking for a slideshow similar to the one on the homepage of this site: Has anyone ever used a slideshow like that before? Any other references or help would be appreciated! ...

Efficient Checkbox Implementation in ActiveAdmin for Rails 3.1

This query actually encompasses two related inquiries. Enabling "Select all" functionality - In the realm of formtastic, which is used by Active_admin to render forms, how can I implement a button that selects all checkboxes present on the page? While ...

The gridOptions.$gridScope.columns in ng-grid is modified two times when hiding or showing columns

Question: Why does the $scope.$watch function get called twice when I manually hide/show a column but only once when I reorder/sort columns in ng-grid? When I specifically target a single column with the watch function, it is only called once. I suspect ...

Remove the "x" character from the phone field if an extension is not provided in the Jquery masked input plugin

Currently utilizing the jquery Masked input plugin. The mask I have applied to a field is as follows: "?999-999-9999 x9999" Why is there a ? at the beginning? This was implemented to prevent the field from clearing out when an incomplete number is ente ...