feat(frontend): added typescript, vue3 and vuetify support

resources/js/app.js

@@ -1 +0,0 @@
-import './bootstrap';

resources/js/app.ts

@@ -0,0 +1,6 @@
+import './bootstrap';
+import vuetify from "./vuetify";
+import { createApp } from "vue";
+import app from "./layouts/app.vue";
+
+createApp(app).use(vuetify).mount("#app");

resources/js/layouts/app.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <v-container :fluid="true">
+
+  </v-container>
+</template>
+
+<style scoped>
+  .v-container {
+    padding: 2px;
+  }
+</style>

resources/js/vuetify.ts

@@ -0,0 +1,50 @@
+// Vuetify
+import "vuetify/styles";
+import {createVuetify} from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+
+/**
+ * Example of custom Theme
+ * @type {{dark: boolean, colors: {magenta: string, pink: string, green: string, lightpink: string, yellow: string, error: string, darkblueshade: string, accent: string, secondary: string, orange: string, red: string, gray: string, lightblue: string, white: string, success: string, neutralgray: string, warning: string, darkblue: string, muted: string, lightgray: string, primary: string, info: string}}}
+ */
+const customTheme = {
+    dark: false,
+    colors: {
+        primary: "#673AB7",
+        secondary: "#424242",
+        accent: "#82B1FF",
+        error: "#FF5252",
+        info: "#2196F3",
+        success: "#4CAF50",
+        warning: "#FFC107",
+        lightblue: "#14c6FF",
+        yellow: "#FFCF00",
+        pink: "#FF1976",
+        orange: "#FF8657",
+        magenta: "#C33AFC",
+        darkblue: "#1E2D56",
+        gray: "#909090",
+        neutralgray: "#9BA6C1",
+        green: "#2ED47A",
+        red: "#FF5c4E",
+        darkblueshade: "#308DC2",
+        lightgray: "#BDBDBD",
+        lightpink: "#FFCFE3",
+        white: "#FFFFFF",
+        muted: "#6c757d",
+    },
+};
+
+const vuetify = createVuetify({
+    components,
+    directives,
+    theme: {
+        defaultTheme: 'dark',
+        // themes: {
+        //     customeTheme,
+        // },
+    },
+});
+
+export default vuetify;