Mobile Development with Ionic and Vue — Grid and Inputs
Tags: vue, android, webdev, javascript
Published: 2021-01-23 02:15:39

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

### Grid

We can add grids for layouts with Ionic.

To add it, we use the `ion-grid` , `ion-row` and `ion-col` components.

For example, we can write:

```
<template>
  <ion-grid>
    <ion-row>
      <ion-col> ion-col </ion-col>
      <ion-col> ion-col </ion-col>
      <ion-col> ion-col </ion-col>
      <ion-col> ion-col </ion-col>
    </ion-row>
  </ion-grid>
</template>

<script>
import { IonCol, IonGrid, IonRow } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonCol, IonGrid, IonRow },
});
</script>
```

We add the `ion-grid` to add the grid container.

`ion-row` has the rows, and `ion-col` has the columns.

The columns will be evenly distributed.

To add different size grids, we can write:

```
<template>
  <ion-grid>
    <ion-row>
      <ion-col size="6" size-lg offset="3">
        ion-col [size="6"] [size-lg] [offset="3"]
      </ion-col>
      <ion-col size="3" size-lg> ion-col [size="3"] [size-lg] </ion-col>
    </ion-row>
  </ion-grid>
</template>

<script>
import { IonCol, IonGrid, IonRow } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonCol, IonGrid, IonRow },
});
</script>
```

The `size` has the number of columns from 1 to 12.

`size-lg` makes the size large.

`offset` lets us set the offset.

### Inputs

We can add a text input into our Ionic Vue app with the `ion-input` component.

For example, we can write:

```
<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-input placeholder="Enter Input" v-model="val"></ion-input>
      </ion-item>
      <ion-item>
        <ion-text>{{ val }}</ion-text>
      </ion-item>
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonLabel,
  IonInput,
  IonItem,
  IonContent,
  IonText,
  IonPage,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: { IonLabel, IonInput, IonItem, IonContent, IonText, IonPage },
  setup() {
    const val = ref("hello world");
    return {
      val,
    };
  },
});
</script>
```

to add a text input.

We use `v-model` to bind to the `val` reactive properties.

And we defined that in the `setup` method and returned it to do the binding.

Also, we can add a numeric input by setting the `type` to `number` :

```
<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-input type="number" v-model="val"></ion-input>
      </ion-item>
      <ion-item>
        <ion-text>{{ val }}</ion-text>
      </ion-item>
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonLabel,
  IonInput,
  IonItem,
  IonContent,
  IonText,
  IonPage,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: { IonLabel, IonInput, IonItem, IonContent, IonText, IonPage },
  setup() {
    const val = ref(0);
    return {
      val,
    };
  },
});
</script>
```

The `disabled` and `readonly` props disable interaction with the input.

`readonly` doesn’t change the styles.

### Conclusion

We can add grids and inputs with Ionic Vue.