migrate to vite, less depend from nova

dist/.vite/manifest.json

@@ -0,0 +1,11 @@
+{
+  "resources/js/tool.js": {
+    "file": "js/tool.js",
+    "src": "resources/js/tool.js",
+    "isEntry": true
+  },
+  "style.css": {
+    "file": "css/tool.css",
+    "src": "style.css"
+  }
+}

package.json

@@ -1,20 +1,23 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production",
+        "dev": "vite build --watch",
+        "build": "vite build",
         "nova:install": "npm --prefix='vendor/laravel/nova' ci"
     },
     "devDependencies": {
+        "@inertiajs/inertia": "^0.11.1",
+        "@inertiajs/inertia-vue3": "^0.6.0",
+        "@vitejs/plugin-vue": "^5.0.4",
         "@vue/compiler-sfc": "^3.2.22",
-        "laravel-mix": "^6.0.41",
-        "postcss": "^8.3.11",
+        "postcss": "^8.4.37",
+        "vite": "^5.1.6",
         "vue-loader": "^16.8.3"
     },
-    "dependencies": {}
+    "dependencies": {
+        "@headlessui/tailwindcss": "^0.2.0",
+        "@headlessui/vue": "^1.7.19",
+        "autoprefixer": "^10.4.18",
+        "tailwindcss": "^3.4.1"
+    }
 }

postcss.config

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

resources/css/tool.css

@@ -0,0 +1,4 @@
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/js/components/Button.vue

@@ -0,0 +1,24 @@
+<template>
+    <div
+        class="shadow relative h-10 px-4 rounded-lg bg-primary-500 text-white text-white flex items-center text-center cursor-pointer hover:opacity-75 transition"
+        :class="{
+            'bg-red-500': type === 'danger',
+            'bg-yellow-500': type === 'warning',
+            'bg-blue-500': type === 'info',
+            'bg-green-500': type === 'success',
+            'bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-300': type === 'gray',
+            'pointer-events-none': loading,
+        }"
+    >
+        <slot />
+        <div class="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75 rounded-lg" v-if="loading"></div>
+        <Loader class="absolute inset-0 m-auto text-white" v-if="loading" width="32" />
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    type: String,
+    loading: Boolean
+});
+</script>