The Vue team released Vue 3 in September to much-deserved fanfare. With improved performance, smaller bundle sizes, new APIs, and a revamped foundation to support future framework iterations, it’s no wonder the Vue community is excited.
Unfortunately, many UI libraries aren’t compatible with Vue 3 yet. If you’re looking for one that is production-ready right now, then check out Ionic Vue, a UI library with over 100 mobile and desktop components built for Vue 3. Let’s take a look at everything it has to offer.
Ionic Vue: A Native Vue version of Ionic Framework
Ionic Framework is an open-source UI toolkit focused on building high-quality apps for native iOS, native Android, and the web! It’s built from the ground up with HTML, CSS, and JavaScript, so web developers should feel right at home. The components allow developers to build native experiences, all while using web technology. Now used by millions of developers, Ionic powers > 15% of all app store apps.
Ionic Vue is the native Vue version of Ionic Framework. It acts as a wrapper for the core UI component library (aptly named @ionic/core), allowing Ionic to support all Vue 3 features with ease. Here’s the entry point of an Ionic Vue app:
// Vue 3 component definition
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
components: {
IonApp,
IonRouterOutlet
}
});
<!-- Template with Ionic Framework UI components -->
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
As you can see, it’s written in modern web code. Ionic likes to say that you don’t learn Ionic, per se - you leverage your existing web development skills to build apps using their UI components.
Production Ready for Vue 3
The Ionic team released Ionic Vue shortly after the launch of Vue 3. Other libraries are still implementing Vue 3 support, so how was Ionic able to ship so fast? The answer: All Ionic Framework UI components are web components consumed by web developers using official framework bindings (including Angular, React, Vue, and basically any other JavaScript framework on the market today, or tomorrow). Developers using each framework get the experience they are familiar with, such as the framework’s routing system, lifecycle events, official APIs and tooling, and more. Frankly, it’s a win-win! Learn more about how Ionic accomplished their “Ionic for Everyone” milestone here.
That’s not all. Ever wish you could use your favorite UI library on multiple platforms but couldn’t because they didn’t leverage each platform’s specific design language? You’re in luck. Every Ionic component adapts its look to the platform the app is running on, such as Cupertino on iOS and Material Design on Android. Through these subtle design changes between platforms, developers achieve a native look and feel while users are happy to receive a high-quality app experience. This adaptation is applied automatically and is entirely configurable should you wish to make theming changes to fit your brand.
Getting Started
Creating a Vue 3-powered Ionic app is a breeze. Begin by installing the Ionic CLI:
npm install -g @ionic/cli@latest
Next, create an Ionic Vue application:
ionic start my-vue-app --type vue
After answering a few questions, you can start a local development server with ionic serve. This command uses the Vue CLI to compile your app, start a dev server, and open your app in a new browser window.
From here, you can explore Ionic’s 100+ UI components or take the “First App” tutorial that covers Ionic’s core app development concepts.
Adding Ionic Vue to an Existing Vue 3 App
If you’ve already started working on a Vue 3 app, you can add in Ionic Framework components. First, install two packages:
npm install @ionic/vue @ionic/vue-router
After that, add the IonicVue package into your app.
// main.js
import { IonicVue } from '@ionic/vue';
import App from './App.vue'
import router from './router';
const app = createApp(App)
.use(IonicVue)
.use(router);
router.isReady().then(() => {
app.mount('#app');
});
Finally, there are some small routing and CSS changes to make. Once those steps are complete, you can start adding Ionic’s components to your Vue 3 app.
Bonus: Deploy your Vue 3 app to mobile
You’ve built a great Vue 3 app that works well on the web and desktop. What about native mobile? Once again, Ionic has you covered. With Capacitor, Ionic’s official cross-platform native runtime, you can deploy your Vue 3 apps as progressive web apps and iOS/Android apps, all from the same codebase.
Capacitor also provides APIs with functionality covering all three platforms. Here’s the Geolocation API, for example:
// Capacitor Geolocation plugin example
setup() {
const locationData = ref({});
const getLocation = async () => {
const { Geolocation } = Plugins;
const results = await Geolocation.getCurrentPosition();
locationData.value = {
lat: results.coords.latitude,
long: results.coords.longitude
};
};
return { locationData, getLocation };
}
<ion-button @click="getLocation()">Where am I?</ion-button>
<p>{{ locationData }}</p>
Notice that there’s no separate logic for each platform (“web,” “iOS,” or “Android”) in the code. That’s because Capacitor automatically detects the platform the app is running on then calls the appropriate native layer code. With Core APIs like these, coupled with full access to native SDKs and a growing roster of community-supported plugins, Capacitor empowers you to build truly native mobile apps from your Vue 3 projects.
Start Building awesome Vue 3 apps for web and mobile
If you’ve been holding off from trying Vue 3 until more libraries become compatible, now’s a great time to give Ionic Vue a try. With Ionic, you can build a fully-featured app then deploy it to multiple platforms with Capacitor.
For a more in-depth look at Ionic Vue, we recommend checking our Quickstart Guide. For a more hands-on experience, take a look at our Build Your First App Guide. If you already have a Vue 3 app, bring it to iOS and Android with Capacitor. Built something neat? Share your Ionic Vue app with us over @IonicFramework.
Top comments (0)