How to create a Desktop application using Electron and Vue

In this article, we are going to create a simple to-do application using Vue and Electron.

Preview:

This is how our finished app is going to look like.

Setup:

Let's start our setup by installing @vue/cli .

yarn global add @vue/cli

After installation let’s create a new project.

vue create todo-app

Now let's choose the “Manually select features” option. This is what my selection looks like.

I am going to choose “vue 2.x”, “Sass/Scss (with node-sass)”, “ESLint with error prevention only”, “Lint on save”, and “In dedicated config files” as the next options.

After installation navigate inside the newly created folder

cd todo-app

Now let’s add electron-builder to our newly scaffolded project.

vue add electron-builder

Let’s install uuid package for generating unique UUIDs for our todos.

yarn add uuid

I am going to use Buefy as a component library.

yarn add buefy

To set up Buefy open main.js add the following lines of code.

// main.js
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.use(Buefy);

Let's also add Material icons to our project.

// public/index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">

Now add the following code inside background.js file

// background.js
// inside createWindow function
win.maximize();
win.removeMenu();

Now create the vue.config.js file inside the root folder and add the following code to it.

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
    }
  }
}

We are done with the setup. You can try running the project using yarn electron: serve.

Now let’s start with the coding part.

Code:

Let's start with creating our vuex store first.

Our store state is going to have two properties, a list of todos and the value of the applied filter.

state: {
  todos: [],
  filter: 'all',
},

Let's add mutations for our state

addTodo(state, text) {
  const newTodo = {
   id: uuidV4(),
   text,
   isCompleted: false,
  };
  state.todos = [...state.todos, newTodo];
},
deleteTodo(state, id) {
  state.todos = state.todos.filter(t => t.id !== id);
},
toggleIsCompleted(state, id) {
  state.todos = state.todos.map(t => {
    if (t.id === id) {
      t.isCompleted = !t.isCompleted;
    }
    return t;
  })
},
updateFilter(state, filter) {
  state.filter = filter;
},

now let's create a getter for getting the to-do list based on the applied filter.

todos(state) {
  switch (state.filter) {
    case 'pending':
      return state.todos.filter(s => !s.isCompleted);
    case 'completed':
      return state.todos.filter(s => s.isCompleted);
    default:
      return state.todos;
   }
}

This is how our final store looks like.

Now let’s create four new components

AddTodo.vue

This component will have an input box for allowing users to enter todo text. And when the user hits the enter it will commit a mutation to add new todo in the store.

TodoItem.vue

This component is going to accept the “todo” item as a prop. And will show the todo text with a checkbox and delete icon.

Changin the checkbox state and clicking on the delete icon will commit the mutations.

TodoList.vue

This component will simply iterate over the filtered to-do list.

Filters. vue

This component will simply show the list filters in the tab bar, and on selection will commit a mutation.

Now update App. vue to include newly created components.

And that’s it. We are done with the coding part as well.

Now let's build the executable file by running the following command.

yarn electron:build

Navigate to the dist_electron folder and you will see todo-app setup 0.1.0.exe file there.

You can double-click on the “.exe” file to install the new app on your machine.

Bonus:

You may have noticed after closing and reopening the app, your todos are gone. Let's fix it.

let’s install vuex-electron

yarn add vuex-electron

Now update the store/index.js file to include the following code

import Vue from 'vue';
import Vuex from 'vuex';
// ...
import { createPersistedState} from "vuex-electron";

Vue.use(Vuex);

export default new Vuex.Store({
  // ...
  plugins: [
    createPersistedState(),
  ],
  // ...
});

Now rebuild and reinstall the new todo app.

And that’s it. Cheers!