Ionic Vue enables developers to write cross-platform mobile applications with Vue...

Liam de Beasi recently released Ionic Vue, a native Vue version of the Ionic framework that takes advantage of the new features of Vue 3. After releasing Ionic React last year, Ionic Vue is a step forward in realizing the vision promoted with the web component-based Ionic 4 (codenamed) Ionic for everyone).

De Beasi summarized how Ionic Vue fits into the vision of the Ionic team as follows:

The release of Ionic Vue shows that any web developer using the framework of their choice can create powerful cross-platform applications using the Ionic Framework.

Ionic Vue builds on Vue’s official router (Vue router) and adds some custom APIs to it. The resulting package (@ionic/vue-router) can be used as follows:

import { createRouter, createWebHistory } from '@ionic/vue-router';  import Home from '@/views/Home.vue'    const router = createRouter({    history: createWebHistory(process.env.BASE_URL),    routes: [      {        path: "https://news.google.com/",        redirect: '/home'      },      {        path: '/home',        name: 'Home',        component: Home      },      {        path: '/lazy',        component: () => import('@/views/Lazy.vue')      }    ]  })    

The release note lists additional differences to be aware of when using Ionic Vue. Developers need to incorporate an ionic side into one Component to make transitions and lifecycle events work as expected. Developers can use ion-specific life cycle events (e.g. ionViewDidEnter, ionViewDidLeave). @ionic/vue supports all Ionic Framework components except ion-virtual-scroll.

De Beasi

What's next? We will be providing improved Vetur/Intellisense support very soon. Additionally, we are working on providing full Server Side Rendering (SSR) support. Keep an eye out for an Ionic Vue SSR blog for how you can help test that!

— Liam DeBeasi (@LiamDeBeasi) October 15, 2020

for Ionic Vue as follows:

What’s next? We will be offering improved Vetur / Intellisense support shortly. We are also working on providing SSR (server-side rendering) support. Look out for an Ionic Vue SSR blog to see how to test this out!

Developers can get started with Ionic Vue by installing and using the Ionic CLI to build an Ionic Vue launcher application:

npm install -g @ionic/[email protected]  ionic start my-vue-app --type vue  

Developers can use JavaScript or TypeScript to write an Ionic Vue application. However, in order to use JavaScript, the application template generated by the CLI must be modified manually.

Developers can develop native mobile applications using Ionic Vue with Capacitor. The release note provides an example of using two capacitor APIs (camera and file system).

The Ionic Framework is an open source UI toolkit that allows developers to create high quality mobile apps for native iOS, native Android, and the web. The Ionic Framework is open source software available under the MIT license. Contributions and feedback are funded through the Ionic GitHub project and should follow the guidelines and code of conduct for Ionic contributions.