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.

Loading Indicator

We can add a loading indicator with Ionic Vue with the ion-loading component.

For example, we can write:

<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
</template>

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

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController
        .create({
          cssClass: 'my-custom-class',
          message: 'Please wait...',
          duration: this.timeout,
        });

        await loading.present();

        setTimeout(function() {
        loading.dismiss()
      }, this.timeout);
    }
  },
  components: { IonButton }
});
</script>

to use it.

The loadingController.create method creates the loading indicator.

The object has the cssClass property to set the CSS class.

message has the loading indicator message.

duration has the duration to show the loading indicator.

loading.present shows the loading indicator.

loading.dismiss closes the loading indicator.

Also, we can make the loading indicator dismissible:

<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
</template>

<script>
import { IonButton, loadingController } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController.create({
        spinner: null,
        duration: this.timeout,
        message: "Click the backdrop to dismiss early...",
        translucent: true,
        cssClass: "custom-class custom-loading",
        backdropDismiss: true,
      });
      await loading.present();

      setTimeout(function () {
        loading.dismiss();
      }, this.timeout);
    },
  },
  components: { IonButton },
});
</script>

The spinner sets to null removes the spinner.

translucent makes the loading indicator container translucent.

backdropDismiss sets to true lets us dismiss the backdrop.

Progress Bar

We can add the progress bar with the ion-progress component.

For instance, we can use it by writing:

<template>
  <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
</template>

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

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

We set the color with the color prop.

value has the progress value between 0 and 1.

type has the type of progress bar.

reversed changes the bar movement direction from right to left.

Skeleton Text

We can add the skeleton text loading indicator.

For example, we can write:

<template>
  <div>
    <ion-item>
      <ion-skeleton-text
        animated
        style="width: 27px; height: 27px"
        slot="start"
      ></ion-skeleton-text>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
  </div>
</template>

<script>
import {
  IonAvatar,
  IonIcon,
  IonItem,
  IonLabel,
  IonList,
  IonListheader,
  IonSkeletonText,
  IonThumbnail,
} from "@ionic/vue";
import { call } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonAvatar,
    IonIcon,
    IonItem,
    IonLabel,
    IonList,
    IonListheader,
    IonSkeletonText,
    IonThumbnail,
  },
});
</script>

The ion-skeleton-text to add the bars for the skeleton text display.

animated makes the bars animated.

The width style sets the width of the bar.

Conclusion

We can add various loading indicators 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.

Backdrop

We can add a backdrop into our Ionic Vue app with the ion-backdrop component.

For example, we can write:

<template>
  <ion-backdrop
    :tappable="enableBackdropDismiss"
    :visible="showBackdrop"
    :stop-propagation="shouldPropagate"
  >
  </ion-backdrop>
</template>

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

export default defineComponent({
  components: { IonBackdrop },
  setup() {
    return {
      enableBackdropDismiss: true,
      showBackdrop: true,
      shouldPropagate: true,
    };
  },
});
</script>

to add the ion-backdrop component into our app.

tappable makes the backdrop tappable.

visible lets us make the backdrop visible.

stop-propagation lets us stop the propagation of events if it’s true .

Popovers

We can show popovers by using the ion-popover component.

For example, we can write:

views/Popover.vue

<template>
  <ion-content class="ion-padding">
    Popover Content
  </ion-content>
</template>

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

export default defineComponent({
  name: 'Popover',
  components: { IonContent }
});
</script>

views/Home.vue

<template>
  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
  <ion-popover
    :is-open="isOpenRef"
    css-class="my-custom-class"
    :event="event"
    :translucent="true"
    @onDidDismiss="setOpen(false)"
  >
    <Popover></Popover>
  </ion-popover>
</template>

<script>
import { IonButton, IonPopover } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import Popover from './Popover'

export default defineComponent({
  components: { IonButton, IonPopover, Popover },
  setup() {
    const isOpenRef = ref(false);
    const event = ref();
    const setOpen = (state, event) => {
      event.value = event;
      isOpenRef.value = state;
    }
    return { isOpenRef, setOpen, event }
  }
});
</script>

The Popover component is used for the popover content.

We have a button to show the popover when clicked.

Also, we have the Popover displayed when we open the popover.

is-open has the open state as the value.

css-class has the CSS class for the modal.

event has the event object.

setOpen sets whether the popover is open by setting the isOpenRef.value property to the state .

