diff --git a/SUMMARY.md b/SUMMARY.md index e47e009..a969811 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -57,6 +57,7 @@ * [React](guides/framework-integration/react.md) * [React with TypeScript](guides/framework-integration/react-with-typescript.md) * [Vue 2](guides/framework-integration/vue-2.md) + * [Vue 3](guides/framework-integration/vue-3.md) * [Developing with WSL](guides/developing-with-wsl.md) ## Advanced diff --git a/guides/framework-integration/vue-3.md b/guides/framework-integration/vue-3.md new file mode 100644 index 0000000..7718001 --- /dev/null +++ b/guides/framework-integration/vue-3.md @@ -0,0 +1,131 @@ +--- +description: How to create an Electron app with Vue and Electron Forge +--- + +# Vue 3 + +Vue 3 can be added to Electron Forge's Vite template with a few setup steps. + +{% hint style="info" %} + +The following guide has been tested with Vue 3 and Vite 4. + +{% endhint %} + +## Setting up the app + +Create an Electron app using Electron Forge's [Vite](../../templates/vite.md) template. + +{% tabs %} +{% tab title="yarn" %} + +```bash +yarn create electron-app my-vue-app --template=vite +``` + +{% endtab %} + +{% tab title="npm" %} + +```bash +npm init electron-app@latest my-vue-app -- --template=vite +``` + +{% endtab %} +{% endtabs %} + +## Adding dependencies + +Add the `vue` npm package to your `dependencies` and the `@vitejs/plugin-vue` package to your `devDependencies`: + +{% tabs %} +{% tab title="yarn" %} + +```bash +yarn add vue +yarn add --dev @vitejs/plugin-vue +``` + +{% endtab %} + +{% tab title="npm" %} + +```bash +npm install vue +npm install --save-dev @vitejs/plugin-vue +``` + +{% endtab %} +{% endtabs %} + +## 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: + +{% tabs %} +{% tab title="src/index.html" %} + +Replace the contents of `src/index.html` with a `
` element with the `#app` id attribute. + +```html + + + + + Hello World! + + +
+ + + +``` + +{% endtab %} + +{% tab title="src/App.vue" %} + +Add the contents from the template back to `src/App.vue`. + +```vue + + + +``` + +{% endtab %} + +{% tab title="src/renderer.js" %} + +Mount `App.vue` into the DOM with Vue's `createApp` API. + +```javascript +import { createApp } from "vue"; +import App from "./App.vue"; + +createApp(App).mount("#app"); +``` + +{% endtab %} + +{% tab title="vite.renderer.config.mjs" %} + +Configure the Vue plugin for Vite.js. + +```javascript +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; + +// https://vitejs.dev/config +export default defineConfig({ + plugins: [vue()], +}); +``` + +{% endtab %} +{% endtabs %}