Electron Forge
  • Getting Started
  • Importing an Existing Project
  • CLI
  • Core Concepts
    • Why Electron Forge?
    • Build Lifecycle
  • Configuration
    • Configuration Overview
    • TypeScript Setup
    • Plugins
      • Webpack Plugin
      • Vite Plugin
      • Electronegativity Plugin
      • Auto Unpack Native Modules Plugin
      • Local Electron Plugin
      • Fuses Plugin
    • Makers
      • AppX
      • deb
      • DMG
      • Flatpak
      • pkg
      • RPM
      • Snapcraft
      • Squirrel.Windows
      • WiX MSI
      • ZIP
    • Publishers
      • Bitbucket
      • Electron Release Server
      • GitHub
      • Google Cloud Storage
      • Nucleus
      • S3
      • Snapcraft
    • Hooks
  • Built-in Templates
    • Webpack
    • Webpack + Typescript
    • Vite
    • Vite + TypeScript
  • Guides
    • Code Signing
      • Signing a Windows app
      • Signing a macOS app
    • Custom App Icons
    • Framework Integration
      • React
      • React with TypeScript
      • Vue 3
    • Developing with WSL
  • Advanced
    • Auto Update
    • Debugging
    • Extending Electron Forge
      • Writing Plugins
      • Writing Templates
      • Writing Makers
      • Writing Publishers
    • API Docs
Powered by GitBook
On this page
  • Setting up the app
  • Adding dependencies
  • Integrating Vue 3 code

Was this helpful?

Edit on GitHub
  1. Guides
  2. Framework Integration

Vue 3

How to create an Electron app with Vue and Electron Forge

PreviousReact with TypeScriptNextDeveloping with WSL

Last updated 4 months ago

Was this helpful?

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 template.

npx create-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>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer.js"></script>
  </body>
</html>

Add the contents from the template back to src/App.vue.

<template>
  <h1>💖 Hello World!</h1>
  <p>Welcome to your Electron application.</p>
</template>

<script setup>
console.log('👋 This message is being logged by "App.vue", included via Vite');
</script>

Mount App.vue into the DOM with Vue's createApp API.

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

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

Configure the Vue plugin for Vite.js.

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

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