Configuring mix and instlling vue.js version 3

package.json

@@ -10,9 +10,25 @@
     "production": "mix --production"
   },
   "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.26",
     "axios": "^0.21",
-        "laravel-mix": "^6.0.6",
+    "laravel-mix": "^6.0.39",
     "lodash": "^4.17.19",
-        "postcss": "^8.1.14"
+    "postcss": "^8.1.14",
-    }
+    "vue-loader": "^16.8.3"
+  },
+  "name": "bgg_instant",
+  "description": "This is a repository for a website that is the Vue.js Interface for a BoardGameGeek website.",
+  "version": "1.0.0",
+  "main": "webpack.mix.js",
+  "directories": {
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.techtube.pl/krzysiej/bgg_instant.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }

public/css/app.css

@@ -0,0 +1 @@
+

public/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
+}

webpack.mix.js

@@ -1,17 +1,10 @@
 const mix = require('laravel-mix');
 
-/*
+mix.js('resources/js/app.js', 'public/js').vue({ version: 3})
- |--------------------------------------------------------------------------
- | 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', [
         //
     ]);
+
+if (mix.inProduction()) {
+    mix.version();
+}