How to use Vue.js with Ionic 4

04 Oct 2017

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='https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js'></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 = [
  'ion-app',
  'ion-page',
  'ion-header',
  'ion-toolbar',
  'ion-title',
  'ion-content',
  'ion-list',
  'ion-item',
  'ion-label',
  'ion-button'
]

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

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

<template>
  <ion-app>
    <ion-page class="show-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic 4 + Vue</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="content" padding>
          <ion-list>
            <ion-item v-for="user of users" v-bind:key="user.id">
              <ion-label full>{{user.name}}</ion-label>
            </ion-item>
          </ion-list>
      </ion-content>
    </ion-page>
  </ion-app>
</template>

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() {
      axios.get('http://jsonplaceholder.typicode.com/users')
      .then(response => {
        this.users = response.data
      })
  }
}

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

Ionic-4-ios-md