Category: Vue Ionic

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.

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.

Toggle Switches

We can add toggle switches with the ion-toggle component.

For example, we can add switches with various colors:

<template>
  <div>
    <ion-toggle color="primary"></ion-toggle>
    <ion-toggle color="secondary"></ion-toggle>
    <ion-toggle color="danger"></ion-toggle>
    <ion-toggle color="light"></ion-toggle>
    <ion-toggle color="dark"></ion-toggle>
  </div>
</template>

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

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

Also, we can write:

<template>
  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle
      @ionChange="checked.value = !checked.value"
      value="mushrooms"
      :checked="checked"
    >
    </ion-toggle>
  </ion-item>
</template>

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

export default defineComponent({
  components: { IonLabel, IonList, IonItem, IonToggle },
  setup() {
    const checked = ref(false);
    return { checked };
  },
});
</script>

to set a reactive property when we toggle the value.

Toolbar

We can add a toolbar with the ion-toolbar component.

For instance, we can write:

<template>
  <ion-toolbar color="dark">
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" :icon="search"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button color="danger">
        <ion-icon
          slot="icon-only"
          :ios="ellipsisHorizontal"
          :md="ellipsisVertical"
        ></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Dark Toolbar</ion-title>
  </ion-toolbar>
</template>

<script>
import {
  IonButton,
  IonButtons,
  IonIcon,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";
import {
  ellipsisHorizontal,
  ellipsisVertical,
  helpCircle,
  personCircle,
  search,
  star,
} from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonButton,
    IonButtons,
    IonIcon,
    IonTitle,
    IonToolbar,
  },
  setup() {
    return {
      ellipsisHorizontal,
      ellipsisVertical,
      helpCircle,
      personCircle,
      search,
      star,
    };
  },
});
</script>

to add a dark toolbar with some buttons inside it.

ion-title has the title of the toolbar, which is displayed on the left side.

Header

We can add a header with various styles.

For example, we can write:

<template>
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
      </ion-buttons>
      <ion-title>Navigation Bar</ion-title>
    </ion-toolbar>

    <ion-toolbar>
      <ion-title>Subheader</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- Header without a border -->
  <ion-header class="ion-no-border">
    <ion-toolbar>
      <ion-title>Header - No Border</ion-title>
    </ion-toolbar>
  </ion-header>
</template>

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

export default defineComponent({
  components: {
    IonBackButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar
  }
});
</script>

to add the header with a toolbar inside.

We can add the ion-no-border class to remove the border from the header.

Conclusion

We can add a toggle switch, toolbar and header with Ionic Vue.

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.

Segment Display

We can use the ion-segment component to add a segment display.

For example, we can write:

<template>
  <ion-segment @ionChange="segmentChanged($event)">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>
</template>

<script lang="ts">
import { IonSegment, IonSegmentButton, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSegment, IonSegmentButton, IonToolbar },
  methods: {
    segmentChanged(ev: CustomEvent) {
      console.log("Segment changed", ev);
    },
  },
});
</script>

We add the ion-segment component to add the segment.

The ionChange event is emitted when we click on the segment.

ion-segment-button has the buttons for the segment display.

We can also change the color with the color prop:

<template>
  <ion-segment @ionChange="segmentChanged($event)" color="secondary">
    <ion-segment-button value="standard">
      <ion-label>Standard</ion-label>
    </ion-segment-button>
    <ion-segment-button value="hybrid">
      <ion-label>Hybrid</ion-label>
    </ion-segment-button>
    <ion-segment-button value="sat">
      <ion-label>Satellite</ion-label>
    </ion-segment-button>
  </ion-segment>
</template>

<script lang="ts">
import { IonSegment, IonSegmentButton, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSegment, IonSegmentButton, IonToolbar },
  methods: {
    segmentChanged(ev: CustomEvent) {
      console.log("Segment changed", ev);
    },
  },
});
</script>

Select Dropdown

We can add a select dropdown with the ion-select and ion-select-option components.

For example, we can write:

<template>
  <ion-list>
    <ion-item>
      <ion-label>Hair Color</ion-label>
      <ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
        <ion-select-option value="brown">Brown</ion-select-option>
        <ion-select-option value="blonde">Blonde</ion-select-option>
        <ion-select-option value="black">Black</ion-select-option>
        <ion-select-option value="red">Red</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonSelect,
  IonSelectOption,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonSelect,
    IonSelectOption,
  },
});
</script>

We add the ion-label for the label.

ion-select is the select dropdown.

ok-text has the button for the OK text. cancel-text has the Cancel text.

ion-select-option has the option.

Toast

We can add a toast popup with Ionic Vue.

For example, we can write:

<template>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-button @click="openToast">Open Toast</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, IonContent, IonPage, toastController } from "@ionic/vue";

export default {
  components: { IonButton, IonContent, IonPage },
  methods: {
    async openToast() {
      const toast = await toastController.create({
        header: "Toast header",
        message: "Click to Close",
        position: "top",
        buttons: [
          {
            side: "start",
            icon: "star",
            text: "Favorite",
            handler: () => {
              console.log("Favorite clicked");
            },
          },
          {
            text: "Done",
            role: "cancel",
            handler: () => {
              console.log("Cancel clicked");
            },
          },
        ],
      });
      return toast.present();
    },
  },
};
</script>

We add a button that calls openToast when it’s clicked.

The toastController.create method creates the toast.

header has the toast header.

message has the toast message.

position has the position.

buttons have the buttons. It’s an array of objects that some options.

side has the side to put the button. start puts it on the left.

icon has the button icon.

text has the button text.

handler is a function that’s called when it’s clicked.

Conclusion

We can add segment display, select dropdowns, and toasts with Ionic Vue.

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.

