Create a Desktop App with Vue, Vuetify, and Electron

Electron is an app framework to let us build desktop apps that are based on web apps.

Vuetify lets us build a web app with Material Design.

We can use the vue-cli-plugin-electron-builder generator to build an Electron app based on Vue.js.

In this article, we’ll look at how to build a simple Electron Vue app with Vuetify and Electron.

Getting Started

We can create our Vue project by running:

npx vue create .

after going into our project folder.

We follow the instructions to create the Vue project.

Then in the project folder, we run:

vue add electron-builder

Once we did that, we add Vuetify to our Vue app by running:

vue add vuetify

Now all the boilerplate code has been added for us.

We then run:

npm run electron:serve

or

yarn electron:serve

to preview our app.

Writing the Code

Now can create our app with Vuetify.

We can create a simple app by adding the following to App.vue :

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

    <span class="mr-2">App</span>
      </div>
    </v-app-bar>

    <v-main>
      <v-form v-model="valid" @submit.prevent="add">
        <v-container>
          <v-row>
            <v-col cols="12" md="6">
              <v-text-field v-model="title" :rules="rule" label="book title" required></v-text-field>
            </v-col>

            <v-col cols="12" md="6">
              <v-text-field v-model="author" :rules="rule" label="book author" required></v-text-field>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="12">
              <v-btn text type="submit" color="primary">add</v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-form>

      <v-simple-table>
        <template v-slot:default>
          <thead>
            <tr>
              <th class="text-left">title</th>
              <th class="text-left">author</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(b, i) in books" :key="b.id">
              <td>{{ b.title }}</td>
              <td>{{ b.author }}</td>
              <td>
                <v-btn text color="primary" @click="remove(i)">remove</v-btn>
              </td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </v-main>
  </v-app>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  name: "App",
  data: () => ({
    title: "",
    author: "",
    rule: [(v) => !!v || "required"],
    valid: false,
    books: [],
  }),
  methods: {
    add() {
      if (!this.valid) {
        return;
      }
      const { title, author } = this;
      this.books.push({
        id: uuidv4(),
        title,
        author,
      });
    },
    remove(index) {
      this.books.splice(index, 1);
    },
  },
};
</script>

We created a book app with a form and a table.

v-app-bar is the top app bar.

v-main has the main content of the app.

v-form creates the form.

The v-model attribute on the form has the form validation state.

The @submit.prevent directive listens for the submit event to be emitted.

prevent calls preventDefault implicitly.

Inside the form, we have the v-text-field to add the text field.

v-model binds to the model states.

The rules prop has the form validation rules.

The rules are defined with an array of functions with the inputted value as the parameter.

The table is created with the v-simple-table component.

And we populate the default slot with the regular table elements.

In the methods object, we have the add method to let us add entries to this.books .

We check for form data validity with the this.valid property.

A unique ID is generated for each entry with the uuid package.

We need a unique ID for the key prop in the table so the items are rendered correctly.

We install that by running:

npm i uuid

Also, we have the remove method to remove items by its index.

Now we should be able to add and remove items as we wish.

Build Our App

To build our app into an executable file, we run:

yarn electron:build

with Yarn or:

npm run electron:build

with NPM.

Conclusion

We can create our a good looking Vue desktop app with Vuetify, Vue, and the vue-cli-plugin-electron-builder code generator.