15

I only get this error in the production build. enter image description here

I have read this doc and this related issue but I still cannot get it to work. <v-app> is wrapped around the v-dialog why does it still complain?

Here is my code

// App.vue
<template>
  <v-app id="inspire">
    <v-dialog max-width="500px">
      <v-card>
        <v-card-title>
          Create
        </v-card-title>
      </v-card>
    </v-dialog>
  </v-app>
</template>


\\main.js
import Vue from "vue";
import store from "./store/store";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import App from "./App.vue";

Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  store,
  render: h => h(App)
});
Jake He
  • 2,417
  • 3
  • 29
  • 41
  • try adding another `template` around the `v-dialog` – Michael Jun 26 '19 at 05:04
  • The stacktrace shows an unusual component hierarchy that contains two `VApp`'s (there should only be one). – tony19 Jun 26 '19 at 06:20
  • I had the same error when using Vuetify with Vuepress, presumably because it does not use the `VApp`. This answer worked for me: https://stackoverflow.com/a/60990132/9035706 – Eerik Sven Puudist Jun 30 '20 at 13:16

4 Answers4

42

Add data-app attribute to the target

<div data-app>
      <MyComponent />
</div>
bereket gebredingle
  • 12,064
  • 3
  • 36
  • 47
  • 9
    Why is this necessary? – Ari Jun 20 '20 at 22:03
  • This fixed the issue for me, but I am also curious as to what `data-app` actually is for? I can't seem to find any info about it. – Kellen Feb 05 '21 at 17:45
  • 4
    @Kellen Vuetify requires your app to be wrapped around by v-app which then adds this data-app automatically for you. So ideally you should do that, otherwise doing it manually as suggested here should work too. – pkid169 Jun 20 '21 at 06:44
12

add v-app

<v-app>
      <MyComponent />
</v-app>
Balaji
  • 9,657
  • 5
  • 47
  • 47
  • I like this answer more. IMHO, I think, v-app might likely the part of a public API. See https://vuetifyjs.com/en/api/v-app/ Even though, data-app attribute mentioned in other answer works. I couldn't find it in Vuetify docs (Please feel to comment here and let me know if such a thing exist). – Ajeeb.K.P Oct 29 '22 at 14:48
0

Sorry its my bad. The reason I had this error is because there were two <script> tags in the html that imported vue js files. So it was running twice. I removed one of the tags and it works fine now.

mbuechmann
  • 5,413
  • 5
  • 27
  • 40
Jake He
  • 2,417
  • 3
  • 29
  • 41
0

I had a similar error when using vuetify via laravel-mix and vuetifyjs-mix-extension. I added in the config webpack.mix.js vuetify-loader:

mix.js('src/js/app.js', 'js').vuetify('vuetify-loader').vue();
Maksim
  • 31
  • 4