Today I am thrilled to announce the release of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App. Ionic Vue has been written to take advantage of all the great new features that recently shipped in Vue 3. Ionic, the most widely used platform for building mobile and desktop apps using web technology, today announced the general availability of Ionic Vue, a native Vue version of Ionic Framework that makes it easy for developers to build and deploy apps for iOS, Android, Desktop, and the web as a Progressive Web App (PWA).
This release affirms Ionic's position as the only app development platform built for every web developer, enabling anyone to build performant, cross-platform applications with Ionic Framework using the JS framework of their choice. Ionic Vue represents a big milestone in Ionic Framework’s development after the release of our React integration earlier in 2020. This launch is the culmination of our “Ionic for Everyone” push that was kicked off in early 2019 with the release of Ionic Framework v4. As a result, I’d like to share some context as to how we got here and where we are going next.
What is Ionic Framework?
Ionic Framework is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. Write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
Along with the UI components, Ionic Framework also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
In this guide, we will go over the basics of both Vue and Ionic Framework, including any Ionic Framework specific features. If you are familiar with Vue, enjoy the guide and learn something new about Ionic Framework. If you are not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
A Brief History
You might recall us releasing an Ionic Vue beta back in early 2019. That version was built for Vue 2 and lacked features such as proper v-model support. While developing Ionic Vue and Ionic React side by side, we quickly realized they had a lot in common. In fact, we found ourselves implementing similar features and fixing the same bugs multiple times.
Also around this time, the Vue team was starting to ramp up development on Vue 3, and we decided it made sense for Ionic Framework to support that version instead. We paused Ionic Vue development and shifted focus to Ionic React. With its completion, we found ourselves with all the key learnings we needed to develop Ionic Vue, and we are really happy with the way it turned out… if we may say so ourselves.
A bit about Ionic Framework
If this is your first time hearing about Ionic, Hello there!
Ionic Framework is an open-source UI toolkit focused on building high-quality mobile apps for native iOS, native Android, and the web! From the ground up, it’s built with HTML, CSS, and JavaScript, so web developers should feel right at home building with our components. Our components allow developers to build native experiences, all while using web technology.
A Big Milestone
Since its launch in January 2019, we wanted Ionic Framework v4 to be known as the app framework for every web developer. To that extent, we lovingly referred to Ionic Framework v4 as “Ionic for Everyone.” This release rebuilt Ionic Framework from the ground up with Web Components. While this change took time, it ultimately allows us to support any framework without having to re-write the Ionic Framework.
Today, we are committed to supporting not just Angular, but also React and Vue. In a sense, the release of Ionic Vue is an indication that our efforts have paid off. Neither the React nor the Vue integrations required any major rewrites of Ionic Framework, and the Ionic API remains remarkably similar across framework integrations.
The release of Ionic Vue demonstrates that any web developer can build performant, cross-platform applications with Ionic Framework using the framework of their choice.
Getting Started
Note: The first official version of Ionic Vue is v5.4.0
Getting started with Ionic Vue is a breeze. First, be sure you have the latest version of the Ionic CLI installed:
npm install -g @ionic/cli@latest
If you used the Ionic Vue beta, be sure to update your CLI as you likely were using a pre-release version.
From here, we can use the Ionic CLI to create an Ionic Vue starter application:
ionic start my-vue-app --type vue
The CLI will guide you through the setup process by first asking a few questions. Once the application has been installed, you can start the development server by running:
ionic serve
Under the hood, the ionic serve command uses the Vue CLI to compile your app, start a dev server, and open your app in a new browser window.
About Ionic
Ionic makes it easy for entrepreneurs and enterprises to build beautiful, high-performance apps for any platform or device. The Ionic Framework is the most widely used platform for building mobile and desktop apps using web technology, with a vibrant worldwide community of more than 5 million developers in over 200 countries. Ionic's open source Framework and developer-friendly tools and services power apps for some of the world's best-known brands, including highly successful consumer apps like Dow Jones MarketWatch, Sworkit, and Untappd, as well as mission-critical apps supporting Nationwide and NASA.
Frequently Asked Questions
A lot of people don't appreciate the moment until it’s passed. I'm not trying my hardest, and I'm not trying to do
About Author
Mr.Vivek Chaturvedi
Vivek Chaturvedi is the co-founder and CTO at Vidhema Technologies. He is responsible for the overall technical operations of the company and has played a major role in bringing Vidhema up from its humble beginnings and, with his immense energy and drive, transforming it into a globally trusted name in IT solutions.