
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='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: