Guide to setup Ionic with Vue project for Android

readme.md

Guide to setup Ionic with Vue project

1. Install Vue CLI npm install -g @vue/cli
2. Create your App vue create my-vue-app
3. Choose the recommended default setup (with router, store, etc)
4. Add Ionic/Vue as a dependency of your project npm install @ionic/vue
5. Add Ionic as a Vue plugin in your main.js

// [...]
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

6. Add ionic script to package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "ionic:build": "vue-cli-service build",
  "ionic:serve": "vue-cli-service serve"
}

7. Install Android Studio and setup an emulator
8. Add android to capacitor ionic capacitor add android
9. Run your app in Android Studio ionic capacitor copy android
10. Once Android Studio is started you should be able to start your app using the run button

References

• https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
• https://ionicframework.com/docs/building/android
• ionic-team/ionic-cli#3819 (comment)