Mobile Development with Ionic and Vue — Avatars, Modals, and Images
Tags: vue, webdev, android, javascript
Published: 2021-01-23 02:16:35

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


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>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonAvatar, IonChip } from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonAvatar,
    IonChip,
  },
});
</script>
```

And we can put them in an `ion-item` component:

```
<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-avatar slot="start">
          <img
            src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"
          />
        </ion-avatar>
        <ion-label>Item Avatar</ion-label>
      </ion-item>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonAvatar, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonAvatar,
    IonItem,
    IonLabel,
  },
});
</script>
```

### Image

We can add an image with the `ion-img` component.

For example, we can put it in a list item by writing:

```
<template>
  <ion-page>
    <ion-content>
      <ion-list>
        <ion-item v-for="item in items" :key="item.src">
          <ion-thumbnail slot="start">
            <ion-img :src="item.src"></ion-img>
          </ion-thumbnail>
          <ion-label>{{ item.text }}</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import {
  IonContent,
  IonPage,
  IonLabel,
  IonList,
  IonThumbnail,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonLabel,
    IonList,
    IonThumbnail,
  },
  setup() {
    const items = [
      {
        text: "Cat 1",
        src: "http://placekitten.com/200/200",
      },
      {
        text: "Cat 2",
        src: "http://placekitten.com/201/201",
      },
      {
        text: "Cat 3",
        src: "http://placekitten.com/200/200",
      },
    ];
    return { items };
  },
});
</script>
```

We put `ion-img` in an `img-thumbnail` component so we can show the images as thumbnails.

### Modal

We can add a modal with the `modalController` .

For example, we can write:

`Modal.vue`

```
<template>
  <div>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ title }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      {{ content }}
    </ion-content>
  </div>
</template>

<script>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
  components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>
```

`Home.vue`

```
<template>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-button @click="openModal">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import Modal from './Modal'

export default {
  components: { IonButton, IonContent, IonPage },
  methods: {
    async openModal() {
      const modal = await modalController
        .create({
          component: Modal,
          cssClass: 'my-custom-class',
          componentProps: {
            data: {
              content: 'New Content',
            },
            propsData: {
              title: 'New title',
            },
          },
        })
      return modal.present();
    },
  },
}
</script>
```

We add the `modalController` object to let us use the `Modal` component as the modal.

`Modal.vue` is used for the modal content.

In `Home.vue` , we call `modalController.create` to create the modal.

`component` is the component for the modal.

`cssClass` has the CSS class.

`componentProps` lets us pass in props to the `Modal` component and use them.

Now when we click the Open Modal button, we should see the modal.

### Conclusion

We can add avatars, images and modals with Ionic Vue.