Vue 2.7 + Vuetify 2.6 + Vite

[ligne13]

Hi,

my Vue 2.7.14 + Vuetify 2.6.14 application is built with vue-cli.
I am trying to migrate to Vite.

I followed the steps explained in this article : https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/. It seems OK.

But, as soon as I call Vue.use(Vuetify) in my app.js I get this error in the console saying:

console.ts:39 [Vuetify] Multiple instances of Vue detected
See #4068

If you're seeing "$attrs is readonly", it's caused by this

The referenced github ticket doesn't help.

I also have these two infos in the console:

2 questions :

• is it fixable and how?
• is Vuetify 2.6 compatible with Vite ?

Thank you.

[craigrileyuk]

It's absolutely compatible.

Your problem is caused by importing Vue from two different locations/scripts at some point. It's hard to say how to fix it without you posting a link to your code repo.

[ligne13]

Hi @craigrileyuk ,

I've reduced my code the minimum to debug this issue.

app.js:

import Vue from 'vue';
import App from './App.vue';
import './plugins/vuetify';
new Vue({
  render: h => h(App)
}).$mount('#app');

./plugins/vuetify:

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

The App.vue only contains an empty <template></template>.

When I run this, I get the message below in the console twice:

The first message comes from the file node_modules/vue/dist/vue.runtime.esm.js
The second message comes from the file node_modules/vue/dist/vue.runtime.common.dev.js

I also get the error:

console.ts:39 [Vuetify] Multiple instances of Vue detected

If I comment out the line import Vuetify from 'vuetify'; I only get the first message, and no more error (but no Vuetify !).

It seems that Vuetify does not detect my own Vue instance and consequently loads its own.

Any idea?
Thanks.

[hymair]

Export a Vuetify instance from the plugin file:

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

const opts = {}

export default new Vuetify(opts)

And add it to the root Vue instance:

import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app');

Also make sure you are using the Vue2 plugin for Vite.

[ligne13]

Thanks, I was not using the latest versions of vite and @vitejs/plugin-vue2.