Mobile Development with Ionic and Vue — Badge, Button, and Card
Tags: programming, android, vue, webdev
Published: 2021-01-23 02:14:45

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

### Badge

We can add a badge with Ionic Vue.

For example, we can use the `ion-badge` component to add a badge:

```
<template>
  <ion-page>
    <ion-content>
      <ion-badge color="primary">11</ion-badge>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonBadge, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";

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

We can also put them in an `ion-item` container:

```
<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-badge slot="start">11</ion-badge>
        <ion-label>My Item</ion-label>
        <ion-badge slot="end">22</ion-badge>
      </ion-item>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonBadge, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";

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

The `slot` prop sets the position.

`start` is left and `end` is right.

### Button

We can add a button with the `ion-button` component.

For example, we can write:

```
<template>
  <ion-page>
    <ion-content>
      <ion-button color="secondary">Secondary</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonButton }
});
</script>
```

to add it.

The `color` prop has the color of the button.

We can disable it with the `disabled` prop.

And we can set the `size` with the size prop. We can set it to `default` , `large` , or `small` .

### Ripple Effect

We can add a ripple effect when we click on something with the `ion-ripple-effect` component.

For example, we can write:

```
<template>
  <ion-page>
    <ion-content>
      <button class="ion-activatable ripple-parent">
        A button with an unbounded ripple effect
        <ion-ripple-effect type="unbounded"></ion-ripple-effect>
      </button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonApp, IonContent, IonRippleEffect } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonApp, IonContent, IonRippleEffect },
});
</script>
```

to add the ripple effect.

### Cards

We can add cards with the `ion-card` component.

For example, we can write:

```
<template>
  <ion-card>
    <ion-item href="#" class="ion-activated">
      <ion-icon :icon="wifi" slot="start"></ion-icon>
      <ion-label>Card Link Item 1 activated</ion-label>
    </ion-item>

    <ion-item href="#">
      <ion-icon :icon="wine" slot="start"></ion-icon>
      <ion-label>Card Link Item 2</ion-label>
    </ion-item>

    <ion-item class="ion-activated">
      <ion-icon :icon="warning" slot="start"></ion-icon>
      <ion-label>Card Button Item 1 activated</ion-label>
    </ion-item>
  </ion-card>
</template>

<script>
import {
  IonCard,
  IonCardContent,
  IonCardSubtitle,
  IonCardTitle,
  IonIcon,
  IonItem,
  IonLabel,
} from "@ionic/vue";
import { pin, walk, warning, wifi, wine } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonCard,
    IonCardContent,
    IonCardSubtitle,
    IonCardTitle,
    IonIcon,
    IonItem,
    IonLabel,
  },
  setup() {
    return { pin, walk, warning, wifi, wine };
  },
});
</script>
```

to add the card with the items.

`ion-card` is the container for the card.

`ion-icon` has the icon.

`ion-label` has the label.

We can also use the `ion-card-content` component to add the card content:

```
<template>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      <ion-card-title>Card Title</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      Keep close to Nature's heart.
    </ion-card-content>
  </ion-card>
</template>

<script>
import {
  IonCard,
  IonCardContent,
  IonCardSubtitle,
  IonCardTitle,
  IonIcon,
  IonItem,
  IonLabel,
} from "@ionic/vue";
import { pin, walk, warning, wifi, wine } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonCard,
    IonCardContent,
    IonCardSubtitle,
    IonCardTitle,
    IonIcon,
    IonItem,
    IonLabel,
  },
  setup() {
    return { pin, walk, warning, wifi, wine };
  },
});
</script>
```

`ion-card-title` has the card’s title, and `ion-card-subtitle` has the card’s subtitle.

### Conclusion

We can add badges, buttons, and cards with Ionic Vue.