How to use Vue.js with Ionic 4

How to use Vue.js with Ionic 4

Have you ever wanted to use Ionic with other frameworks than Angular? Now you can! Ionic 4 is in early alpha, so the implementation is likely to change as time goes on, but let's investigate this with Vue.js:

If you haven't already, download the Vue CLI and create a new Vue.js project:

# Download the Vue CLI
$ npm install vue-cli -g

# Create a new Vue.js Project
$ vue init webpack-simple ionic-vue

# Navigate to ionic-vue
$ cd ionic-vue

# Install Dependencies
$ npm install

# Run project
$ npm run dev

Now we can add Ionic Core to our index.html:

<script src=''></script>

To use custom web components (as Ionic 4 is based on the Stencil compiler), we'll need to tell Vue to ignore the following elements inside of our main.js:

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

Vue.config.ignoredElements = [

new Vue({
  el: '#app',
  render: h => h(App)

Inside of our App.vue, we can then create the following template:

    <ion-page class="show-page">
          <ion-title>Ionic 4 + Vue</ion-title>
      <ion-content class="content" padding>
            <ion-item v-for="user of users" v-bind:key="">
              <ion-label full>{{}}</ion-label>

As you may be able to infer, this effectively gives us a toolbar with a list of names. We'll be getting the names from a third party API, we'll need to install axios for this:

$ npm install axios

Now that we can create HTTP requests with ease, let's get our data inside of our created() lifecycle hook:

import axios from 'axios';
export default {
  name: 'app',
  data () {
    return {
      users: []
  created() {
      .then(response => {
        this.users =

If everything has been done correctly, we should now have a user interface that is able to contextually change between Android / iOS devices:


Here's the code for this article.