vuejs3migrationvitestpiniavuetifyjs3

Vue3, Vuetify3, Vitest, Teleports not rendering

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.

Solution

  • 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