Mobile Development with Ionic and Vue — Footer, Button Group, and Text

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.