Mobile Development with Ionic and Vue — Pull to Refresh, Reorder, and Search Bars
Tags: vue, javascript, webdev, android
Published: 2021-01-23 02:19:26

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

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