真人线上平台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 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.

Click here真人线上平台 if you just want to get started building with Ionic Vue, I won’t be offended. 😊

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. today, ionic powers .

an Ionic app in light mode

an Ionic app in dark mode

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 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 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.

真人线上平台from here, we have access to all of ionic framework’s components:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Hello Vue</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello Vue</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  </ion-page>
</template>

<script>
  import { defineComponent } from 'vue';
  import {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
    },
  });
</script>

To use the components, you need to import them from the @ionic/vue真人线上平台 package and provide them to your Vue component.

Building upon the Vue Router 🧭

Like with the Angular and React versions of Ionic Framework, we chose to use the official router that is provided with Vue, vue-router. To handle Ionic Framework’s animations, we have extended the Router’s API through the ion-router-outlet component. This component is used in place of the typical router-view component that is used in Vue applications.

Using this modified router is mostly the same as the regular vue-router真人线上平台 except with a few different imports. Lazy loading works out of the box too!

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')
    }
  ]
})

Rather than import createRouter and createWebHistory from vue-router, you need to import them from @ionic/vue-router. These imports wrap the vue-router functions of the same name and provide a few additional details that let Ionic Framework work well within the Vue environment.

While we recommend relying on the tooling that Vue Router provides, we have added support for the router-link property on components that allow for it:

<ion-item router-link="/child-page">
  <ion-label>Click Me to Navigate</ion-label>
</ion-item>

You can also specify the direction using router-direction and a custom animation using router-animation.

For transitions and lifecycle events to work properly, each Ionic page must be wrapped in an ion-page component:

<template>
  <ion-page> ... </ion-page>
</template>

<script>
  import { defineComponent } from 'vue';
  import { IonPage } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonPage },
  });
</script>

lifecycle events can be accessed by providing the appropriate event as a method:

export default defineComponent({
  name: 'HomePage',
  components: {
    IonPage
  },
  methods: {
    ionViewDidEnter: () => {
      ...
    },
    ionViewDidLeave: () => {
      ...
    },
    ionViewWillEnter: () => {
      ...
    },
    ionViewWillLeave: () => {
      ...
    }
  }
});

Doing Things the Vue Way 🛠

@ionic/vue includes support for every Ionic Framework component except for virtual scroll. We are embracing the community-driven solutions for virtual scroll in Vue applications and will be providing more information on how to get started with these solutions soon! Using components in Ionic Vue will still feel familiar, but will use Vue’s template syntax:

<template>
  <ion-input v-model="inputValueRef" @ionInput="onChange($event)"></ion-input>
  Value: { inputValueRef }
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { IonInput } from '@ionic/vue';
  export default defineComponent({
    name: 'MyComponent',
    components: { IonInput },
    methods: {
      onChange: (ev: CustomEvent) => {
        ...
      }
    },
    setup() {
      const inputValueRef = ref('');
      return { inputValueRef };
    }
  });
</script>

Overlay components, such as ion-modal, can be created dynamically by importing the appropriate controller from @ionic/vue:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openModal()">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonButton, IonContent, IonPage },
    setup() {
      const openModal = async () => {
        const modal = await modalController.create({
          component: ModalExample,
        });
        await modal.present();
      };

      return { openModal };
    },
  });
</script>

真人线上平台overlay components can also be used directly in your component’s template:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="setModal(true)">Open Modal</ion-button>
      <ion-modal :is-open="isOpen" @onDidDismiss="setModal(false)">
        <ModalExample></ModalExample>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { IonButton, IonContent, IonModal, IonPage } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { ModalExample, IonButton, IonContent, IonModal, IonPage },
    setup() {
      const isOpen = ref(false);
      const setModal = (state: boolean) => (isOpen.value = state);

      return { isOpen, setModal };
    },
  });
</script>

Building your way with either TypeScript or JavaScript ✌️

