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.
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?
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.
Related
npm is great to download some js libraries, but including the into a vue app is really hard. i have no idea if there is an "official" way, but searching online i see so many different approaches.
sometimes it is imported in the app.js file, sometimes in the .vue files inside the tags. i have also seen that there are vue plugins that handle differently. how should i know if i have a vue plugin or not? i don't even know what the other option would be. like a vue module instead of a vue plugin?
is there a way that the vue app just includes/imports the stuff from node_modules so i can use it? so that after doing some npm install it is all available?
Npm just downloads the library into the node_modules folder and let's you access it where you need it.
If it's a vue component you need to import it in a vue file, because that's where you need it.
If it's a vue plugin you have to import it in the main js file because that's where it gets initalized in the whole app.
Looks like you are new to vue, I suggest you to take a look at this simple guide where you can learn some basic stuff.
I'm using vue-cli-service to generate web components as
vue-cli-service build --target wc 'components/*.vue'
In order to generate a bundle with all components inside that folder. Until now works very well and I can even mount the components on my page
<script src="https://unpkg.com/vue"></script>
<script src="/dist/bundle.min.js"></script>
<my-component></my-component>
The problem I'm having is that the web component doesn't inherit the styling of the current page.
Imagine I'm working with a bootstrap layout, i would need to import that package within the web component?
Is there any way for me to disable the shadow dom even if for that it sacrifices some functionalities of the wc ? (such as slots, etc. that i'm not going to use)
Currently, there is no way to do this with vue-cli-service.
There is a fork of official Vue Web Component Wrapper here. This fork allows you to disable the shadow DOM but that doesn't support the slots.
However, if you want to use that then you cannot use vue-cli-service. You will have to setup your own build using Webpack or Rollup.
Using snowpack with the Vue template. Just set it up. But chrome dev-tools says it doesn't recognize it as
vue.
I have deployed a basic Vue template app with vue-cli and this one get recognized as Vue. So the use Vue for local files is working correctly.
Not sure what it needs more or if it's something specific with snowpack
Using vue 3 and chrome dev-tools probably doesn't support it yet.
Has anyone used VUETIFY with this tool vue-sfc-rollup?
https://www.npmjs.com/package/vue-sfc-rollup
I need to add VUETIFY to the project that tool created, but using the VUE CLI command VUE ADD VUETIFY will not work due to the fact that the rollup solution is not a complete vuejs application, but a compact solution for creating distributed components. The problem I am trying to solve is where do I add the vuetify specific code?
I am using Electron-vue to create desktop application. I was trying to use boostrap-vue in my app. When I open the app I can see all the functionality of boostrap(button tables) but none of the styling associated with it (color, font etc..)
Am I doing something wrong or is bootstrap vue not compatible with electron style apps ?
The right installation procedure is described into the documentation: https://bootstrap-vue.org/docs
Into your project root folder, install prerequesites:
# With npm
npm install vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap
After that, you have to open the main.js file ant had this portion of code just before the "new Vue(...)" call:
// Activate bootstrap vue
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
A blog post describe it perfectly: https://www.digitalocean.com/community/tutorials/vuejs-using-bootstrap4
BootstrapVue does support beig run under Electron.
See https://github.com/loopmode/electron-webpack-quick-start/tree/bootstrap-vue-ts and https://github.com/electron-userland/electron-webpack/issues/302#issuecomment-508911966
I was reading some blogs and apparently boostrap-vue does not work with desktop apps. I had more luck with using element UI