Pull to Refresh

We can add a pull to refresh component with the ion-refresher component.

For example, we can write:

<template>
  <ion-content>
    <ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
  </ion-content>
  <ion-content>
    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
      <ion-refresher-content
        :pulling-icon="chevronDownCircleOutline"
        pulling-text="Pull to refresh"
        refreshing-spinner="circles"
        refreshing-text="Refreshing..."
      >
      </ion-refresher-content>
    </ion-refresher>
  </ion-content>
</template>

<script lang="ts">
import { IonContent, IonRefresher, IonRefresherContent } from "@ionic/vue";
import { chevronDownCircleOutline } from "ionicons/icons";
import { defineComponent } from "vue";

interface CustomEvent {
  target: {
    complete: Function;
  };
}

export default defineComponent({
  components: { IonContent, IonRefresher, IonRefresherContent },
  setup() {
    const doRefresh = (event: CustomEvent) => {
      console.log("Begin");
      setTimeout(() => {
        console.log("End");
        event.target.complete();
      }, 2000);
    };
    return { chevronDownCircleOutline, doRefresh };
  },
});
</script>

The pulling-icon shows the icon.

pulling-text has the refresh indicator text.

refreshing-spinner sets the spinner type.

refreshing-text sets the text for the spinner.

ion-refresher-content has the content that we want to refresh with the pull to refresh feature.

Reorder

We can add reorderable items with the ion-reorder component.

For example, we can write:

<template>
  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
  <ion-reorder-group :disabled="false">
    <ion-item>
      <ion-label> Item 1 </ion-label>
      <ion-reorder slot="end">
        <ion-icon name="pizza"></ion-icon>
      </ion-reorder>
    </ion-item>
    <ion-item>
      <ion-label> Item 2 </ion-label>
      <ion-reorder slot="end">
        <ion-icon name="pizza"></ion-icon>
      </ion-reorder>
    </ion-item>
    <ion-reorder>
      <ion-item>
        <ion-label> Item 3 </ion-label>
      </ion-item>
    </ion-reorder>
  </ion-reorder-group>
</template>

<script>
import {
  IonIcon,
  IonItem,
  IonLabel,
  IonReorder,
  IonReorderGroup,
} from "@ionic/vue";
import { pizza } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonIcon,
    IonItem,
    IonLabel,
    IonReorder,
    IonReorderGroup,
  },
  setup() {
    return { pizza };
  },
});
</script>

to add it.

ion-reorder is wrapped around the item we want to make draggable.

Search Bar

We can add a search bar with the ion-searchbar component.

For example, we can write:

<template>
  <ion-searchbar
    show-cancel-button="focus"
    cancel-button-text="Custom Cancel"
  ></ion-searchbar>
  <ion-searchbar debounce="500"></ion-searchbar>
  <ion-searchbar animated></ion-searchbar>
  <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</template>

<script>
import { IonSearchbar, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSearchbar, IonToolbar },
});
</script>

The debounce prop sets the debounce.

show-cancel-button adds a cancel button to the search bar.

animated makes the search bar animated.

placeholder has the search bar placeholder.

We can also put search bars in a toolbar.

Also, we can set the type of the search bar:

<template>
  <ion-searchbar type="tel"></ion-searchbar>
</template>

<script>
import { IonSearchbar, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSearchbar, IonToolbar },
});
</script>

We set type to tel so that we let users enter phone numbers.

Conclusion

We can add pull to refresh, reorderable items and search bars with Ionic Vue.

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.

Loading Spinner

We can add a loading spinner with the ion-spinner component.

For example, we can write:

<template>
  <ion-spinner name="bubbles"></ion-spinner>
</template>

<script>
import { IonSpinner } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSpinner },
});
</script>

to add a loading spinner.

Radio

We can add radio buttons with the ion-radio component.

For example, we can write:

<template>
  <ion-list>
    <ion-radio-group value="biff">
      <ion-list-header>
        <ion-label>Name</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Biff</ion-label>
        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Cliff</ion-label>
        <ion-radio slot="start" value="cliff"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonRadio,
  IonRadioGroup,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonRadio,
    IonRadioGroup,
  },
});
</script>
CopyCopied
Properties

to add an ion-list component and ion-item component to hold a series of radio buttons.

The slot prop set to start put the radio button on the left side.

Also, we can put radio buttons in ion-radio-group component:

<template>
  <ion-list>
    <ion-radio-group>
      <ion-list-header>
        <ion-label> Auto Manufacturers </ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Cord</ion-label>
        <ion-radio value="cord"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Duesenberg</ion-label>
        <ion-radio value="duesenberg"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonRadio,
  IonRadioGroup,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonRadio,
    IonRadioGroup,
  },
});
</script>

We add the ion-radio-group component to group the radio buttons together.

Range Input

We can add a numeric input with the ion-range component.

For example, we can write:

<template>
  <ion-list>
    <ion-item>
      <ion-range
        :min="1000"
        :max="2000"
        :step="100"
        :snaps="true"
        color="secondary"
      ></ion-range>
    </ion-item>
    <ion-item>
      <ion-range
        ref="rangeDualKnobs"
        dual-knobs="true"
        :min="21"
        :max="72"
        :step="3"
        :snaps="true"
      ></ion-range>
    </ion-item>
  </ion-list>
</template>

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

export default defineComponent({
  components: { IonItem, IonLabel, IonList, IonRange },
  mounted() {
    this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
  },
});
</script>

We add the ion-range component with a few props.

min sets the min allowed value.

max sets the max allowed value.

step sets step interval.

snaps set to true makes the knob snaps to a step.

We can also assign a ref so that we can set the value property with it to set the value.

Conclusion

We can add a loading spinner and a range input with Ionic Vue.