The latest trend to which developers must adapt is writing one codebase for multiple operating systems.

Electron is a JavaScript framework that enables you to create desktop applications with simple JavaScript and HTML and convert websites into executable applications that can make full use of all the features of a Windows, Mac, or Linux operating system.

Vue is a library designed for building interactive and progressive web applications. It provides data-reactive components with a simple and flexible API.

In this tutorial, we’ll walk through how to build a markdown preview app with Vue and Electron.

Prerequisites

To follow along with this tutorial, you’ll need the following.

• Familiarity with HTML, CSS, and Javascript (ES6+)
• VS Code or any code editor installed on your development machine
• Basic knowledge of Vue

What we’ll build

We’re going to build a desktop application that previews markdown codes. Basically, we’ll have a grid with two columns: one for the text editor and another for the preview.

The finished result will look something like this:

Setting up Vue

Create a new Vuejs application using the Vue CLI. If you don’t have the Vue CLI installed on your development machine, you can install it using this command:

npm install -g @vue/cli

The -g flag will install it globally on your machine.

Next, create a new Vue application with the CLI. Use the vue create command followed by the name of the project.

The name of our application is markdown-previewer, so we can create it by running this command:

vue create markdown-previewer

Running the vue create markdown-previewer will create a new Vue application. But first, you’ll be prompted with some questions to set up the application.

Step 1

Choose Manually select features and hit enter. This will enable you to explicitly choose which libraries you want to include in your new project.

Step 2

To select and control an item on the features list, your mouse won’t work here, so use your arrows to move up and down and then press the spacebar when you want to select/deselect a feature. Select Router, Babel, and Linter.

Step 3

We won’t use history mode; instead, we’ll use hash mode.

Step 4

Select ESLint + standard config. This is basically a config for our linter. ESLint helps you maintain a pattern when writing code.

Step 5

Click Lint on save. This will run lint on the codes when you save it.

Step 6

Select package.json. This is where we’ll store all our project dependencies.

Step 7

Type Y or N, depending on whether you want to save this as a preset. This saves you the time going through all these steps when creating a new Vue application.

Click enter to start scaffolding a new Vue application.

When the app has been created, you should see this on your terminal:

To run the application, move into the project directory and then run npm run serve.

cd markdown-previewer
code . && npm run serve

The code . command will open the project in VS Code, but you’re welcome to use any code editor of your choice.

After compiling, the app will be output on the terminal that the application is running on port http://localhost:8080/.

The port number might differ on some local machines. For instance, if you have an application already running on port 8080, Vue will use the closest port to serve your application.

If you access http://localhost:8080/ on the browser, you should see the following.

Now that we have our Vue app up and running, it’s time to add the electron-builder package.

#vue #electron #javascript #developer