refactor: everything to nuxt.js

app/components/boat/BoatPreviewComponent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Boat } from '~/utils/boat.types';
+
+defineProps({ boats: Array<Boat> });
+</script>
+
+<template>
+  <div v-if="boats" class="row">
+    <q-card
+      v-for="boat in boats"
+      :key="boat.$id"
+      class="q-ma-sm col-xs-12 col-sm-6 col-xl-3">
+      <q-card-section>
+        <q-img :src="boat.imgSrc" :fit="'scale-down'">
+          <div class="row absolute-top">
+            <div class="col text-h6 text-left">{{ boat.name }}</div>
+            <div class="col text-right">{{ boat.class }}</div>
+          </div>
+        </q-img>
+      </q-card-section>
+      <q-separator />
+    </q-card>
+  </div>
+  <div v-else><q-card>Sorry, no boats to show you!</q-card></div>
+</template>