Announcing the Ionic Vue Beta

2020-09-09 Update: We’ve released a (new) new beta of Ionic Vue based on Vue 3 (check it out!). The following blog post is based on the old Vue 2 version.

Last week, I had the privilege to speak at the second VueConf USA in sunny Tampa, Florida. On behalf of the whole Ionic team, I was really excited to present a full talk and also get to know more members of the Vue community. And, with all of the excitement around Vue and VueConf, we decided that this was the perfect place to release the beta for @ionic/vue! So let’s dive right into that bit.

What is Ionic?

If you’re already using Vue, you might be wondering, what is Ionic and why should I care?

Well, let’s take a step back and just say, “Hello, we’re Ionic!” We’re about 5 million apps (and users) strong, with companies like Nationwide, Marketwatch, and Sworkit using our code.

We’re best known for our popular open source Framework, which at its core is a collection of UI components for building high-quality, cross-platform hybrid apps. All of these components are built with HTML, CSS, and JavaScript and can be easily deployed natively to iOS and Android devices, to desktop with Electron, or to the web as a progressive web app (PWA).

And, because the Ionic Framework is focused on the Component/UI layer, you can still keep your framework’s build tools and CLI. Our main goal is to care about how your apps look and behave, not how they’re built. In the past, Ionic Framework has been built only supporting Angular. While we still love and support Angular, we’re also opening up to other tools in the front-end ecosystem. This is why we’re excited to share the details about @ionic/vue.

Getting Started

Getting started with Vue and Ionic is fairly straightforward if you’ve used Vue before. We first need to create a basic Vue project with the CLI.

npm install -g @vue/cli
vue create my-vue-app

cd my-vue-app

Currently, we have a dependency on vue-router, so during the prompt selection in vue create, be sure to select vue-router, or run:

vue add router

From here, we can install @ionic/vue and add it to our project

npm install @ionic/vue

Once the install is finished we have access to the Ionic plugin and can add it to our main.js.

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

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
Vue.config.productionTip = false;

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

From here, we now have access to all of Ionic’s components.

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png">
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>

And that’s it!

Building on Vue Router

Like the Angular and React versions of Ionic, we chose to use the official router that’s provided with Vue, vue-router. In order to handle Ionic’s animations though, we’ve extended the Router’s API and have created an ion-vue-router component based on the default router-view. Working off our basic starter project, we can modify App.vue and use ion-vue-router and update router.js to use the IonicVueRouter class.

src/router.js

import Vue from 'vue';
import Home from './views/Home.vue';
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () =>
        import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
});

What is important to note is that instead of creating a new Router instance from vue-router, we use IonicVueRouter. Since this is built off the Router API, we’re able to reuse all of the features that you would expect, like Lazy Loading or navigation guards.

In App.vue, we simply use ion-vue-router the same way we would use the default router-view.

src/App.vue

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

The router integration is currently one place where we’d love to get feedback from the community and see where things could be improved, so please do not hesitate to reach out!

Doing Things the Vue Way

ionic/vue includes support for almost every Ionic component we have. So all your HTML will still feel familiar, but will use Vue’s template syntax.

<ion-content>
  <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
    <ion-refresher-content
      :refreshingSpinner="dynamicIcon"
      :refreshingText="refreshMessage"
    >
    </ion-refresher-content>
  </ion-refresher>
</ion-content>

Ionic’s virtual scroll component is currently not included in the beta release.

Overlay components, like Modals, are created dynamically using the $ionic object in Vue.

import Modal from "@/components/Modal.vue";
export default {
  name: "home",
  methods: {
    showModal: async function() {
      const modal = await this.$ionic.modalController.create({
        component: Modal,
        componentProps: {
          propsData: {
            userData: Math.round(Math.random() * 100)
          }
        }
      });
      await modal.present();
    }
  }
};

The $ionic object provides controllers for Modals, Alerts, and the rest of the overlay components.

What’s Next?

With beta, ionic/vue is fairly stable, but does have room for improvements. Some areas we’re looking for feedback are:

• Router Integration
• Tabs ergonomics
• Performance review

Reach out to us on the forum, slack, or Github if you’re using Ionic Vue! Cheers 🍻

• Ionic Vue
• Ionic Documentation
• Ionic Worldwide Slack
• Ionic Forum