vue instance with child vue instance possible or alternative approach?

Question

I would like to develop a vuejs multitouch app for a 4K display. It’s about 3-4 cards that are on a background and actually show the same content. For each of the cards a different entry page is visible.

Is it possible to pack several other instances (with the same content) of vuejs in divs within a Vue instance?

Somehow I would like to integrate an instance with store and router multiple times, but I can’t figure it out.

It would be helpful if someone can help me here, maybe provide a link or an approach.

I am looking for an approach how I can display the same content 3 times at the same time, at best with routes and nested routes. Each User can navigate separately, everyone has their own history via GUI.

when I try to use 2 instance inside the main vue instance 3 different routers, it’s always renders the content of main route.

I found this example where to instances are side by side, works great: https://jsfiddle.net/m91e7s2v/ but not inside a parent instance? why?

inside app.vue

<div id="app">
 <VueToolMultitouch class="schatten" :startX="100" :startY="100" :startColor='"#00FF00"'  id="id1" :idName="'id1'" :startZ="2">
          
<div id="subapp1">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <p>Route path: {{ $route.path }}</p>
  <router-view></router-view>
</div>
<h2>Passing Text 1</h2>

</VueToolMultitouch> 


<VueToolMultitouch class="schatten" :startX="200" :startY="600" :startColor='"#FF0000"'  id="id2" :idName="'id2'" :startZ="3"> 
  
    <div id="subapp2">
        <router-link to="/">/home</router-link>
        <router-link to="/foo">/foo</router-link>
        <p>Route path: {{ $route.path }}</p>
        <router-view></router-view>
    </div>
    <h2>Passing Text 2</h2>

</VueToolMultitouch> 

</div>

inside main.js

import router1 from "./router/router";
import router1 from "./router/router-1";
import router2 from "./router/router-2";


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

new Vue({
   router: router1,
}).$mount("#subapp1");

new Vue({
   router: router2,
}).$mount("#subapp2");

An alternative would be if everything is implemented with a single vue instance, but each of the cards gets its own "router".

maybe someone has an idea what that might look like.

Eder Díaz · Accepted Answer · 2020-10-23 15:05:50Z

1

The problem is that every child gets bound to the parent vue app and its prototype, this overrides the router of the children. I think that you'll need either to use iframes for the children or make the parent app handle with state the children views.

Edit:

I just learned about v-pre, this directive prevents Vue from "compiling" an HTML node and it's children. You can basically have as many Vue instances even if they're nested as long as you put v-pre on the tag you use to mount the child Vue app. Here's a working fiddle https://jsfiddle.net/dja36s7x/18/

edited Oct 23, 2020 at 15:05

answered Oct 23, 2020 at 3:42

Eder Díaz

2,1011 gold badge14 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bluelemonade Over a year ago

iFrames didn't work on multitouch, touchs in iFrame blocks touchs on the rest of the display.

Eder Díaz Over a year ago

Wow didn't know that. Then I think either you manage views with state or have all Vue apps be siblings instead of parent>child. The problem I see with sibling apps is that if one changes the route it will change it for all apps, so it seems more reasonable to me that each app has it's own state handling an internal "route"

Eder Díaz Over a year ago

@bluelemonade I just updated my answer with a directive that might solve your issue

Matt · Accepted Answer · 2020-10-23 15:06:22Z

I found an alternative way in the VueJS forum.

<div id="app">
  <div class="row">
    <my-child1></my-child1>
    <my-child2></my-child2>
  </div>
  <div class="row">
    <my-child3></my-child3>
    <my-child4></my-child4>
  </div>
</div>

const routes = [
  {
    path: '/page1',
    component: { template: '<p>Page 1</p>' }
  }, {
    path: '/page2',
    component: { template: '<p>Page 2</p>' }
  }, {
    path: '/page3',
    component: { template: '<p>Page 3</p>' }
    }
]

const MyChild = {
  template: `
    <div>
      <router-link to="/page1">Page 1</router-link>
      <router-link to="/page2">Page 2</router-link>
      <router-link to="/page3">Page 3</router-link>
      <button @click="$router.back()">Back</button>
      <div>{{ $route.path }}</div>
      <router-view />
    </div>
  `
}

function getChild() {
    return {
    extends: MyChild,
    router: new VueRouter({
      mode: 'abstract',
      routes
    })
  }
}

new Vue({
  components: {
    MyChild1: getChild(),
    MyChild2: getChild(),
    MyChild3: getChild(),
    MyChild4: getChild()
  }
}).$mount('#app')

JSFiddle Example

Here, the components are expanded with their own router.

I currently no longer need the route via nested instances. but i will test the v-pre on everyone.

Matt · Accepted Answer · 2020-10-23 08:01:52Z

It seems this might be achieved using a hierarchy of components. If you're sure you need different Vue app instances, then it's worth going with Vue 3 as it's abandoned the idea of a shared global config, allowing you to create many Vue instances with createApp. All with different configurations.

You could do something like this (JS Fiddle here):

Vue.createApp({
    name: 'App',
    template: `
        <h1>Primary App</h1>

        <div id="subAppOne"></div>
        <div id="subAppTwo"></div>
        <div id="subAppThree"></div>
    `
}).mount('#app');

Vue.createApp({
    name: 'AppOne',
    template: `<h2>App One</h2>`,
}).mount('#subAppOne');

Vue.createApp({
    name: 'AppTwo',
    template: `<h2>App Two</h2>`,
}).mount('#subAppTwo');

Vue.createApp({
    name: 'App Three',
    template: `<h2>App Three</h2>`,
}).mount('#subAppThree');

You can specify different routers with .use() on each app instance, just before calling mount().

const routerOne = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes: [/* … */],
});

Vue.createApp({/* … */}).use(routerOne).mount('#appOne');

Collectives™ on Stack Overflow

vue instance with child vue instance possible or alternative approach?

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related