{"id":2429,"date":"2018-11-20T15:57:09","date_gmt":"2018-11-20T15:57:09","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2429"},"modified":"2023-07-18T13:02:37","modified_gmt":"2023-07-18T17:02:37","slug":"a-vue-from-ionic","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/a-vue-from-ionic","title":{"rendered":"A Vue from Ionic"},"content":{"rendered":"

Ionic Vue has reached Release Candidate status! Check out the latest details here<\/a>.<\/p><\/blockquote>\n

Last week, we gave the first official preview of Vue support for Ionic Framework at VueConf Toronto<\/a>. Our very own Josh Thomas (@jthoms1<\/a>) shared some insight into the first alpha release of @ionic\/vue<\/code> 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\u2019s important to first understand the history of Ionic Framework and Vue.<\/p>\n

<\/p>\n

\"\"

What is Ionic Framework?<\/h3>\n

If you\u2019re already using Vue, you might be wondering: What is the Ionic Framework and why should I care?<\/p>\n

Well, let\u2019s take a step back and just say, \u201cHello, we\u2019re the Ionic!\u201d We\u2019re about 5 million apps strong, with companies like GE, Nationwide, and Untappd using our code.<\/p>\n

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\u2019t have to learn any special tools, use a subset of CSS, or rewrite portions of your app when using Ionic\u2014It just works across multiple platforms all from one codebase.<\/p>\n

And because the Ionic Framework is focused most on the Component\/UI layer, you can still keep your framework\u2019s build tools and CLI. Our #1 goal is to care about how your apps look and behave, not how they\u2019re 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<\/code>.<\/p>\n

The Early Test<\/h3>\n

One of the main intentions when building Ionic 4 was to be framework agnostic. That\u2019s because we think developers should be able to pick the framework that fits their<\/em> 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.<\/p>\n

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

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

If you’re interested, you can see that first Ionic Framework and Vue demo here<\/a><\/p><\/blockquote>\n

The Community\u2019s Support<\/h3>\n

Around this time, we also started connecting with the folks over at Modus Create<\/a>, specifically Grgur Grisogono<\/a> and Michael Tintiuc<\/a>. 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<\/code> 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.<\/p>\n

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

To learn more about Beep, check out this blog post from the Modus team.<\/a><\/p>\n

Simplicity from the Start<\/h3>\n

We\u2019re excited to announce here, just as we did at VueConf Toronto, that @ionic\/vue<\/code> is now available in alpha (0.0.1). If you\u2019re interested, you can also view Josh\u2019s presentation from the conference here<\/a>.<\/p>\n

To get started with it just simply install the package in your Vue project:<\/p>\n

npm install @ionic\/vue\n\n<\/code><\/pre>\n
Then, from your main.js<\/code>, you can import the library and use it:<\/p>\n
import Vue from 'vue';\nimport App from '.\/App.vue';\n\nimport { Ionic } from '@ionic\/vue';\n\nVue.use(Ionic);\nnew Vue({\n  render: h => h(App)\n}).$mount('#app');\n<\/code><\/pre>\n
And that’s it, you\u2019re all set up!<\/p>\n
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.<\/p>\n
For example, to handle property binding and event binding in Vue, we can use the :prop<\/code> and @eventName<\/code> syntax.<\/p>\n
<ion-content>\n  <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">\n    <ion-refresher-content\n      :refreshingSpinner="dynamicIcon"\n      :refreshingText="refreshMessage"\n    >\n    <\/ion-refresher-content>\n  <\/ion-refresher>\n<\/ion-content>\n<\/code><\/pre>\n
Want to display an overlay in your app, like a loading indicator? This can be done through the global $ionic<\/code> object in Vue.<\/p>\n
export default {\n  name: 'LoadingScreen',\n  methods: {\n    async showModal() {\n      const loading = await this.$ionic.loadingController.create({\n        spinner: 'hide',\n        duration: 5000,\n        message: 'Please wait...',\n        translucent: true,\n        cssClass: 'custom-class custom-loading'\n      });\n      loading.present();\n    }\n  }\n};\n<\/code><\/pre>\n
We\u2019re 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.<\/p>\n
What’s Next?<\/h3>\n
While it may still be a bit early for @ionic\/vue<\/code> and there\u2019s a lot more to test before we recommend it for production, we\u2019re happy to roll this out to the community and open it up for your help.<\/p>\n
We’ve always said that Ionic’s biggest asset is our large, passionate community and now we need your feedback<\/strong>. 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<\/a>, slack<\/a>, or Github<\/a>.<\/p>\n
We think this is a great first step for @ionic\/vue<\/code> and hope you do too. It\u2019s an exciting time to building apps with Ionic Framework and can\u2019t wait to see what you create!<\/p>\n
Until next time, cheers! \ud83c\udf7b<\/p>\n