I was having a problem testing my application because vuetify3 uses teleports in their v-menus, v-dialogs, v-tooltips, etc. We can disable the teleports by using attach, but that breaks some of our components.

I was having a problem testing my application because vuetify3 uses teleports in their v-menus, v-dialogs, v-tooltips, etc. We can disable the teleports by using attach, but that breaks some of our components.

• vuejs3
• migration
• vitest
• pinia
• vuetifyjs3

Share Improve this question Follow edited Mar 11 at 17:41 jesse ekstrom asked Mar 10 at 14:40 jesse ekstromjesse ekstrom 122 bronze badges 3

• Hi. Don't include the answer in the question. Feel free to answer your own question if you know the answer. The key is that the question and the answer should be in two separate "posts" (can add a answer below with blue "Post Your Answer" button) and make sense on their own, so it can be useful to others as well. It might be even better to cite the source if the solution was obtained from an official GitHub repo, issue, or PR. – rozsazoltan Commented Mar 10 at 14:43
• attach: string | boolean | Element - Vuetify API Docs - Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. --- Conclusion: According to the quoted documentation, this is a correct answer for completely disabling teleportation. – rozsazoltan Commented Mar 10 at 14:48
• Can I answer my own question? - StackOverflow Help – rozsazoltan Commented Mar 10 at 14:53

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The way I was able to adjust this was to ustilize their "attach='true'" property on those methods within vitest. When setting up my mounts I would have to import vuetify into the global plugins:

const vuetify = createVuetify({
  components,
  directives
})

The trick was to set the defaults for those properties in here:

const vuetify = createVuetify({
  components,
  directives,
  defaults: {
    VTooltip: {
      attach: true,
    }
  }
})

This may not be a good way to get around the teleport problems, but so far it has been working well.

I found a work around to my problem and wanted to share with people