How can I nest vue apps

user_104002 0
Viewed 67

I am trying to embed a vue app in a website which already is a Vue app of the toplevel div. The main website is a dynamic website (CMS). On toplevel there is a div (vueApp) which is converted to a vue app.

Now I also have a nested vue application which uses it's own javascript (and is hosting). This nested app is entirely inside the html of main vue app (see structure below)

Now 1 have two problems:

  1. The nested app does not work after the main vueApp is mounted. The events seems to disconnected. So it looks fine but clicks are not handled. The nested app is working when it is not nested.
  2. Vue complains about the script tag inside the vueApp div.
<html>
   <body>
     <div id="vueApp">
       <script scr="nestedApp.js" type=module />
       <div id="nestedApp"></div>
     </div>
   <script scr="vueApp.js" />
   </body>
</html>
vuejs2 vue-component vue.js
1 Answers

You need to implement an event bus to communicate between two apps. Another option could be to dispatch custom events from the second app and add corresponding event listeners in your main app. I would go with the bus, although it's a more complicated way. By the way, have you tried mounting your nested app as a child component of you main app? This way you don't have to add the second script tag and you can provide external dependencies to you nested app, e.g the event bus.

user_133113340
Related