Based on a core contribution from Modus Create, Ionic Framework has officially announced Vue.js support. Modus is extremely excited that our Vue platform support has been officially merged into the Ionic core. For the first time ever, developers can use beautifully themed Ionic 4 web components in a Vue.js application, thanks to the work by our internal product development incubator, Modus Labs.
This huge achievement makes Modus Create a core contributor to the framework, solves numerous technical challenges, underscores our open source expertise, and further strengthens our partnership with Ionic Framework.
“Participating in, and giving back to, the open source community is deeply embedded within the Modus DNA. We are tremendously proud to see our Vue adapter officially become part of the Ionic core, uniting the vibrant Ionic and Vue communities. By leveraging our strong partnership with Ionic and identifying the immense value of Vue.js, the Modus team went above and beyond in building original software that everyone in the community can benefit from,” said co-founder and Managing Partner Jay Garcia.
Capitalizing on Our Partnership With Ionic
Michael Tintiuc demoing Ionic Vue integration to Ionic’s Mike Hartington and Manu Almeida
Modus has a strong relationship with Ionic, a leading (and gorgeous) UI component library. We’re a trusted partner and have used the framework to build dozens of beautiful applications for clients in numerous industries. Our close relationship gave us unparalleled knowledge of what was capable in Ionic V4 and what new developers would value.
“Modus has been an incredible partner in helping build out Vue support for Ionic. The project would not be where it is without their passion and expertise with Vue,” said Max Lynch, co-founder and CEO of Ionic.
We immediately recognized the potential for applications written in other frameworks and libraries following Ionic’s rewrite in Version 4 to framework-agnostic Web Components. The change made Ionic a top-notch option for Vue.js applications.
With Vue use increasing, linking with Ionic made sense to help the open source community build better software, easier. “Vue has quickly become one of the most popular frameworks for building complex frontend apps. We are thrilled to support Vue and help the ecosystem build awesome apps,” said Lynch.
Recognizing Vue’s Huge Potential
Vue.js is a leading framework for building rich web and native applications. Driven by one of the largest Javascript communities, it’s galloping towards setting new standards in the industry. The upcoming Vue.js version 3 is introducing even better support and optimizations for Web Components, which makes Ionic the perfect fit.
The Modus team recognized Vue’s huge potential while working with the framework over the past several years. With increased organic interest from the community already there, the Modus Labs team jumped at the chance to integrate Ionic and Vue.
“Vue can compete with any other framework,” creator Evan You says, “but what makes Vue shine is its low barrier of entry and focus on being accessible.”
Ionic’s official support for Vue.js further enhances Vue’s accessibility. Allowing the frameworks to work together for the first time, Modus’ open source contribution makes Ionic “a great addition to the arsenal for those who want to develop for mobile using Vue,” continued You.
BEEP: Our Own Reference Application
The Vue bridge was born out of our work on BEEP, a reference application created by the Modus Labs team that helps us understand where this combo shines and how Modus can use it in mission-critical apps.
BEEP is the first production application that uses Vue as a back-end for Ionic V4 and Capacitor. It combines routing capabilities, theming, transitions, third-party API calls, and native integration into a beautiful, usable application. Modus Create made this Lab experiment publicly available for free on GitHub.
BEEP is the first production application that uses Vue as a back-end for Ionic v4 and Capacitor.
Read more about our work on BEEP in our blog post, or download it on the App Store or Google Play.
Official Vue Support in Ionic Core
The Ionic-Vue platform lets even inexperienced developers use Ionic in a Vue application in under a minute and with only a few lines of code. It is a very small yet powerful library which sits on top of, and expands, official Vue packages, like Vue Router. It also follows Ionic API standards, allowing developers to capitalize on existing knowledge.
Ionic now provides the lowest possible level of entry and is easy to use due to an inheritance-based architecture. There is no extra documentation to read, no new functions to learn, and no extra code needed to get Vue.js components and routes to properly work with Ionic markup and controllers.
Given our passion for optimization and quality code, we made sure that the library supports advanced features such as lazy-loaded components and code-splitting allowing developers to lazy-load Ionic controllers and their contents, such as modals, directly from Vue.js.
We also went out of our way to make sure Ionic-Vue stays one step ahead of trends: it’s written in Typescript, and provides all necessary typings information.
Getting Started With Ionic in Vue
Using Ionic in Vue is extremely easy. Simply install @vue/ionic package in your Vue application.
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');
From this point you can easily add Ionic components anywhere in your Vue.js application.
Giving Back to the Open Source Community
A central tenet of Modus Create is supporting and giving back to the open source community. Our roots are in open source software, and we continue take pride in hosting regional MeetUps, speaking at global conferences, and publishing our contributions to open source – just like we’ve done with Ionic-Vue.
Our global team of world-class talent is comprised of thought leaders, contributors, authors, and teachers. We don’t just build mission-critical applications, we help shape the future of technology. Our work with Ionic and Vue is just the latest in a series of publicly available Modus Labs projects that we’ve published. See our other work (and follow future projects) on the Modus Labs site.
This valuable contribution to the Ionic core code demonstrates not just the Modus team’s technical expertise, but our willingness to leverage partnerships and produce entirely new functionality.
