How to Start Developing Electron Application with Vue.js

I’m learning how to develop desktop application using electron with Vue.js. Developing electron application is like developing web application so having one or more good JS framework is a good thing, so I am going to write about how to just do it.

Steps

  1. Install Vue.js globally.
    npm install -g @vue/cli
  2. Execute the following command to install and configure Vue.js for the development environment.
    vue create hoge
  3. Using down arrow key, select Manually select features and hit enter.
    ? Please pick a preset: (Use arrow keys)
    default (bebel, eslint)
    > Manually select features
  4. Using down arrow key, select Router with space and hit enter.
    ? Please pick a preset: Manually select features.
    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    Babel
    TypeScript
    Progressive Web App (PWA) Support
    Router
    CSS Pre-processors
    Linter / Formatter
    Unit Testing
    E2E Testing
  5. Type n and hit enter with the following prompt.
    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
  6. Using arrow key, select ESLint + Prettier and hit enter.
    ? Pick a linter / formatter config: (Use arrow keys)
    ESLint with error prevention only
    EsLint + Airbnb config
    ESLint + Standard config
    > ESLint + Prettier
  7. Select Lint on save and hit enter.
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    Lint on save
    Lint and fix on commit.
  8. Next, select In dedicated config files option.
    ? Where do you prefer placing config for Bebel, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
    In package.json
  9. It’s up to you but I am select N as a option here because I am not planning to use the selection for future projects.
    ? Save this as a preset for future projects? (y/N)
  10. Wait for a while it’s installing and configuring Vue.js for your project.
  11. Navigate into the project directory.
    cd hoge
  12. Next, add the component to build Electron application with Vue.js by entering the following command.
    vue add electron-builder
  13. Select the version of Electron you would like to use and hit enter.
    ? Choose Electron Version (Use arrow keys)
    ^4.0.0
    ^5.0.0
    > ^6.0.0
  14. To test Vue.js enabled Electron application, run the following command.
    npm run electron:serve
  15. To generate distributable files, run the following command.
    npm run electron:build
  16. You will get hoge/dist_electron/hoge-0.1.0.dmg file if you are on MacOS. The file can be distributable to whoever wants to run your application.

Recap

Electron is a way to distribute your web application as a desktop application and having Vue.js as a framework for your UI is a very efficient way to develop your application.

Author: admin

A software engineer in greater Seattle area

Leave a Reply

Your email address will not be published. Required fields are marked *