How to use Ionic 4 with Vue.js

Since the release of Ionic 4, we’re now able to take advantage of the flexibility of the framework. This has spawned multiple iterations such as @ionic/vue, @ionic/react and others. In this article, we’ll be focusing on how to get started with Ionic 4 and Vue.js.

Installing the Vue.js CLI

Firstly, ensure you have the latest version of Node.js installed on your machine. You can check the current status of your Node environment by running the following in your terminal:

# Node version
$ node -v

# npm version
$ npm -v

With our environment set up correctly, we can now install the Vue.js CLI:

# Install the Vue CLI
$ npm install -g @vue/cli

After this has completed, you can check to see if the CLI installed as intended:

# Check CLI version
$ vue -V

New Vue.js project

The best way to create a Vue.js and Ionic project currently is to use the Vue CLI. The feature may be implemented in the Ionic CLI in the future, but for now, we’ll simply create a new Vue project and manually add the Ionic modules.

# New Vue project
$ vue create hello-vue-ionic

# Project options
> default

# Change directory
$ cd hello-vue-ionic

# Open up in VS Code && run in browser
$ code . && npm run serve

Adding Ionic

Cool. We’ve now got a Vue.js project running in our browser, but we’ll need to add Ionic as a dependency in order to use it.

In another terminal window, run the following to add Ionic:

$ npm i @ionic/vue @ionic/core vue-router

We’ll then have to restart the server with npm run serve.

Next, head over to main.js to tell Vue that we’d like to use Ionic as a Vue plugin:

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

import Vue from 'vue'
import IonicVue from '@ionic/vue';

import App from './App.vue'
Vue.config.productionTip = false;

Vue.use(IonicVue);

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

Great. We can now use Ionic anywhere inside of our application!

Using Ionic

To test this works as intended, we can head over to App.vue and create a simple application with a navigation bar and card:

<template>
  <ion-app id="app">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Ionic and Vue</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>Ionic and Vue is</ion-card-subtitle>
          <ion-card-title>AWESOME!</ion-card-title>
        </ion-card-header>
      </ion-card>
    </ion-content>
  </ion-app>
</template>

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

This gives us the following result:

Ionic and Vue

We’ve now got an up and running Ionic and Vue.js application! 🙌🙌

If you’d like to read more Ionic and Vue tutorials, you may be interested in the Learn Ionic 4 From Scratch book.