BT

InfoQ Homepage News Ionic Vue Enables Developers to Write Cross-Platform Mobile Applications with Vue 3

Ionic Vue Enables Developers to Write Cross-Platform Mobile Applications with Vue 3

Bookmarks

Liam de Beasi recently released Ionic Vue, a native Vue version of the Ionic Framework that leverages Vue 3’s new features. Following Ionic React released last year, Ionic Vue is a step forward in the realization of the vision promoted with the web-components-based Ionic 4 (code-named Ionic for Everyone).

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

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.

Ionic Vue builds on Vue’s official router (vue-router) and extends it with a few custom APIs. 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: '/',
      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 must wrap an Ionic page into a <ion-page> component for transitions and lifecycle events to work as expected. Developers may use Ionic-specific lifecycle events (e.g. ionViewDidEnter, ionViewDidLeave). @ionic/vue supports every Ionic Framework component except ion-virtual-scroll.

De Beasi summarized the next steps for Ionic Vue as follows:

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!

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

npm install -g @ionic/cli@latest
ionic start my-vue-app --type vue

Developers may use JavaScript or TypeScript to write an Ionic Vue application. Using JavaScript will however require manually modifying the application template generated by the command-line interface.

Developers may develop native mobile applications by using Ionic Vue together with Capacitor. The release note provides an example of using two Capacitor APIs (Camera and Filesystem).

The Ionic Framework is an open-source UI toolkit that helps developers build 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 encouraged via the Ionic GitHub project and should follow the Ionic contribution guidelines and code of conduct.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.