electron-vue | js quick start boilerplate with vue-cli scaffolding | Command Line Interface library

 by   SimulatedGREG JavaScript Version: Current License: MIT

kandi X-RAY | electron-vue Summary

kandi X-RAY | electron-vue Summary

electron-vue is a JavaScript library typically used in Utilities, Command Line Interface, Vue, Webpack, Nodejs, Electron, Boilerplate applications. electron-vue has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of vue-cli for scaffolding, webpack with vue-loader, electron-packager or electron-builder, and some of the most used plugins like vue-router, vuex, and so much more. Things you'll find in this boilerplate... *Customizable during vue-cli scaffolding.

            kandi-support Support

              electron-vue has a medium active ecosystem.
              It has 15315 star(s) with 1571 fork(s). There are 251 watchers for this library.
              It had no major release in the last 6 months.
              There are 269 open issues and 670 have been closed. On average issues are closed in 135 days. There are 14 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of electron-vue is current.

            kandi-Quality Quality

              electron-vue has 0 bugs and 0 code smells.

            kandi-Security Security

              electron-vue has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              electron-vue code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              electron-vue is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              electron-vue releases are not available. You will need to build from source code and install.
              Installation instructions, examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed electron-vue and discovered the below as its top functions. This is intended to give you an instant insight into electron-vue implemented functionality, and help decide if they suit your requirements.
            • build main process
            Get all kandi verified functions for this library.

            electron-vue Key Features

            No Key Features are available at this moment for electron-vue.

            electron-vue Examples and Code Snippets

            No Code Snippets are available at this moment for electron-vue.

            Community Discussions


            VueJS getting "undefined" data from ipcRenderer (ElectronJS)
            Asked 2021-May-14 at 13:25

            When trying to get a message from ipcMain to ipcRenderer (without node integration and with contextIsolation), it's received but as undefined. Not only that, but if I were to reload the VueComponent (regardless of what change I make to it), the number of responses gets doubled.

            For example, the first time I start my application, I get 1x undefined at a time every time I click the button. If I reload the component, I start getting 2x undefined every time I click the button. I reload again and get 4x undefined every time I click the button... and it keeps doubling. If I restart the application, it goes back to 1x.


            ElectronJS + VueJS + VuetifyJS has been set up as described here.

            preload.js as per the official documentation.



            Answered 2021-May-14 at 13:25

            For solving the first problem (doubling of function calls) you have to remove window.ipcRenderer = ipcRenderer. In contextIsolation mode the approach is to use contextBridge.exposeInMainWorld() only. Using both implementation definitely causes issues.

            For the second problem, the callback to receive in ipcRenderer is called with only ...args from main (no event passed to func). see:

            Source https://stackoverflow.com/questions/67534677


            How to set application icon in eletron-vue js
            Asked 2021-Apr-11 at 18:17

            I am working with electron-vue js for building cross platform desktop app. I want to set custom icon when i make build file and want to add product name on app. But when i set custom icon, it work perfect in locally but when make it build then not work correctly. It give an error default Electron icon is used reason=application icon is not set.

            Here is Background.js file



            Answered 2021-Apr-11 at 18:17

            When we work in electron vue js. we add new file vue.config.js and paste these line of code.

            Source https://stackoverflow.com/questions/67003013


            Laravel echo in electron-vue app - join() not working
            Asked 2020-Dec-14 at 23:58

            I'm building a desktop app with electron-vue and a laravel backend. I setup Laravel Echo in the project and using Echo.channel() worked totally fine. Now I tried to use a presence channel with Echo.join() and it doesn't seem to do anything at all. I can see the connection in the pusher debug console but it never joins the channel. The strangest thing is that it never makes a request to my server to authorize either.

            In my renderer/main.js file I create the Echo instance:



            Answered 2020-Dec-14 at 23:58

            Looks like I finally got to the bottom of this. After doing a little more investigating I found out that the electron devtools apparently just wasn't showing the request to the authorization route, as I did a tail on my access_log and saw it was in fact hitting that route. In the access log I could also see I was getting a 403 response.

            Since I need both my electron app and my inertia web app to be able to authenticate to these channels, I changed the BroadcastServiceProvider boot method to look like this:

            Source https://stackoverflow.com/questions/65297652


            vue electron builder blank page
            Asked 2020-Oct-23 at 12:08

            How I came to the problem:
            I setup an project like this: https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript/ until it came up to the coding part, there I added custom stuff. Created Components and so on. Everything works fine in serve then I want to build it.

            What I expect as outcome:
            App working as in serve mode

            What I got:
            blank page

            What I've tried to fix the problem:
            change a wide range of path urls like:



            Answered 2020-Oct-23 at 12:08

            So after many hours of struggling because I couldnt open a working console I found a tool called Debugtron. After a bit of optimization it throwed the error:" createProtocol is undefined ".

            The autogenerated background.js missed the line:

            Source https://stackoverflow.com/questions/64363117


            Creating an Electron app with Vuejs, Webpack and tailwindcss
            Asked 2020-Aug-21 at 10:32

            I try to get an Electron app running with webpack, Vuejs and tailwindcss, starting with the electron-webpack template package and adding Vuejs and tailwindcss afterwards, but tailwindcss doesn't work.

            There is this equivalent thread on SO, but the solution mentioned there uses electron-vue, which has over 200 open issues and doesn't seems to be maintained anymore.

            Does anybody has an idea what went wrong here? I proceeded as follows:

            1. Initialize Electron webback boilerplate (according to here):



            Answered 2020-Aug-21 at 10:32

            Outdated packages/plugins/repos are mostly developer's dilemma. There could be other choices out there that is being maintained regularly, but what if we can’t find something to meet our needs… ¯_(ツ)_/¯

            Anyway, I recommend using Vue-CLI instead, and use vue plugins along the way, such as electron and tailwind.

            1. Vue-CLI uses webpack under the hood, by adding/configuring your vue.config.js. You can go ahead and install it: yarn global add @vue/cli.

            2. Create a project with vue-cli: vue create myproject. Then

            Source https://stackoverflow.com/questions/63469477


            Preload not working/compiled correctly in production (Electron-vue SimulatedGREG)
            Asked 2020-Aug-11 at 22:01

            I have a preload script that is working well in development. I've seen here that I either need to use a static file or webpack. I went with the static approach because my knowledge is zero with the webpack one.

            Currently, I'm using a webview, and this webview has the preload as following:



            Answered 2020-Aug-11 at 22:01

            To me it seems the issue is that your project structure is slightly wrong. The static directory is supposed to be located in the project root directory. When you build your app for production that directory will get copied into the app.asar directory. That's why its looking there. But, since there is no static directory in the root directory nothing gets copied over.

            To check the project directory structure check the following documentation page: https://webpack.electron.build/project-structure

            Source https://stackoverflow.com/questions/63366293


            Electron NativeTheme: Cannot set property 'themeSource' of undefined
            Asked 2020-Aug-06 at 23:04

            currently I am trying to setup a system/light/dark mode switcher in my electron app. For the electron app, I have used the electron-vue library and upgraded then the electron version to 7.3.2.

            So now I thought, I can use the new API nativeTheme from electron in order to create this new function. But the problem, which I now get is that nativeTheme is undefined, when I import it:



            Answered 2020-Aug-06 at 23:04

            nativeTheme is a main process module. You can't import it directly from a renderer process. You have to rely on IPC calls or Electron's remote module to use it in a renderer process.

            Source https://stackoverflow.com/questions/63292404


            SimulatedGreg Electron-Vue-Vuetify Error message: [Vue warn]: Unknown custom element: - did you register the component correctly?
            Asked 2020-Jul-16 at 04:02

            First, let me say thank you for helping with my problem. I started struggling with this problem this morning at about 9 am, it's now 3 pm and I am still not able to figure out what if anything will fix this issue. I lost count of the number of youtube videos I watched in an attempt to understand the underlying principles that I might have missed.

            Here are all of the other StackOverflow question-answer pairs that I have also looked at and attempted (sometimes multiple times & in combination even) all without luck:


            - did you register the component correctly?

            "[Vue warn]: Unknown custom element: ..." Error, when using vuetify UI components with the vue-cli-plugin-vuetify

            Vuetifyjs error Unknown custom element: did you register the component correctly



            Vue/Vuetify - Unknown custom element: - did you register the component correctly?

            Unknown custom element: - did you register the component correctly? For recursive components

            At this point I have basically given up on finding a solution for Vuetify, and if I still cannot find a solution by Monday, then I will abandon Vuetify completely and move on to another framework such as VueBootstrap.

            Problem Setup: I am just trying to learn Electron-Vue-Vuetify by using project-based learning. I decided to start by building a simple calculator application just so I can learn how to create components and wire them together with code and perhaps learn how to do SASS/CSS styling/themes as well.

            I created a boiler-plate application using the SimulatedGreg template on GitHub: https://github.com/SimulatedGREG/electron-vue

            I validated the application is running. Then I followed the steps to NPM install Vuetify. I noticed that the vuetify installer modified the App.vue file in the root folder but not the App.vue in the renderer folder. So I moved that around, and I also noticed that the Vuetify installer created a new components folder also at the root of the src folder, so I moved that HelloWorld.vue component into the src/renderer/components folder. I made a few other minor changes to make sure I did the best I could to wire it up. Validated that the Vuetify plugin was installed and saved in the Dev-dependencies in the package.json, and a few other odds and ends.

            Finally, I was able to get where the application would load but all the styling was wrong. Now it's just a flat text rendered to the DOM with no styling at all. I get a bunch of errors in the developer tools:

            Here is the full error log: (Sorry a bit long I know, I tried to remove the long redundant bits)



            Answered 2020-Jul-11 at 01:25

            I'm totally new to Electron, meanwhile I found out that Github reply and tried it.
            It's perfectly working (I've added a button on the top left to kinda test it).

            Maybe not using the whole Electron boilerplate but it get's you with Electron + Vue + Vuetify ready. :)

            I guess this answer may help you debug the whole boilerplate and make it work but it requires some webpack config knowledge.

            Not sure if it's worth a time investment nor the struggle but since it's pointed out by several people, it may actually work. ^^

            Oh and I'm not an expert but you may maybe ask people on the Vue Discord if you want to debug your current configuration instead of my solution.

            Source https://stackoverflow.com/questions/62722398


            npm run build: ValidationError: Invalid options object. Copy Plugin
            Asked 2020-Jun-13 at 07:13

            I'm trying to package an electron app but I'm getting this error:



            Answered 2020-Jun-13 at 07:13

            I had to change the same thing in .electron-vue\webpack.web.config.js

            Source https://stackoverflow.com/questions/62356583


            Nodejs 12 + N-api version conflict
            Asked 2020-May-01 at 19:14

            I'm trying to use the bcrypt-package inside a vue-electron project, but there is an N-api version issue when I try to run it:



            Answered 2020-May-01 at 19:14

            So I found an answer to my own question in the end:

            Electron comes bundled with its own version of nodejs apparently. Updating electron fixed my error.

            Source https://stackoverflow.com/questions/60918441

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install electron-vue

            This boilerplate was built as a template for vue-cli and includes options to customize your final scaffolded app. The use of node@^7 or higher required. electron-vue also officially recommends the yarn package manager as it handles dependencies much better and can help reduce final build size with yarn clean. Make sure to check out A Note for Windows Users to make sure you have all the necessary build tools needed for electron and other dependencies. Just point to the 1.0 branch. Please note that electron-vue has officially deprecated the usage of vue@^1, so project structure, features, and documentation will reflect those changes (legacy documentation).


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone SimulatedGREG/electron-vue

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Consider Popular Command Line Interface Libraries


            by ohmyzsh


            by microsoft


            by nvbn


            by junegunn


            by vercel

            Try Top Libraries by SimulatedGREG


            by SimulatedGREGJavaScript


            by SimulatedGREGJavaScript


            by SimulatedGREGJavaScript


            by SimulatedGREGJavaScript


            by SimulatedGREGJavaScript