refactor: everything to nuxt.js

app/components/boat/BoatPickerComponent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useBoatStore } from '~/stores/boat';
+import type { Boat } from '~/utils/boat.types';
+
+const boats = useBoatStore().boats;
+const boat = <Boat | undefined>undefined;
+</script>
+
+<template>
+  <q-select v-model="boat" :options="boats" option-value="id" option-label="name" label="Boat">
+    <template v-slot:prepend>
+      <q-item-section avatar>
+        <q-img v-if="boat?.iconSrc" :src="boat?.iconSrc" />
+        <q-icon v-else name="sailing" />
+      </q-item-section>
+    </template>
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <q-img :src="scope.opt.iconsrc" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ scope.opt.name }}</q-item-label>
+          <q-item-label caption>{{ scope.opt.class }}</q-item-label>
+        </q-item-section>
+        <q-item-section avatar v-if="scope.opt.defects">
+          <q-icon name="warning" color="warning" />
+          <q-tooltip class="bg-amber text-black shadow-7">
+            This boat has notices. Select it to see details.
+          </q-tooltip>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>