Setting up unit tests today using localeVue with Vuetify and @vue/test-unit I ran into the warning message:

[Vuetify] Multiple instances of Vue detected

After googling around I found a number of issues related to this warning message. There are different ways to solve it, which I will address in this post.

1. Ignore it

It is a warning message, so you can safely ignore it. But that red warning text sure is annoying.

2. Use Vue instead of localeVue

You could use initialize the component using Vue instead of localVue. That said the documentation of @vue/test-unit explicitly warns agains this.

3. Suppress the warning message

A hack, but in my opinion the least evel one of all the options is suppressing the warning message. This can be done very locally in the beforeEach. This is the code I am using that is based on this issue comment.

The SilenceWarnHack.js class:

/**
 * This is a hack to suppress the Vuetify Multiple instances of Vue detected warning.
 * See https://github.com/vuetifyjs/vuetify/issues/4068#issuecomment-446988490 for more information.
 */
export class SilenceWarnHack {
  constructor() {
    this.originalLogError = console.error
  }
  enable() {
    console.error = (...args) => {
      if (args[0].includes('[Vuetify]') && args[0].includes('https://github.com/vuetifyjs/vuetify/issues/4068')) return
      this.originalLogError(...args)
    }
  }
  disable() {
    console.error = this.originalLogError
  }
}

And the beforeEach function that is part of the test file:

import { createLocalVue, shallowMount } from '@vue/test-utils'
import { SilenceWarnHack } from '@tst/helpers/SilenceWarnHack'
import Vuetify from 'vuetify'
import VStatsCard from '@/components/common/VStatsCard.vue'

const silenceWarnHack = new SilenceWarnHack()

describe('VStatsCard.vue', () => {
  let localVue = null
  beforeEach(() => {
    silenceWarnHack.enable()
    localVue = createLocalVue()
    localVue.use(Vuetify)
    silenceWarnHack.disable()
  })
  ...
}

It works like a dream 🙂