Mobile Development with Ionic and Vue — Footer, Button Group, and Text
Tags: vue, android, webdev, javascript
Published: 2021-01-23 02:20:43

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

### Footer

We can add a footer with Ionic Vue.

To do that, we use the `ion-footer` component:

```
<template>
  <ion-page>
    <ion-content></ion-content>
    <ion-footer>
      <ion-toolbar>
        <ion-title>Footer</ion-title>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>

<script lang='ts'>
import {
  IonContent,
  IonFooter,
  IonTitle,
  IonToolbar,
  IonPage,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonContent, IonFooter, IonTitle, IonToolbar, IonPage },
});
</script>
```

We can also add one with no border:

```
<template>
  <ion-page>
    <ion-content></ion-content>
    <ion-footer class="ion-no-border">
      <ion-toolbar>
        <ion-title>Footer - No Border</ion-title>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>

<script lang='ts'>
import {
  IonContent,
  IonFooter,
  IonTitle,
  IonToolbar,
  IonPage,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonContent, IonFooter, IonTitle, IonToolbar, IonPage },
});
</script>
```

Then `ion-content` component holds the content on top.

The `ion-title` component has the title for the footer.

### Button Group

We can add button groups with the `ion-buttons` component.

For example, we can write:

```
<template>
  <ion-page>
    <ion-toolbar>
      <ion-buttons slot="primary">
        <ion-button @click="clickedStar()">
          <ion-icon slot="icon-only" name="star"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>Right side menu toggle</ion-title>
      <ion-buttons slot="end">
        <ion-menu-button auto-hide="false"></ion-menu-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-page>
</template>

<script>
import {
  IonBackButton,
  IonButton,
  IonButtons,
  IonIcon,
  IonMenuButton,
  IonTitle,
  IonToolbar,
  IonPage
} from "@ionic/vue";
import { personCircle, search } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonBackButton,
    IonButton,
    IonButtons,
    IonIcon,
    IonMenuButton,
    IonTitle,
    IonToolbar,
    IonPage
  },
  setup() {
    const clickedStar = () => {
      console.log("Star clicked!");
    };
    return { personCircle, search, clickedStar };
  },
});
</script>
```

to add the `ion-buttons` component.

Then we can add the `ion-button` components inside to add the buttons.

`ion-button` emits the `click` event so we can run something when we click it.

### Text

We can add text into our app with the `ion-text` component.

For example, we can write:

```
<template>
  <ion-page>
    <ion-text color="danger">
      <h4>H4: The quick brown fox jumps over the lazy dog</h4>
    </ion-text>
  </ion-page>
</template>

<script>
import { IonPage, IonText } from "@ionic/vue";
import { defineComponent } from "vue";

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

to add the text.

`color` has the color of the text.

### Conclusion

We can add a footer, button group and text with Ionic Vue.