loading...
Cover image for What is it about Vue?
Ionic

What is it about Vue?

maxlynch profile image Max Lynch ・5 min read

On the heels of announcing official Vue support for Ionic Framework, I wanted to dig into why we decided to officially support Vue here at Ionic, and why we’re so excited about it.

But first, if you aren’t familiar with Ionic, we make popular open source projects like Ionic Framework and Capacitor, focused on enabling web developers to build award winning mobile apps with their existing web development skills and libraries. Ionic Framework provides a cross-platform UI toolkit focused on the visual aspect of a quality mobile experience, and Capacitor provides a cross-platform runtime and plugin API to access the full native functionality your app needs on each platform it runs on. Use them together or use Capacitor with any web-based UI framework for mobile!

Many developers know Ionic Framework as a mobile toolkit for Angular. And while we fully support Angular today, in the last few years we’ve branched out to supporting React, and now Vue.

It’s no small task for us to officially support a framework. While Ionic Framework’s web components work in any web technology, integration with framework-specific tooling like Routers, CLIs, and more is where the bulk of the work comes, so choosing to support a framework officially is a big deal for us.

Why, then, do we feel it is crucial to support Vue? And why do we feel that Ionic Framework + Vue brings unique value to the ecosystem and an experience that lives up to our goals as a project?

“The best of React and Angular”

Ionic Framework was initially built around AngularJS (that’s the 1.x version) back in 2013. What drew us to AngularJS back then was the ability to incrementally adopt it in any web app, extend HTML with powerful control flow constructs (loops, conditionals, etc), create essentially new HTML tags powered by JS, and easily apply it to any size app from small to enterprise-scale.

While Angular 2 evolved from the original approach taken in AngularJS, doubling down on its focus on large, complex enterprise apps (the kind Google and other large companies build), those original features of AngularJS that drew so many to it in the beginning fell out of favor in exchange for a monolithic solution focused on building large apps from scratch.

When talking to Vue developers, one way they frame why Vue is so great is it essentially perfected that early approach in AngularJS, creating something fundamentally new and compelling along the way. It’s no surprise then that so many Ionic 1.x developers who used AngularJS back then were drawn to Vue when the Angular 2 fork in the road appeared, and picked it up very quickly.

Vue developers often contrast it with React as well, appreciating more powerful data binding (especially with forms), compilation-free templating that uses standard HTML (i.e. no JSX required), and the batteries-included approach where key libraries for routing and state management are officially supported and maintained by the Vue team.

Add these up and it’s clear why many Vue developers consider it to be the best of both worlds.

Vue is exploding

With all the benefits above, it’s no wonder that Vue has found itself a passionate developer base that wasn’t satisfied with the binary Angular or React decision tree and tradeoffs.

That developer base is absolutely exploding, with some metrics, like stars, growing faster than React and nearly any other project on GitHub:

Alt Text

While stars are a vanity metric, there’s proof that this popularity has fostered a strong ecosystem of Vue-specific addons, projects, and frameworks. Vue-specific web app frameworks like Nuxt.js and Gridsome add powerful Jamstack features to the Vue ecosystem. UI libraries like Vuetify, and mobile solutions like Quasar, NativeScript, and Ionic Vue provide options for building engaging UI experiences with Vue across nearly any platform.

It’s clear that Vue is a force to be reckoned with and any web library like Ionic that purports to support the key frameworks web developers are using simply has to take it very seriously.

Ionic Framework and Vue is a perfect match

One of the most common questions we received over the last two years has been “when is Vue support for Ionic Framework coming out?” In fact, we received that question so often that it became a meme inside the company, with us often taking bets on how long it would take for someone to ask about Vue support on any given tweet or blog post (even if it had nothing to do with Vue!)

Obviously, the Vue ecosystem has been hungry for more mobile app development solutions. While a few solutions already exist for building mobile apps with Vue, including NativeScript Vue and Vue Native, what Ionic Framework brings to the table is a mobile development solution that is much more web centric. When you build with Ionic Vue, you’re able to target native iOS and Android with a truly native app that gives you full access to the native device and any native API. At the same time, you get the benefit of a UI layer that is truly web, so any existing web libraries, vue add-ons, UI components, or CSS styles will fit right into your Ionic Vue mobile app. Plus, as a bonus you can deploy your Ionic Vue mobile apps as pure mobile web apps or PWAs.

