Setting up a Basic Ionic Vue App (Beta)

General News, Hybrid Apps, Ionic, Vue.

Document published on 19/August/2020

I’ve started creating my first app in Ionic. I wanted to utilise Vue.js as it is something I have been studying of late and I enjoy working in it more than Angular or React. I initially was going to use NativeScript Vue however NativeScript at the moment is in a bad place (currently being off-loaded to a new core team) and has stagnated badly over the last 12 months. The decision then was between Vue Native or Ionic Vue. I choose Ionic as I felt the documentation was better and I liked the idea of having the app accessible via the web, not just via a native mobile app.

The only downside is Vue support (as of August 2020) is still only in Beta in Ionic. However, looking into it more it seemed the only real issue was the increased complexity in getting set up initially. This will be easier to do in the final version but for now it is a little tricky with some manual steps. Below I will outline those steps.

I will assume you have node and npm installed.

Presteps:

Install latest Ionic CLI via command line:

  npm uninstall -g ionic
  npm install @ionic/cli -g

First line is needed if you have the previous CLI installed – you should first uninstall it.

Install/Upgrade the Vue CLI:

  npm uninstall -g vue-cli
  npm install @vue/cli -g

Again first line is needed if you have the previous CLI installed – you should first uninstall it.

First Steps:

Firstly you will need to create a regular Vue app. This is the first thing that may surprise you – we are not creating an Ionic app – this is because, as mentioned, Ionic Vue is still in Beta so Ionic has no current command CLI command available to us.

So, to do this, in the command line write:

  vue create my-first-ionic-vue-app

In the new Vue CLI you can add some packages during this initial creation. You MUST select “router” – all others are optional based on your personal preference.

Next make sure you change working directory in your command window to the project folder, e.g.:

  cd my-first-ionic-vue-app

Don’t worry if you created the app in the previous step without selecting router by mistake, you can add it after creation via:

  vue add router

(Sidebar – note how we are not using “npm” here – that is because in Vue CLI 3 we have the concept of “Vue plugins” as well as npm packages – the Vue Router is a plugin so we add it using “vue add”)

Open up your development environment, e.g. VS Code, to make sure your app looks as expected – i.e. like a Vue app.

The first thing we will do is add in the Ionic Vue package:

  npm install @ionic/vue@0.0.9

Using 0.0.9 is key. You wont find it in the official docs but if you don’t do this then version 0.0.4 will be installed by default. This in itself is not an issue, however I found that if I installed 0.0.4 then I also needed to install a very particular version of ionicons too, namely

  npm install ionicons@4.5.9-1

But with 0.0.9 I did not receive this error. To see if it has moved past 0.0.9 see here

You should also install Ionic Core:

  npm install @ionic/core

I have gotten it to work without this – as @ionic/vue comes with a version of Core – however I guess adding it explicitly ensures the most up to date version of core, regardless of @Ionic/Vue’s current state.

Final Steps

Finally we need to update some of the code itself from the default Vue app setup to a more Ionic way of doing things.

Firstly in main.js:

import Vue from 'vue'
import App from './App.vue'

import Ionic from "@ionic/vue"
import "@ionic/core/css/core.css"
import "@ionic/core/css/ionic.bundle.css"

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

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

Next in App.Vue replace code with:

<template>
<div id="app">
<ion-app>
<ion-vue-router />
</ion-app>
</div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

Don’t worry about the router above just yet, we will get to that next. A lot of the documentation I have read says to add a new file called router.js to the root of you project – you don’t need to do this – indeed if you do it seems to cause issues with eslint. It is perfectly fine to leave it where it is in the ‘router’ folder. We just need to make some changes to the content of the file.

at the top of router/index.js:

import Vue from 'vue'
import Home from '../views/Home.vue'
// import VueRouter from 'vue-router'
// Vue.use(VueRouter)
import { IonicVueRouter } from '@ionic/vue'
Vue.use(IonicVueRouter)

and at the bottom of the same file:

const router = new IonicVueRouter({routes})
export default router

Note how we replace the VueRouter with our new IonicVueRouter .That’s all we need to do to get the new router working.

Finally, lets update our Home.Vue and About.Vue to use Ionic in the html.
About.vue:

<template>
  <div class="ion-page">
  <ion-header>
  <ion-toolbar>
  <ion-buttons slot="start">
  <ion-back-button>
  </ion-back-button>
  </ion-buttons>
  <ion-title>About Page</ion-title>
  </ion-toolbar>
  </ion-header>
 <ion-content class="ion-padding">
  <h1>This is the About Page</h1>
  </ion-content>
  </div>
</template>

And something like this in Home.vue

<template>
<div class="ion-page">
<ion-header>
<ion-toolbar><ion-title>Hello World</ion-title></ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Welcome To @ionic/vue</h1>
<img alt="Vue logo" src="../assets/logo.png">
<ion-button expand="block" @click="navigate()">Go to About Page</ion-button>
</ion-content>
</div>
</template>

<script>
export default {
name: 'home',  
methods: {    
navigate: function () {      
this.$router.push('about')    
}  }}
</script>

To see it in action type into your command line terminal 

  npm run serve

and go to localhost:8080 in your browser.