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! 🍻

Signup for the Ionic Newsletter to get the latest news and updates!

  • Falco

    React next?

    • Taras Yaremkiv

      No, React has React Native

      • http://twitter.com/maxlynch Max, Ionic CEO

        We are doing React in 2019. React Native and Ionic don’t exactly overlap completely with the problems they are solving. Ionic can be used to build Progressive Web Apps and Electron apps, along with iOS and Android apps, and since you’re building with HTML and CSS, it’s easy for web developers and designers to customize and style. While there are some projects that enable you to use similar markup to target web + electron from RN, they aren’t official and they aren’t really stable or widely used, and it’s still not the web environment.

        One thing to think about: by far most react devs are building for the web. If you look at the download numbers for react-dom vs react-native, there are many times (order of magnitude) more downloads for react-dom. That indicates to me the strength of the web platform in the React world and we target the same environment.

        We’ve had really great reception from React devs that want to use Ionic, including many that want to use Ionic *with* React Native because building with traditional web tech is really fast and easy to customize and many enjoy it.

        I’m optimistic React devs are going to love using Ionic. See more info here: https://twitter.com/maxlynch/status/1041721236102017024

        • http://www.charlesen.fr Charles

          Thank you ! it rocks !

  • Fernando Mendoza Galvez

    import { Ionic } from ‘@ionic/vue’ should be import Ionic from ‘@ionic/vue’

    Otherwise you will get “export ‘Ionic’ was not found in ‘@ionic/vue’

  • Robert Larsson

    I’m very happy to see this, I’ve followed Ionic through the years and also used it long time ago. A tip, invest a little more time in the demo so the vue developers get the wow fealing using animations, sliding etc.

  • Commentor

    Hi. What I would like to know what what is the advantage of this wrapper compared to just using Ionic “normally” in an existing Vue app. As an example please look at this app. https://github.com/mhartington/Star-Track-vue

    They do not make use of @ionic/vue but it seems to work fine.