Vuetify - Multiple instances of Vue detected

Question

I'm using vue-cli-3.4.1. After creating project, i'have added vuetify to my project using command vue add vuetify. There is another vue web-component, which i'm trying to use in my application. I have added scripts to index.html file, like this

<script src="https://unpkg.com/vue"></script>
<script src="path/my-component.min.js"></script>

But, after running command npm run serve, getting this error in console and showing blank page.

[Vuetify] Multiple instances of Vue detected

score 0 · Answer 1 · edited Jul 15 '22 at 04:58

Your index.html file should only have one vue instance.

The vue-cli structures your application using a module system.

If you don't have one already create a components directory and place your my-component.vue there.

Then you’ll need to import my-component.vue, before you locally register it in the component you want to use it in.

Assuming the below component is named App.vue

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './components/my-component'

export default {
  components: {
    MyComponent
  },
  // ...
}
</script>

Now MyComponent can be used inside App.vue's template.

https://v2.vuejs.org/v2/guide/components-registration.html

Hope this helps.

Vuetify - Multiple instances of Vue detected

1 Answers1