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
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!
Top comments (0)