You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

How to use Vue.js with Ionic 4

Paul Halliday
Paul Halliday

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

Here's the code for this article.

Ionic

Paul Halliday

👋 Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!