Ionic is focused intensely on web developers using popular web development technologies, with a massive community, and with support and features for serious apps and enterprise teams. To add on to that, Ionic Framework is backed by a growing company that is focused exclusively on commercializing Ionic Framework and its companion native runtime project, Capacitor.

From a developer experience standpoint, Ionic and Vue have similar roots. Both were inspired by AngularJS to some extent, and both focus on empowering web developers to build incredible things with the technologies they already know, with a low barrier to entry. Vue’s approach of using standard HTML in templates pairs incredibly well with Ionic Framework’s move to Web Components at the core, so using Ionic components feels like any other HTML tag, only with magic mobile powers.

Finally, Ionic is immensely popular, powering nearly 15% of all app stores, and has become synonymous with “mobile for web developers.”

The future is Bright for Vue

The technical challenges and long term maintenance concerns that come with choosing to officially support a framework for Ionic Framework are significant. We will invest considerable resources, financial and otherwise, to support any new framework integration in Ionic Framework.

We have decided to fully embrace and support Vue starting with Vue 3, because we think it is increasingly a pillar of the web development ecosystem, and will only grow in importance and relevance over time.

We also think it spiritually aligns incredibly well with our values and approach with Ionic Framework. We believe in the web platform. We believe in enhancing HTML, CSS, and JavaScript and enabling web developers to do incredible new things with it. Vue helps teams build and orchestrate the functionality and rendering of their app, and Ionic Vue helps those teams make their Vue apps feel great on mobile.

If you’re curious about Ionic Vue and want to try building iOS, Android, and Progressive Web Apps using Vue 3 and all the Vue-compatible web libraries you know and love, take a look at Ionic Vue!

Hey, you there! Want to build a mobile app with Vue but already have a UI library or can't use Ionic Framework's UI controls? Check out Capacitor. It's the native runtime part of the Ionic stack that runs any web app on mobile regardless of what it was built with.

Discussion

pic
Editor guide
Collapse
swyx profile image
shawn swyx wang 🇸🇬

I love how passionate you are even as a CEO. thank you for sharing and please keep it up!

Collapse
maxlynch profile image
Max Lynch Author

Thanks Shawn, gotta stay on top of everything I guess 😅

Collapse
alvarosaburido profile image
Alvaro Saburido

I worked like 4 years doing apps with Ionic + Angular, since Angularjs. Now that Im really involve in Vue and the open source community, this is a gift to be able to use my favorite hybrid technology with my favorite framework 🥰.

Thanks for the awesome work done.

Collapse
jfbrennan profile image
Jordan Brennan

"We believe in the web platform" is what makes the difference👍

Vue, Riot, M- (my project), and many other libraries don't deviate - they embrace and augment the web platform just enough to make it worth committing to them. React is just too "extra". Too much of a commitment, too many tools, too much fuss. And for what? It offers nothing unique. It's outdone by everything that has come since and it's not catching up (Preact supports Web Components, but React still doesn't!)

Collapse
eduplessis profile image
Edouard Duplessis

I've just looked a "M-" and wow very nice .... I really love the

"Developing on the web is awesome because:

  • It's open
  • Has low barriers to entry
  • Easier than other platforms
  • Available on virtually every device in the world!
  • Has the biggest and most active user base by far!"

That's exactly what I say to any new dev...

Collapse
keefdrive profile image
keef-drive

React has too much boilerplate, Vue and Svelt have got it right. I view vue.js as a developer friendly framework and I see react.js as an over engineered enterprise framework. But the introduction of hooks in react.js has made it a bit nicer not much!.

Collapse
yellow1912 profile image
yellow1912

I used quasar before, will look into ionic as well.

We also chose angular 1 in the past for the exact reasons you guys did, and we were left high and dry when angular 2 came out. Vuejs was a silver lining for us.

Collapse
wobsoriano profile image
Robert

I use Vue for my side projects, React all the way because of job market

Collapse
andypotts profile image
Andy Potts

I much prefer working with Vue to React (although React does have some use cases that make it better)

Collapse
ameerhamza profile image
Ameer Hamza

Hi Andy. What are use cases where react is more powerful than vue ?

I comparing vue and react for a project. And vue checks all the boxes.