Mobile Development with Ionic and Vue — Textareas and Lists
Tags: android, vue, webdev, javascript
Published: 2021-01-23 02:16:00

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

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