TMTApp/src/views/Tab2Page.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Courses</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Courses</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-grid>
        <ion-row>
          <ion-col size="12" size-md="4" size-lg="2" v-for="c in courses">
            <Course :course-obj="c" />
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter } from '@ionic/vue';
import Course from '@/components/Course.vue';
import { ref } from 'vue';

import {listCourses} from '@/settings';
const courses = ref([])

onIonViewWillEnter(async () => {

  courses.value = await listCourses()
})
</script>