how to use vuetify with vue-electron?

Question

I'm using electron-vue to build a vue electron app.

I am also using Vuetify which I am following the manual installation process,

In dev, initially everything works fine and I can run my app and add vuetify components, no problem.

Then I run a build, when I open the built version of the app I have a console warning from vuetify [vuetify] Multiple instances of Vue detected then a whole ream of subsequent errors that I assume are as a result, and my app doesn't load coorectly, I see the content but none of the components and css etc.

Has anyone used these tools together before and knows how to resolve this?

I have looked everywhere for [vuetify] Multiple instances of Vue detected but all comments relate to running tests, not building electron. need help please.

Answer 1

In webpack.renderer.config.js you need to have someting like this:

let whiteListedModules = ['vue','vuetify']

PS: I'm using Vuetify with Electron via webpack install and it work fine. https://vuetifyjs.com/en/getting-started/quick-start#webpack-install Just follow the installation steps?

Answer 2

I couldn't get my vuetify work even after applying above changes. I didn't have any errors in console but vue styling was't being applied Here is the key thing I was missing:

In App.vue, I missed to add v-app and v-content. Here is an example:

<template>
 <v-app>
  <v-content>
   <div id="app">
    <router-view></router-view>
   </div>
  </v-content>
 </v-app>
</template>

After adding these changes, my app started taking the changes.