November 20, 2018
  • Announcements
  • Ionic
  • Vue

A Vue from Ionic

Mike Hartington

Director of Developer Relation...

Ionic Vue has reached Release Candidate status! Check out the latest details here.

Last week, we gave the first official preview of Vue support for Ionic Framework at VueConf Toronto. Our very own Josh Thomas (@jthoms1) shared some insight into the first alpha release of @ionic/vue and why we think Vue + Ionic Framework makes a perfect match for developers. But before we dive into the nitty-gritty of it all, it’s important to first understand the history of Ionic Framework and Vue.

What is Ionic Framework?

If you’re already using Vue, you might be wondering: What is the Ionic Framework and why should I care?

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

We’re best known for our open source Framework, which at its core is a collection of UI components for building high-quality, cross-platform apps. These components are all built with HTML, CSS, and JavaScript and can easily be deployed natively to iOS and Android devices, desktop with Electron, or to the web as a progressive web app (PWA). Why does this matter? Because the web is awesome! Building with web technologies allows developers to reuse their existing skills for native development, while also depending on the stability of the web. Meaning, you don’t have to learn any special tools, use a subset of CSS, or rewrite portions of your app when using Ionic—It just works across multiple platforms all from one codebase.

And because the Ionic Framework is focused most on the Component/UI layer, you can still keep your framework’s build tools and CLI. Our #1 goal is to care about how your apps look and behave, not how they’re built. Now historically, Ionic Framework was built to only work with Angular. This is why we’re excited to share the details about @ionic/vue.

The Early Test

One of the main intentions when building Ionic 4 was to be framework agnostic. That’s because we think developers should be able to pick the framework that fits their needs and not the other way around. But we soon realized that in order for there to be a great developer experience, we needed to add an integration layer.

For example with Angular, we created @ionic/angular to make our components more compatible with the type checking system, but what would this look like for other frameworks like Vue?

Some of the first demos of Ionic Framework and Vue together literally used a script tag and link for CSS in the index.html. And while this worked, it definitely did not provide the typical experience we saw with other packages in the Vue ecosystem.

If you’re interested, you can see that first Ionic Framework and Vue demo here

The Community’s Support

Around this time, we also started connecting with the folks over at Modus Create, specifically Grgur Grisogono and Michael Tintiuc. The team was eager to get Vue support in the Ionic Framework and provide a proper developer experience, so it was with their effort that we saw the first version of the ionic/vue wrappers start to take shape. Additionally, to better support the greater community, the Modus team sent a pull request to make the wrapper part of our core repository.

But they weren’t just working on the integration layer. To prove the integration worked well, the Modus team also built an app using Ionic Framework, Vue, and Capacitor, called Beep. Beep is an app that allows you to check if your email has been part of any data breaches (using the HaveIBeenPwned API). It’s now been successfully launched and is available on the iOS App Store, Google Play, and as a PWA.

To learn more about Beep, check out this blog post from the Modus team.

Simplicity from the Start

We’re excited to announce here, just as we did at VueConf Toronto, that @ionic/vue is now available in alpha (0.0.1). If you’re interested, you can also view Josh’s presentation from the conference here.

To get started with it just simply install the package in your Vue project:

npm install @ionic/vue

Then, from your main.js, you can import the library and use it:

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

import { Ionic } from '@ionic/vue';

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

And that’s it, you’re all set up!

With this new functionality, it’s now quite simple to add Ionic Framework to any of your Vue projects and have access to all of APIs in a Vue-friendly format.

For example, to handle property binding and event binding in Vue, we can use the :prop and @eventName syntax.

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

Want to display an overlay in your app, like a loading indicator? This can be done through the global $ionic object in Vue.

export default {
  name: 'LoadingScreen',
  methods: {
    async showModal() {
      const loading = await this.$ionic.loadingController.create({
        spinner: 'hide',
        duration: 5000,
        message: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class custom-loading'
      });
      loading.present();
    }
  }
};

We’re happy to say that this integration makes working with Ionic’s APIs feel like working with any typical Vue library, like the Vue Router or Vuex.

What’s Next?

While it may still be a bit early for @ionic/vue and there’s a lot more to test before we recommend it for production, we’re happy to roll this out to the community and open it up for your help.

We’ve always said that Ionic’s biggest asset is our large, passionate community and now we need your feedback. If you’re a big Vue fan and want to give Ionic Framework a try, let us know how it goes. You can reach out to us on the forum, slack, or Github.

We think this is a great first step for @ionic/vue and hope you do too. It’s an exciting time to building apps with Ionic Framework and can’t wait to see what you create!

Until next time, cheers! 🍻


Mike Hartington

Director of Developer Relation...