Electron Forge + Vite + VueJS Easier Way

/ In this article tutorial, I will show you how easy to setup a an electron project with Vite + Vue + typescript using electron forge.

#VueJs

#Electron

#Programming

✍️ jenuel.dev

Sep. 07, 2023. 5:19 AM

First, I really like Electron Forge because you can easily set up an Electron app from building to publishing using one package and it has an easier way to configure your application.

Another thing is that Electron Forge has built-in templates for Vite and we can easily set up Vue using it. So how do we do that? In this article tutorial, we are going to use Vite + Vue + TypeScript because TypeScript is a really good language for type safety.

Step 1: Create a new project

To demonstrate it, we have to create a new project by running this command in your terminal, if you don't have yarn, install it by running npm install -g yarn or you can use npm instead.

note: You can change my-new-app to whatever project name you want.

yarn create electron-app my-new-app --template=vite-typescript

or use npm:

npm init electron-app@latest my-new-app -- --template=vite-typescript

the my-new-app will be the name of our project. and the template will be vite+typescript.

once, that is done. Open the project in VS Code or whatever IDE or Code Editor you are using.

Step 2: Let us set Vue Dependencies

Since we are using Vite. We need to install a plugin called @vitejs/plugin-vue in our dev dependencies like so:

yarn add -D @vitejs/plugin-vue

Then we have to install vue

yarn add vue

Step 3: Let us configure some files

Configure ./index.html file. We will create a div and set the id to app.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer.ts"></script>
  </body>
</html>

Let us edit the file ./vite.renderer.config.ts . This is where we set Vite configuration for our renderer. We have to add the vites vue plugin.

import { defineConfig } from "vite";
import VuePlugin from "@vitejs/plugin-vue";

// https://vitejs.dev/config
export default defineConfig({
    plugins: [VuePlugin()],
});

Create a file called App.vue inside the ./src directory and add this as content or enter whatever you want.

<template>
    <div>Hello `Electron + Vite + Vue + TypeScript` World!</div>
</template>

Next, let us configure the ./src/renderer.ts . This file is responsible for rendering the frontend. Lets replace the code to this:

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

And that is it! 😁 It's just that easy. You can add and use vue-router , pinia and other dependencies that you like to use in your vue application.

You can now run this to start electron for development:

yarn start

You can build it using this script:

yarn make

You can publish it using this script, To know about publishing you can check Electron forge documentation here https://www.electronforge.io/config/publishers, or let me know in the comment if you want a tutorial on how to publish:

yarn publish

I hope this short article is useful! cheers!

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!