Production build only error: Vuetify Unable to locate target data-app

user_2564566 0
Viewed 24641

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)
});
vuejs2 vue-component vuetify.js vue.js
4 Answers

Add data-app attribute to the target

<div data-app>
      <MyComponent />
</div>
user_89547730

add v-app

<v-app>
      <MyComponent />
</v-app>
user_116246470

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.

user_25645660

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();
user_23991030
Related