Building a Desktop App with Electron and Vue.js

Recently my girlfriend asked me if I knew a good app for taking Notes of Sources when researching something for university. I did not know any from the top of my head so I thought I should just build one myself. Since she would like to have a Desktop application I remembered this [Changlog episode] podcast and decided to give Electron a go.

Because I browse r/javascript quite frequently and read a lot about it I wanted to use Vue.js as a Framework for handling my views.

In this and following posts I wouldd like to share some information about what I learn from working on this project.

Getting started

Since setting up the development environment can be quite a pain with a lot dependencies I opted for a
electron-vue-boilerpate solution (thanks to the author).

To set this up yourself you just have to run

git clone git@github.com:bradstewart/electron-boilerplate-vue.git
cd electron-boilerplate-vue
npm install && npm start

Now you should have a functioning Hello World desktop app runnning. Super easy.

To track this project in your own git repository just run

rm -rf .git
git init
git add.
git commit -m 'inital commit'
git remote add origin 'URL TO YOUR REPO'
git push -u origin master

Now its time to play around.

Creating a component

First I wanted to understand how Vue.js works, and since I am familiar with JS and ES6 I just dug right into the code.
If something is not directly clear the Vue.js API should help out.

For this part lets create a component. I just copied the app/components/Hello.vue to app/components/Entry.vue.

Since Entries are the things I want to save in my application.

The Syntax was pretty straight forward. Just add new attributes to the Object that is returned in the data function and place them into the HTML surrounded by two curly brackets.

To get User input add a v-model attribute with the corresponding attribute in the Object as its value and done.

For a start I want a Description, a Source and Content attribute in my Component which now looks like this:

<template>
    <div class="entry-details">
        <div class="source">
            <h2>Source</h2>
            <input v-model="source" placeholder="Add Source">
            <p>Source is: {{ source }}</p>
        </div>
        <div class="description">
            <h2>Description</h2>
            <textarea v-model="description" placeholder="Add description"></textarea>
        </div>
        <div class="content">
            <h2>Content</h2>
            <textarea v-model="content" placeholder="Add content"></textarea>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            source: '',
            description: '',
            content: '',
        };
    }
};
</script>

Using a component

The component is done but how do we display it? Very easily.

Just edit the file app/App.vue. Remove all the stuff that is between the template tags, add a new tag that has the name of your component in lower case(and use ‘-’ instead of camelCase, so EntryComponent would be ).

In the script part replace Hello with Entry and you are done.

This is what the App.vue file should look like now.

<template>
    <entry></entry>
</template>

<script>
  import Entry from './components/Entry'

  export default {
    components: {
      Entry
    }
  }
</script>

<style>
  html {
    height: 100%;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  #app {
    margin-top: -100px;
    max-width: 600px;
    font-family: Helvetica, sans-serif;
    text-align: center;
  }
  .logo {
    width: 100px;
    height: 100px
  }
</style>

Now you just need to run

npm start

and your App should work.

Conclusion

Seems pretty easy to get a Desktop app running, right?

In the next post I will explain how I handle multiple Entries and how I save them on the Disk :)

You can also check out the Repo of the App to see its current state, feel free to send a Pull Request if you find something I should improve.