How to use two vue apps on the same page?

Question

Vue.js

Hello, there is such a problem, there is a Yii2 application that uses vue on some pages that use VueRouter. It was decided to add Chat to all pages of this application, that is, to the application template (sliding out on the left). Chat also uses VueRouter, but already mode: "abstact", and on Yii2 pages, vue uses Router with mode: "history". When trying to insert a chat into a chat template, on yii2 views where vuerouter is involved and the chat writes Uncaught TypeError: Cannot redefine property: $router. I read on the Internet that this is due to the fact that it is called both there and there twice vue.use (vueRouter). How can this be cured? Thanks in advance for your replies

Answer 1

Do not use a router in the chat module. Switch views (components) without changing the URL.
Something like this: in the property, componentsave the code of the current visible part of the application.

<template>
   <app-dialog v-if="component === "dialog"></app-dialog>
   <app-settings v-if="component === "settings"></app-settings>
</template>