真人线上平台we love typescript at ionic, and have believed for quite some time now that it’s a great tool for building scalable apps. that said, we know how much the vue community values simplicity – in their tooling, languages, and more. in fact, it’s likely what drew you to vue in the first place. start simple – then scale up as needed.

so, if you’d prefer to use javascript instead of typescript, you can. after generating an ionic vue app (see above), follow these steps:

  1. Remove TypeScript dependencies:
npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript
  1. Change all .ts files to .js. In a blank Ionic Vue app, this should only be router/index.ts and main.ts.

  2. Remove @vue/typescript/recommended and @typescript-eslint/no-explicit-any: ‘off’, from .eslintrc.js.

  3. Remove Array<RouteRecordRaw> from router/index.js.

Truly native experiences with Vue 📱

Vue does not natively support mobile app development, but fortunately, you can pair Ionic Vue with . Using Ionic’s official cross-platform native runtime, you can deploy your apps as progressive web apps and真人线上平台 iOS/Android apps – all from the same codebase.

here’s an example using two capacitor apis, the and . after opening the camera on the mobile device, the user can take a new photo, then save it to device storage.

const takePhoto = async () => {
  const cameraPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100,
  });

  const base64Data = convertPhotoToBase64(cameraPhoto);

  const savedFile = await Filesystem.writeFile({
    path: 'myphoto.jpg',
    data: base64Data,
    directory: FilesystemDirectory.Data,
  });
};

真人线上平台notice that there’s no mention of “web”, “ios”, or “android” in the code. that’s because capacitor automatically detects the platform the app is running on, and calls the appropriate native layer code. with core apis like these, coupled with full access to native sdks, capacitor empowers you to build truly native mobile apps.

What’s Next? 🛣

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.

真人线上平台while the release of ionic vue is an important milestone for ionic framework, there is always more to do. we plan on releasing complete server side rendering (ssr) support for ionic vue in the future. keep an eye out for a blog post on how you can get started with that!

in terms of general ionic framework development, we have a lot of exciting things planned, so stay tuned. also, let us know where you would like to see ionic framework go next by tweeting at us !

Thank You 💙

I want to give a huge真人线上平台 thank you to all the community members who helped test the Ionic Vue beta and provide feedback; this project would not have been possible without your support. Special thanks to the folks over at and specifically for helping us get Ionic Vue to where it is today.

真人线上平台we are thrilled about ionic vue and are excited to welcome all vue developers to the ionic community. we are so glad you are here and cannot wait to see what you build!


Following the news that the , I’m excited to share a new tutorial: “Your First Ionic App” for Ionic Vue!

If you’ve already tried the Angular or React version of the Build Your First App tutorials, you’ll feel right at home with this new guide. It walks you through the fundamentals of Ionic app development by creating a real app step by step. After completing the tutorial, you’ll transform the Tabs starter app into an interactive photo gallery that runs on the web, iOS, and Android – all from one codebase:

Read more…


The other week, the Vue team released a major update to VueJs, its 3.0.0 release. We (Ionic) have been following Vue for some time now and keeping an eye out for when their v3 would be ready in order to complete Ionic Vue support. As we stand right now, Ionic Vue is going through its beta release with a release candidate very close. With everything coming together and Ionic devs getting another framework they could use, I thought it would make sense to give an overview of Vue for those who are curious if it’s the right framework for them. Let’s dive in.

Read more…


真人线上平台today, we’re thrilled to announce web previews in appflow, the easiest way to share what you’re working on with coworkers, stakeholders, and more.

真人线上平台unfamiliar with appflow? it’s a mobile devops solution by ionic that makes it easy to continuously build, deploy, and update mobile app experiences across ios, android, and the web. with appflow, you can fully automate your team’s app development workflow, and go from idea to production in less time.

New to Ionic or Appflow? Try our step-by-step app wizard真人线上平台 to build your first app and generate a web preview in minutes.

