Vuetify: Multiple <v-app> on the same page causes with menus and dropdowns

[catskull]

Issue

If a single page has more than one v-app on it, dialogs and menus do not close correctly. It appears that you have to click inside the v-app that the menu was rendered in to close it. Reproduction: https://codepen.io/anon/pen/BOydME

Investigation

The FAQ suggests not using v-app and instead manually setting data-app="true" and adding the application application--{light|dark} to a tag. Doing this causes things to not display correctly, such as the theme being messed up. However, it does resolve the issue. See reproduction here: https://codepen.io/anon/pen/BOydVM

I realize that this is not the ideal use case for Vuetify. I am in a unique position and I anticipate that others may be in a similar situation. The workaround in the FAQ would theoretically work for me, but I'm not sure how to resolve the style issues that come with it.

As a workaround in my app now, I can remove the data-app attribute from the first v-app when the second v-app renders with code like this:

  beforeCreate () {
    document.querySelectorAll('[data-app="true"]')[0].removeAttribute('data-app')
  }

Of course this is a terrible hack and probably won't work long term. I'm simply looking for any input anyone might have on this issue, as well as documentation for others that might have the same issue.

[KaelWD]

The faq is wrong, the correct class is application theme--light. In v1.2 that won't be needed any more as the theme css has been changed. In 2.0 we will be removing the v-app requirement entirely, but for now you can just render a hidden one to generate the required styles and services:

• v1.1: https://codepen.io/anon/pen/mGVQod?editors=1010
• v1.2: https://codepen.io/anon/pen/oPbQVV?editors=1010
• v2.0: https://codepen.io/anon/pen/EePOJp?editors=1010 (not yet)

[MajesticPotatoe]

Closing Issue for inactivity as a suitable workaround is provided and will be implemented in 2.0.
If you have any additional questions, please reach out to us in our Discord community.