Mobile Development with Ionic and Vue — Textareas and Lists

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.