pilotwings/frontend/views/Home.vue

<template>
  <Loading class="container" :loading="loading">
    <Message v-if="error" type="danger">{{ error }}</Message>
    <ul v-if="!loading && !error">
      <li v-for="container in containers" :key="container">
        <router-link :to="`/container/${container}`">
          {{ container }}
        </router-link>
      </li>
    </ul>
  </Loading>
</template>

<script lang="ts">
import axios, { AxiosError } from 'axios'
import Loading from '@/components/Loading.vue'
import Message from '@/components/Message.vue'

export default {
  name: 'Home',
  components: {
    Loading,
    Message,
  },
  data() {
    return {
      containers: [] as string[],
      error: '',
      loading: true,
    }
  },
  async mounted() {
    try {
      const response = await axios.get<string[]>('/api/containers')
      this.containers = response.data
    } catch (error) {
      console.error(error)
      this.error =
        error instanceof AxiosError ? error.message : 'Error loading containers'
    } finally {
      this.loading = false
    }
  },
}
</script>