Electron Forge + Vite + VueJS
Tags: vue, javascript, programming, tutorial
Published: 2023-09-07 05:28:25

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

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.

```bash
yarn create electron-app my-new-app --template=vite-typescript
```
or use npm:
```bash
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.

![brojenuel electron vite vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jiuduw1p2t19os488r91.png)

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:
```bash
yarn add -D @vitejs/plugin-vue
```
Then we have to install `vue`
```bash
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`.
```html
<!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.
```ts
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.
```vue
<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:
```ts
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:

```bash
yarn start
```

You can build it using this script:
```bash
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:
```bash
yarn publish
```

I hope this short article is useful! cheers!

[![Support BroJenuel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jnh04cx8pne25m2uait.png)](https://www.buymeacoffee.com/BroJenuel)