Web Previews represent the next step in our belief in the web first development strategy真人线上平台, and we’re especially excited for what this feature enables for teams who want a quick and easy way to share pre-production versions of their app, without the overhead and complexity of managing TestFlight, iOS enterprise certs, or any of the more complicated methods of showing off what you’ve built.

Read more…


Anyone else feeling déjà vu? It feels like not too long ago we were launching the Ionic Vue beta built with Vue 2. Given that the release of Vue 3 is quickly approaching, we thought this would be a perfect time to start preparing Ionic Vue for launch. Today, I am thrilled to announce the new and improved Ionic Vue beta built with Vue 3!

Read more…


android and ios app binaries must be digitally signed with a certificate before they can be installed onto a user’s device. this is required so that users can be confident that the app publisher actually is who they say they are. for ios applications, these are created on apple’s developer portal, and can be regenerated. for android applications, these are typically created locally and up to each developer to safeguard, as they can not be regenerated.

one of the challenges for some developers who used phonegap build was that it was the only place their android signing keys existed – it was created then lost at some point in time. apple has a method to regenerate a signing key, so it was never a worry. but since android keys are created locally, they can never be recreated. once they are lost, there is no method to recreate them. and, if you do not have them, you cannot properly sign your android application and submit a new version. unfortunately, adobe will not be providing a way to export your android private key.

Read more…


base64-to-blob

web browsers provide a variety of data primitives that web developers use to manage, manipulate, and store data – from plain text, to files, images, videos and more. however, using them correctly and effectively can be confusing. one such example is converting a base64 string to a blob using javascript. a represents binary data in the form of files, such as images or video. suppose you have an image in string format that needs to be uploaded to a server. however, the available api accepts the image in blob format only. what do you do?

according to various solutions , conversion appears to be complex. manipulating byte arrays? no thanks. fortunately, there’s an easier, modern approach available thanks to the . it’s a powerful feature built into all web browsers that is commonly used to fetch resources across the network, like making http requests to your backend apis.

Read more…


真人线上平台 this is a guest post from simon grimm, ionic developer expert and educator at . simon also recently released the book , a guide to building real world ionic applications.

After my session during Ioniconf, there was a question about routing inside Ionic modals that came up during the Q&A. Because the modal is not part of your standard Angular routing, you need a different way to handle navigation inside an overlay that exists outside the rest of your application.

You can achieve the same navigation in all directions (forward, back, root) using the ion-nav component真人线上平台 – a highly underrated component that will rescue your day.

Read more…


真人线上平台hipaa compliance for mobile is the responsibility of app development teams and their companies. while mobile technologies and platforms like ionic provide ui and integration with native sdks, they do not handle user data or network security as it pertains to hipaa compliance. nor would any other mobile technology, it’s simply out of the purview of a mobile framework.

however, what a platform like ionic will provide, is the building blocks and apis needed for teams to correctly implement user data storage and network security to follow hipaa compliance guidelines and secure protected health information (phi)

in this post we explore the apis and techniques often used as part of a hipaa compliant mobile experience, but discussion of broader hipaa compliance concerns is out of scope for this blog.

Read more…


On the heels of our recent GitLab announcement, we’re excited to share another Appflow update: Ionic Appflow now integrates with GitLab Self-Managed. With this feature, you can easily connect your GitLab Self-Managed code repositories to Appflow to manage native app builds, deploy to app stores, and update your apps over time.

Unfamiliar with Appflow真人线上平台? It’s a mobile DevOps solution that makes it easy to continuously build, deploy, and update mobile app experiences across iOS, Android, and the web. With Appflow, you can fully automate your team’s app development workflow, and go from idea to production.

真人线上平台appflow works directly with git version control, using your codebase as the source of truth for all available services, including the live update feature (update the ui and business logic of your app remotely in real-time) and native builds feature (building native app binaries for ios and android in the cloud). simply link your git host then push a new code commit to start building in the cloud.

Read more…


Ionic Blog RSS Feed