【发布时间】：2022-06-10 21:21:26
【问题描述】：
长话短说，我有一个网站正在慢慢迁移到 Vue。在同一页面上有许多独立的小部件，它们都是各自的 Vue 应用程序。
我们需要将 Vuetify 添加到其中的几个小部件中。例如，导航栏是它自己的 Vue 应用程序，然后是页脚，它也是它自己的 Vue 应用程序。应用程序的架构不允许我们将这些组合成一个应用程序（目前）。
当您使用 <v-app> 标签包装第二个应用程序时，将 Vuetify 添加到多个实例会破坏其他实例，因为正如文档所说：
Vuetify 不支持一个页面上有多个独立的 Vuetify 实例。 v-app 可以存在于应用程序主体内的任何位置，但是，应该只有一个，并且它必须是所有 Vuetify 组件的父级。
<v-app> 标签添加了一个data-app="true" 属性，所以我尝试通过这样的硬编码将其添加到应用程序的<body> 标签中：
<body data-app="true">
但这似乎没有正确注册 Vuetify。
由于主应用程序在根级别不使用 Vue，我如何使用单个 <v-app> 包装所有这些应用程序并让 Vuetify 为多个实例工作？
更新以下每个 cmets： 应用程序的设置方式如下：
...
import vuetify from '@/plugins/vuetify';
import NavbarApp from '@/apps/navbar/NavbarApp.vue';
const navbarAppRootEl = document.getElementById('navbarApp');
const NavbarAppRoot = Vue.extend(NavbarApp);
new NavbarAppRoot({
el: navbarAppRootEl,
store,
router,
vuetify,
propsData: {
lang: config.lang,
},
i18n,
});
使用上述相同的模式设置多个应用程序。
【问题讨论】：
-
来自文档我想说你的应用程序中应该只有一个 v-app。但是，如果您在一页上嵌入 2 个应用程序，它仍然不应该是一个问题。因为 vue 应用程序有一个入口点来启动容器内的应用程序，然后 vuetify 插件在这个容器内搜索 v-app。您是否尝试过并遇到错误？如果是，您应该准确解释您如何嵌入+启动 2 个应用程序以及您遇到的错误是什么。
-
@oshell 我添加了有关如何设置应用程序的附加信息。
标签： vue.js vuetify.js