refactor: Use <script setup>

Author: Andrew Welch

src/web/assets/src/vue/App.vue

@@ -1,20 +1,7 @@
 <template>
-    <confetti></confetti>
+  <confetti-party />
 </template>
 
-<script lang="ts">
-// Async load the Vue 3 APIs we need from the Vue ESM
-import {defineAsyncComponent, defineComponent } from 'vue';
-import Confetti from '@/vue/Confetti.vue';
-export default defineComponent({
-  components: {
-    'confetti': Confetti,
-  },
-  data: () => ({
-  }),
-  methods: {
-  },
-  mounted() {
-  },
-});
+<script setup lang="ts">
+import ConfettiParty from '@/vue/ConfettiParty.vue';
 </script>

src/web/assets/src/vue/Confetti.vue

@@ -0,0 +1,22 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import Confetti from 'vue-confetti/src/confetti.js';
+
+const config: Partial<ConfettiConfig> = {
+  defaultType: 'rect',
+  defaultSize: 15,
+  defaultColors: ['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson'],
+};
+const confetti: ConfettiInterface = new Confetti();
+
+onMounted(() => {
+  confetti.start(config);
+  setTimeout(() => {
+    confetti.stop();
+  }, 5000);
+});
+</script>