fix: 🧑‍💻 use watch mode

frontend/components/Navbar.vue

@@ -12,7 +12,7 @@
     </div>
     <div class="navbar-menu">
       <div class="navbar-start">
-        <a class="navbar-item" :href="`${$api}/docs`">
+        <a class="navbar-item" href="/docs">
           <span class="icon-text">
             <span class="icon">
               <i class="fa fa-book"></i>

frontend/main.ts

@@ -4,15 +4,6 @@ import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router'
 
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $api: string
-  }
-}
-
 const app = createApp(App)
-app.config.globalProperties.$api = import.meta.env.PROD
-  ? `${import.meta.env.BASE_URL}api`
-  : `http://localhost:${import.meta.env.API_PORT ?? 8000}/api`
 app.use(router)
 app.mount('#app')

frontend/views/Containers.vue

@@ -1,18 +1,18 @@
 <template>
   <Loading class="container" :loading="loading">
-    <Message v-if="error" type="danger">Error loading containers</Message>
+    <Message v-if="error" type="danger">{{ error }}</Message>
     <ul v-if="!loading && !error">
-      <li v-for="container in containers" :key="container.name">
-        {{ container.name }}
+      <li v-for="container in containers" :key="container">
+        {{ container }}
       </li>
     </ul>
   </Loading>
 </template>
 
 <script lang="ts">
+import axios, { AxiosError } from 'axios'
 import Loading from '@/components/Loading.vue'
 import Message from '@/components/Message.vue'
-import axios from 'axios'
 
 export default {
   name: 'Containers',
@@ -22,17 +22,19 @@ export default {
   },
   data() {
     return {
-      containers: [],
-      error: false,
+      containers: [] as string[],
+      error: '',
       loading: true,
     }
   },
   async mounted() {
     try {
-      this.containers = await axios.get(`${this.$api}/api/containers`)
+      const response = await axios.get<string[]>('/api/containers')
+      this.containers = response.data
     } catch (error) {
       console.error(error)
-      this.error = true
+      this.error =
+        error instanceof AxiosError ? error.message : 'Error loading containers'
     } finally {
       this.loading = false
     }

package.json

@@ -4,9 +4,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "preview": "vite preview",
-    "build-only": "vite build",
+    "build": "vite build",
+    "watch": "vite build --watch",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix"
   },