Mobile Development with Ionic and Vue — Avatars, Modals, and Images

Photo by Sarah Brown on Unsplash

If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.

Avatars

We can add avatars with the ion-avatar component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <ion-avatar>
        <img
          src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"
        />
      </ion-avatar>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonAvatar } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonAvatar,
  },
});
</script>

to add a simple avatar.

Avatars can also be embedded in chips:

<template>
  <ion-page>
    <ion-content>
      <ion-chip>
        <ion-avatar>
          <img
            src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"
          />
        </ion-avatar>
        <ion-label>Chip Avatar</ion-label>
      </ion-chip>…