What is the process for initiating an application dynamically using second.html in Vue3?

I'm currently working on a Vue3 project.

In the main.js file:

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...

//just testing...
app.mount("#app");

In my public/index.html file:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <style>
        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>

And in my App.vue file:

 <template>
        <button @click=openNewPage()>create new page</button>
        <span>{{message}}</span>
        <router-view />
    </template>
    <script>
        methods:{
            openNewPage(){
                var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    
            }
        }
    </script>

My store object:

export default createStore({
    state: {
      message:'Hello'
    }
});

In second.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title></title>
</head>
<body>
    <div id="appSecond" style="height:100%">
        <template>
            <span>{{message}}</span>
        </template>
    </div>
</body>
</html>

When I try to access both the store object and components on the second screen using the OpenNewPage method, they don't seem to work. Here's what I tried:

In second.js:

const app2 = createApp({
});

export { app2 };

And in my method:

import { app2 } from "../second.js";
openNewPage(){
    var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    
    if (t) {
        t.onload = function () {
        t.window.app = app2;
        app2.mount("#appSecond");
        }
    }
}

However, when running this code in second.html, I receive a warning like "[Vue warn]: Failed to mount app: mount target selector". It seems like the code is not functioning as expected. Can anyone provide some assistance?

Answer №1

openNewPage() function cannot execute a script on the newly opened page; only the new page itself can run its own scripts. The issue arises when openNewPage() attempts to run app2.mount(), as it executes this code on the current page instead of the new one, resulting in the error you encountered.

Solution

To resolve this, remove the mounting code from openNewPage() so that it simply opens the new page:

export default {
  openNewPage() {
    window.open('second.html', …);
  }
}

Update the second.html file to include the script responsible for mounting the app, and eliminate the unnecessary <template> section within the

<div id="appSecond">
:

<body>
  <div id="appSecond" style="height:100%">
    <span>{{message}}</span>
  </div>
  <script src="./second.js"></script>
</body>

Add the necessary code to mount your application within the second.js file:

// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#appSecond')

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

Tips for retaining spaces in a multiline string when setting a helm value using cdktf

Currently, I am utilizing CDKTF to facilitate the deployment of the datadog helm chart into a kubernetes cluster. My objective is to assign a specific value to confd, however, the issue arises when the spaces in my typescript multiline string do not mainta ...

Create line items using the quantity code as a reference

I need help implementing a feature that dynamically adds line items based on user input in a quantity text box. For example, if the user enters a quantity of 2, the page should display: Text line for item 1 Text line for item 2 Here is the code snippet ...

Encountering difficulty with installing node_modules on Express js

Encountered an error while attempting to install node_modules from the package.json file. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_em ...

Error message encountered: When attempting to execute 'postMessage' on a 'Worker', the operation failed as the object of type 'Array' could not be cloned

We are currently in the process of transitioning our code base from Vue 2 to Vue 3. Most things are working smoothly with HERE maps, except for one hiccup involving the .addObject() event. Unfortunately, this event keeps failing and displays the error mess ...

Why is access to fetch from the origin localhost blocked by CORS policy, while posting using ajax does not face this issue?

Let's dive into the difference between AJAX and Fetch without involving CORS. I want to understand why an AJAX POST request works flawlessly while a Fetch POST request fails! Currently, I am using jQuery and AJAX for both GET and POST operations. Whe ...

The changes to the grid options do not reflect immediately on the UI Grid interface

I am currently working on a project using the UI Grid module in AngularJS. I want to include row filtering as an option, but since not all users require it and the filter boxes take up a lot of space, I decided to disable filtering by default and add a but ...

Unusual issue with jQuery function failing to detect click events

As I delve into my first jQuery function, the primary goal is to assign a form to the function. Upon clicking the submit button, it should perform validation on each :input field within the function. The form is set as the selector for the function: $("f ...

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

I am currently working on a project to create a website that integrates the google books API for users to search for books. To start, I have set up a server using express in index.js at the root of the project directory, and all my static files are stored ...

Is the ID selector the quickest method in jQuery and CSS?

Which is the optimal choice in jQuery/javascript for speed? $('#myID .myClass') or $('.myClass') What is the preferred option to utilize in CSS? #myID .myClass{} or .myClass{} In hindsight, I realize my explanation was insuffici ...

Retain the contents of the shopping cart even when the page is refreshed

For a course project, I am recreating a grocery store website and need assistance on how to retain the shopping cart values even after refreshing the webpage. Please inform me if more information is required... <button type="button" id= ...

Adjusting the iframe for a side navigation with multiple dropdown options

I have a file called index.html that contains two dropdown containers and an iframe. The first dropdown container works with the iframe, but the second one does not. Can anyone help me fix this issue? I am having trouble understanding the script for chang ...

What is the best way to gather the "name" and "value" attributes from a designated section of a form using JavaScript and store them in an array?

How can I extract the "name" and "value" attributes from a specific section of a form and store them in an array using JavaScript? Here is the section of the form in question: <div class="multiPickerForm"> <input type="text" name="Id" value="1"& ...

Is there a way for me to initiate another joyride adventure?

Encountering a challenge with my joyride tour - after completing one tour, I aim to commence a second. Despite attempting to trigger the second tour in the postRideCallback function, I find myself stuck in a loop with the first tour. Seeking guidance on re ...

Can you please provide me with information on how I can send messages to US numbers using a toll-free number?

I attempted to utilize this code in the SNS console, but it showed a failure. I am seeking guidance on how to send a message using a TFN number. async sendMessage(testId: number) { const mobileNo = test.customer.phoneNo; const params = { Message: ...

The function to focus on this.$refs[("p" + index)] element is not available

I need help transforming a div into an input box when clicked, allowing me to edit the post inside a loop. Here is the button found on the post: <a @click="setFocusEdit(index)" v-if="isAuthor(post)" href="#" >Edit Me</a> And here is the spec ...

The functionality of loading JSON is not working properly in ePub3

Currently, I am working on a project involving the creation of an ePub3 eBook. One of the exciting features I have successfully integrated is three.js to showcase some models. My next goal is to develop 'hotspot' elements (small cubes that users ...

Steps for repairing a damaged vuejs project following the inclusion of the "less" and "less-loader" modules

I recently set up a basic vuejs project in IntelliJ and decided to integrate Less into it. However, when I executed "npm install -D less less-loader," an error occurred that I can't seem to resolve. I attempted to downgrade webpack and less-loader wit ...

How to work with a JSON object in Internet Explorer 6

Looking for some quick answers that should be easy for someone with expertise to provide. I have a basic asp.net site that relies on JSON for various tasks (and JSON.stringify). Everything works fine in Firefox and the like, but in IE6 I'm getting a ...

Create a drag-and-drop interface and link elements together using a custom JavaScript library

Seeking a solution or Javascript library to create a scientific modeling application, similar to flowchart software such as Visio. The ability to add elements and connect them by clicking and dragging is essential. https://i.stack.imgur.com/vSZpB.png The ...

A step-by-step guide to creating a delete feature for nested data in Laravel using Vue.js

My standard function format for deleting is not working on nested data. methods: { delete() { axios.delete('./../api/parent/' + this.parent.id) .then( response => { if( re ...