Vue 3

How to create an Electron app with Vue and Electron Forge

Vue 3 can be added to Electron Forge's Vite template with a few setup steps.

The following guide has been tested with Vue 3 and Vite 4.

Setting up the app

Create an Electron app using Electron Forge's Vite template.

npm init electron-app@latest my-vue-app -- --template=vite

Adding dependencies

Add the vue npm package to your dependencies and the @vitejs/plugin-vue package to your devDependencies:

npm install vue
npm install --save-dev @vitejs/plugin-vue

Integrating Vue 3 code

You should now be able to start using Vue components in your Electron app. The following is a very minimal example of how to start to add Vue 3 code:

Replace the contents of src/index.html with a <div> element with the #app id attribute.

<!DOCTYPE html>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <div id="app"></div>
    <script type="module" src="/src/renderer.js"></script>

Last updated