The state has the open state.

Loading Indicator

We can add a loading indicator with the loadingController .

To use it, we can write:

<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
</template>

<script>
import { IonButton, loadingController } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController.create({
        cssClass: "my-custom-class",
        message: "Loading...",
        duration: this.timeout,
      });

      await loading.present();

      setTimeout(function () {
        loading.dismiss();
      }, this.timeout);
    },
  },
  components: { IonButton },
});
</script>

We have the presentLoading method that calls the loadingController.create method to create the loading indicator object.

cssClass has the CSS class.

message has the message for the loading indicator.

duration has the duration for how long the indicator should show.

loading.present() shows the loading indicator.

loading.dismiss() closes the loading indicator.

Conclusion

We can show a backdrop, a popover, and a loading indicator 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.

Backdrop

We can add a backdrop into our Ionic Vue app with the ion-backdrop component.

For example, we can write:

<template>
  <ion-backdrop
    :tappable="enableBackdropDismiss"
    :visible="showBackdrop"
    :stop-propagation="shouldPropagate"
  >
  </ion-backdrop>
</template>

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

export default defineComponent({
  components: { IonBackdrop },
  setup() {
    return {
      enableBackdropDismiss: true,
      showBackdrop: true,
      shouldPropagate: true,
    };
  },
});
</script>

to add the ion-backdrop component into our app.

tappable makes the backdrop tappable.

visible lets us make the backdrop visible.

stop-propagation lets us stop the propagation of events if it’s true .

Popovers

We can show popovers by using the ion-popover component.

For example, we can write:

views/Popover.vue

<template>
  <ion-content class="ion-padding">
    Popover Content
  </ion-content>
</template>

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

export default defineComponent({
  name: 'Popover',
  components: { IonContent }
});
</script>

views/Home.vue

<template>
  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
  <ion-popover
    :is-open="isOpenRef"
    css-class="my-custom-class"
    :event="event"
    :translucent="true"
    @onDidDismiss="setOpen(false)"
  >
    <Popover></Popover>
  </ion-popover>
</template>

<script>
import { IonButton, IonPopover } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import Popover from './Popover'

export default defineComponent({
  components: { IonButton, IonPopover, Popover },
  setup() {
    const isOpenRef = ref(false);
    const event = ref();
    const setOpen = (state, event) => {
      event.value = event;
      isOpenRef.value = state;
    }
    return { isOpenRef, setOpen, event }
  }
});
</script>

The Popover component is used for the popover content.

We have a button to show the popover when clicked.

Also, we have the Popover displayed when we open the popover.

is-open has the open state as the value.

css-class has the CSS class for the modal.

event has the event object.

setOpen sets whether the popover is open by setting the isOpenRef.value property to the state .

The state has the open state.

Loading Indicator

We can add a loading indicator with the loadingController .

To use it, we can write:

<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
</template>

<script>
import { IonButton, loadingController } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController.create({
        cssClass: "my-custom-class",
        message: "Loading...",
        duration: this.timeout,
      });

      await loading.present();

      setTimeout(function () {
        loading.dismiss();
      }, this.timeout);
    },
  },
  components: { IonButton },
});
</script>

We have the presentLoading method that calls the loadingController.create method to create the loading indicator object.

cssClass has the CSS class.

message has the message for the loading indicator.

duration has the duration for how long the indicator should show.

loading.present() shows the loading indicator.

loading.dismiss() closes the loading indicator.

Conclusion

We can show a backdrop, a popover, and a loading indicator 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.

Avatars

We can add avatars with the ion-avatar component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <ion-avatar>
        <img
          src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"
        />
      </ion-avatar>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonAvatar } from "@ionic/vue";
import { defineComponent, ref } from "vue";

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

to add a simple avatar.

Avatars can also be embedded in chips:

<template>
  <ion-page>
    <ion-content>
      <ion-chip>
        <ion-avatar>
          <img
            src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"
          />
        </ion-avatar>
        <ion-label>Chip Avatar</ion-label>
      </ion-chip>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonAvatar, IonChip } from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonAvatar,
    IonChip,
  },
});
</script>

And we can put them in an ion-item component:

<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-avatar slot="start">
          <img
            src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"
          />
        </ion-avatar>
        <ion-label>Item Avatar</ion-label>
      </ion-item>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonAvatar, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonAvatar,
    IonItem,
    IonLabel,
  },
});
</script>

