Building a Markdown Previewer App with Vue and Electron
The world of development is constantly evolving, and one of the latest trends is writing a single codebase for multiple operating systems. Electron, a JavaScript framework, enables developers to create desktop applications using simple JavaScript and HTML, and convert websites into executable applications that can utilize all the features of Windows, Mac, or Linux operating systems. Vue, a library designed for building interactive and progressive web applications, provides data-reactive components with a simple and flexible API.
What We’ll Build
In this tutorial, we’ll create a desktop application that previews markdown codes. Our finished product will feature a grid with two columns: one for the text editor and another for the preview.
Prerequisites
To follow along with this tutorial, you’ll need:
- Familiarity with HTML, CSS, and JavaScript (ES6+)
- VS Code or any code editor installed on your development machine
- Basic knowledge of Vue
Setting Up Vue
To begin, create a new Vuejs application using the Vue CLI. If you don’t have the Vue CLI installed, you can install it globally using the command npm install -g @vue/cli. Next, create a new Vue application with the CLI using the command vue create markdown-previewer.
Configuring the Application
When prompted, choose to manually select features and select Router, Babel, and Linter. We’ll use hash mode instead of history mode, and select ESLint + standard config for our linter. We’ll also choose to lint on save and select package.json to store our project dependencies.
Adding Electron-Builder
To package and build a ready-for-distribution Electron app, we’ll add the electron-builder package using the Vue add command. This will create a background.js file in the src directory, where Electron comes into play.
Installing Bootstrap
Next, we’ll install Bootstrap to set up our user interface more quickly. Use the vue add command to install Bootstrap, and then set up our UI by replacing the code in components/HelloWorld with a basic grid system in Bootstrap.
Setting Up the Code Editor
We’ll use the Ace package to set up our code editor. Install the package and define the ace package in the HelloWorld.vue component. Define some states for the editor, including the content state and height.
Implementing the Markdown Previewer
We’ll implement the markdown previewer in two ways: the easy way and the complex way. The complex way involves writing our own custom Vue directive for markdown using regular expressions. The easy way involves installing a package to help us manipulate our data.
The Complex Way
To implement the markdown previewer the complex way, we’ll create a custom Vue directive for markdown using regular expressions. We’ll start by creating a directive directory inside the src director, then create a decode.js file to write our markdown configs. Next, we’ll register the markdown in the main.js file and set up the code for our markdown.
The Easy Way
The easy way involves installing the vue-directive-markdown package to help us manipulate our data. We’ll register and configure it in our main.js file so that we can access it globally in our application.
Conclusion
In this tutorial, we’ve built a markdown previewer app using Vue and Electron. Understanding how to write custom directives will take your Vue skills to the next level. The need to write one codebase for both desktop and web is something we all have to adapt to. Head to GitHub for the complete source code.