Using multiple instances of Vuetify on the same page

Question

Long story short I have a website that has been slowly migrating towards Vue. There are many small independent widgets that are each their own Vue app on the same page.

We have a need to add Vuetify to several of these widgets. For example the navbar which is it's own Vue app and then the footer which is also it's own Vue app. The architecture of the application does not allow us to combine these into one app (yet).

Adding Vuetify to more than one instance breaks the other instances when you wrap a second app with the tag because, as the docs say:

Vuetify doesn’t support multiple isolated Vuetify instances on a page. v-app can exist anywhere inside the body of your app, however, there should only be one and it must be the parent of ALL Vuetify components.

The tag adds a data-app="true" attribute so I have tried adding this to the tag of the application by hardcoding like this:

But that does not seem to register Vuetify properly.

Since the main application does not use Vue at the root level, how can I wrap all of these apps with a single and get Vuetify to work for multiple instances?

Update per the comment thread below

The way the apps are setup is like this:

...
import vuetify from '@/plugins/vuetify';
import NavbarApp from '@/apps/navbar/NavbarApp.vue';
import OtherWidgetApp from '@/apps/navbar/OtherWidgetApp.vue';

const navbarAppRootEl = document.getElementById('navbarApp');
const NavbarAppRoot = Vue.extend(NavbarApp);

new NavbarAppRoot({
  el: navbarAppRootEl,
  store,
  router,
  vuetify,
  propsData: {
    lang: config.lang,
  },
  i18n,
});

const otherWidgetRootEl = document.getElementById('navbarApp');
const OtherWidgetRoot = Vue.extend(OtherWidgetApp);

new OtherWidgetRoot({
  el: otherWidgetRootEl,
  store,
  router,
  vuetify,
  propsData: {
    lang: config.lang,
  },
  i18n,
});

Other apps are setup using that same pattern above, this is an example with two of the apps.

Using multiple instances of Vuetify on the same page

0 Answers