Image

We can add an image with the ion-img component.

For example, we can put it in a list item by writing:

<template>
  <ion-page>
    <ion-content>
      <ion-list>
        <ion-item v-for="item in items" :key="item.src">
          <ion-thumbnail slot="start">
            <ion-img :src="item.src"></ion-img>
          </ion-thumbnail>
          <ion-label>{{ item.text }}</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import {
  IonContent,
  IonPage,
  IonLabel,
  IonList,
  IonThumbnail,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonLabel,
    IonList,
    IonThumbnail,
  },
  setup() {
    const items = [
      {
        text: "Cat 1",
        src: "http://placekitten.com/200/200",
      },
      {
        text: "Cat 2",
        src: "http://placekitten.com/201/201",
      },
      {
        text: "Cat 3",
        src: "http://placekitten.com/200/200",
      },
    ];
    return { items };
  },
});
</script>

We put ion-img in an img-thumbnail component so we can show the images as thumbnails.

Modal

We can add a modal with the modalController .

For example, we can write:

Modal.vue

<template>
  <div>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ title }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      {{ content }}
    </ion-content>
  </div>
</template>

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

export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
  components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>

Home.vue

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

<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import Modal from './Modal'

export default {
  components: { IonButton, IonContent, IonPage },
  methods: {
    async openModal() {
      const modal = await modalController
        .create({
          component: Modal,
          cssClass: 'my-custom-class',
          componentProps: {
            data: {
              content: 'New Content',
            },
            propsData: {
              title: 'New title',
            },
          },
        })
      return modal.present();
    },
  },
}
</script>

We add the modalController object to let us use the Modal component as the modal.

Modal.vue is used for the modal content.

In Home.vue , we call modalController.create to create the modal.

component is the component for the modal.

cssClass has the CSS class.

componentProps lets us pass in props to the Modal component and use them.

Now when we click the Open Modal button, we should see the modal.

Conclusion

We can add avatars, images and modals 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.

Textarea

We can add a text area with the ion-textarea component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-textarea
          placeholder="Enter more information here"
          v-model="val"
        ></ion-textarea>
      </ion-item>
      <ion-item>
        <ion-text>{{ val }}</ion-text>
      </ion-item>
    </ion-content>
  </ion-page>
</template>
<script>
import { IonItem, IonTextarea, IonContent, IonText, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: { IonItem, IonTextarea, IonContent, IonText, IonPage },
  setup() {
    const val = ref("hello world");
    return {
      val,
    };
  },
});
</script>

We add the ion-textarea into our template,

Then we can bind the input value to the val reactive property with the v-model directive.

placeholder has the placeholder for the text area.

List Items

We can add list items with the ion-item component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-label> Item </ion-label>
      </ion-item>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";

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

to add the component.

Also, we can set the color:

<template>
  <ion-page>
    <ion-content>
      <ion-item color="secondary">
        <ion-label> Secondary Color Item </ion-label>
      </ion-item>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";

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

And we can make it a link:

<template>
  <ion-page>
    <ion-content>
      <ion-item href="https://www.ionicframework.com">
        <ion-label> Anchor Item </ion-label>
      </ion-item>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";

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

We can also make it a button:

<template>
  <ion-page>
    <ion-content>
      <ion-item button @click="() => console.log('clicked')">
        <ion-label> Button Item </ion-label>
      </ion-item>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";

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

Item Divider

We can add an item divider to add a heading to our list.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <ion-list>
        <ion-item-divider>
          <ion-label> Section A </ion-label>
        </ion-item-divider>

        <ion-item><ion-label>A1</ion-label></ion-item>
        <ion-item><ion-label>A2</ion-label></ion-item>

        <ion-item-divider>
          <ion-label> Section B </ion-label>
        </ion-item-divider>

        <ion-item><ion-label>B1</ion-label></ion-item>
        <ion-item><ion-label>B2</ion-label></ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import {
  IonItem,
  IonContent,
  IonItemDivider,
  IonPage,
  IonLabel,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: { IonItem, IonContent, IonItemDivider, IonPage, IonLabel },
});
</script>

to add 2 lists on top of each other.

The ion-item-divider lets us add list headings.

ion-item has the list items.

ion-label has the list item text.

Conclusion

We can add text areas and items with item dividers with Ionic Vue.