Skip to content

Instantly share code, notes, and snippets.

@dorajistyle

dorajistyle/vue_ionic_capacitor_electron_config.md

Last active June 1, 2022 19:52
Show Gist options
  • Save dorajistyle/22a5e153a0d8432e704b7e7ceee4b7e3 to your computer and use it in GitHub Desktop.
Save dorajistyle/22a5e153a0d8432e704b7e7ceee4b7e3 to your computer and use it in GitHub Desktop.
Download ZIP
Vue-Ionic-Capacitor-Electron-Config
Raw
vue_ionic_capacitor_electron_config.md

Predecessors

Install yarn

curl --compressed -o- -L https://yarnpkg.com/install.sh | bash

Install vue-cli

Tested @vue/cli version is 4.4.6.

yarn global add @vue/cli

(Optional) Install serve

yarn global add serve

Create vue project

vue create PROJECT-NAME

◉ Babel ◉ TypeScript ◉ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◉ Unit Testing ◉ E2E Testing

Create .env

VUE_APP_NAME=PROJECT-NAME

Create .env.dev

VUE_APP_NAME=PROJECT-NAME DEV

Install Ionic/vue

yarn add  @ionic/core @ionic-native/core @ionic/pwa-elements @ionic/[email protected] core-js

Install Capacitor

yarn add @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android @capacitor/electron

Add ./vue.config.js (https://cli.vuejs.org/config/#global-cli-config)

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? ''
    : '/'
}

Update src/router/index.ts

import { IonicVueRouter } from '@ionic/vue'; // add this
// Replace all 'VueRouter' to 'IonicVueRouter'

// For the offline routing, comment out history mode config of IonicVueRouter
  // mode: "history",
  // base: process.env.BASE_URL,

Update src/main.ts

import Ionic from "@ionic/vue";
import { defineCustomElements } from "@ionic/pwa-elements/loader";

Vue.use(Ionic);

Vue.config.ignoredElements = [/^ion-/];

......

defineCustomElements(window); // Add this into the last line.

Update src/App.vue

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router main :animated="true" id="main-content" />
      <ion-menu-controller></ion-menu-controller>
      <ion-modal-controller></ion-modal-controller>
      <ion-toast-controller></ion-toast-controller>
      <ion-alert-controller></ion-alert-controller>
      <ion-loading-controller></ion-loading-controller>
      <ion-actionsheet-controller></ion-actionsheet-controller>
    </ion-app>
  </div>
</template>
<script>
export default {
  name: "app",
  components: {}
};
</script>
<style src='@ionic/core/css/core.css'></style>
<style src='@ionic/core/css/ionic.bundle.css'></style>
<style lang="scss">
</style>

Update public/index.html

   // Add below inside of the head tag
   <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <link rel="manifest" href="/site.webmanifest">

Update src/App.vue

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router main :animated="true" id="main-content" />
      <ion-menu-controller></ion-menu-controller>
      <ion-modal-controller></ion-modal-controller>
      <ion-toast-controller></ion-toast-controller>
      <ion-alert-controller></ion-alert-controller>
      <ion-loading-controller></ion-loading-controller>
      <ion-actionsheet-controller></ion-actionsheet-controller>
    </ion-app>
  </div>
</template>
<script>
export default {
  name: "app",
  components: {}
};
</script>
<style src='@ionic/core/css/core.css'></style>
<style src='@ionic/core/css/ionic.bundle.css'></style>

Update src/views/*.vue

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>HEADER-TITLE</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      CONTENT
    </ion-content>
  </div>
</template>

Build and serve

rm -rf dist
yarn run build
serve dist/

Capacitor

npx cap init --web-dir=dist
npx cap add ios
npx cap add android
npx cap add electron

npx cap open ios
npx cap open android
npx cap open electron

npx cap sync electron

Electron Example (Windows executable)

yarn add electron-packager -g
electron-packager --help

cd electron
electron-packager . --platform=win32 --overwrite
zip -r PROJECT-NAME.zip PROJECT-NAME-win32-x64
mv PROJECT-NAME.zip /mnt/c/Users/USER-NAME/Downloads/

References

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment