DEV Community

Cover image for Electron Forge + Vite + VueJS
Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on • Edited on • Originally published at jenuel.dev

Electron Forge + Vite + VueJS

Copied From my Article: https://brojenuel.com/blog/Electron-Forge-Vite-VueJS-Easier-Way

You can also check this video:

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
Enter fullscreen mode Exit fullscreen mode

or use npm:

npm init electron-app@latest my-new-app -- --template=vite-typescript
Enter fullscreen mode Exit fullscreen mode

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

brojenuel electron vite vue

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
Enter fullscreen mode Exit fullscreen mode

Then we have to install vue

yarn add vue
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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()],
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

You can build it using this script:

yarn make
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

I hope this short article is useful! cheers!

Support BroJenuel

Top comments (0)