diff --git a/.env.example b/.env.example
index 9bb1bd7c48a..1a3340437b5 100644
--- a/.env.example
+++ b/.env.example
@@ -48,5 +48,5 @@ PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_APP_CLUSTER=mt1
 
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
diff --git a/.gitignore b/.gitignore
index bc67a663bb4..87ead15d8f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 /node_modules
+/public/build
 /public/hot
 /public/storage
 /storage/*.key
diff --git a/.styleci.yml b/.styleci.yml
index 79f63b44fdc..4705a373849 100644
--- a/.styleci.yml
+++ b/.styleci.yml
@@ -8,5 +8,5 @@ php:
 js:
   finder:
     not-name:
-      - webpack.mix.js
+      - vite.config.js
 css: true
diff --git a/package.json b/package.json
index 7a9aecdf303..724e911ff44 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,14 @@
 {
     "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": "vite build"
     },
     "devDependencies": {
         "axios": "^0.25",
-        "laravel-mix": "^6.0.6",
+        "laravel-vite-plugin": "^0.2.1",
         "lodash": "^4.17.19",
-        "postcss": "^8.1.14"
+        "postcss": "^8.1.14",
+        "vite": "^2.9.11"
     }
 }
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index bbcdba42b35..a954d249086 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -25,7 +25,7 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
 //     forceTLS: true
 // });
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000000..dd941926f31
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+    plugins: [
+        laravel([
+            'resources/css/app.css',
+            'resources/js/app.js',
+        ]),
+    ],
+});
diff --git a/webpack.mix.js b/webpack.mix.js
deleted file mode 100644
index 2a22dc1206a..00000000000
--- a/webpack.mix.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const mix = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel applications. By default, we are compiling the CSS
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.js('resources/js/app.js', 'public/js')
-    .postCss('resources/css/app.css', 'public/css', [
-        //
-    ]);