Complete Nova-4 update

Author: ali-raza-saleem

composer.json

@@ -8,13 +8,19 @@
     "license": "MIT",
     "require": {
         "lab404/laravel-impersonate": "^1.7.3",
-        "laravel/nova": "^1.0|^2.0|^3.0"
+        "laravel/nova": "^4.0"
     },
     "autoload": {
         "psr-4": {
             "KABBOUCHI\\NovaImpersonate\\": "src/"
         }
     },
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
     "extra": {
         "laravel": {
             "providers": [

dist/js/field.js

@@ -0,0 +1,6 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	
+/******/ 	
+/******/ })()
+;

dist/js/tool.js

@@ -0,0 +1,3 @@
+{
+    "/js/field.js": "/js/field.js"
+}

dist/mix-manifest.json

@@ -0,0 +1,33 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+  name() {
+    return 'nova-extension'
+  }
+
+  register(name) {
+    this.name = name
+  }
+
+  webpackConfig(webpackConfig) {
+    webpackConfig.externals = {
+      vue: 'Vue',
+    }
+
+    webpackConfig.resolve.alias = {
+      ...(webpackConfig.resolve.alias || {}),
+      'laravel-nova': path.join(
+        __dirname,
+        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+      ),
+    }
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    }
+  }
+}
+
+mix.extend('nova', new NovaExtension())

nova.mix.js

@@ -2,18 +2,28 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "mix --production"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0"
+        "@vue/compiler-sfc": "^3.2.22",
+        "cross-env": "^5.2.1",
+        "laravel-mix": "^6.0.41",
+        "postcss": "^8.3.11",
+        "resolve-url-loader": "^2.3.2",
+        "sass": "^1.51.0",
+        "sass-loader": "^12.6.0",
+        "vue-loader": "^16.8.3"
     },
     "dependencies": {
-        "vue": "^2.5.0"
+        "@inertiajs/inertia": "^0.11.0",
+        "@vue/compat": "^3.2.33",
+        "form-backend-validation": "^2.4.0",
+        "vue": "^3.0",
+        "vuex": "^4.0.2"
     }
 }

package.json

@@ -1,11 +1,11 @@
 Nova.booting((Vue, router) => {
-  Vue.config.devtools = true;
+  //Vue.config.devtools = true;
   Vue.component(
-    "index-impersonate-field",
-    require("./components/Index/ImpersonateField")
+    "IndexImpersonateField",
+    require("./components/Index/ImpersonateField").default
   );
   Vue.component(
-    "detail-impersonate-field",
-    require("./components/Detail/ImpersonateField")
+    "DetailImpersonateField",
+    require("./components/Detail/ImpersonateField").default
   );
 });

resources/js/field.js

@@ -0,0 +1,19 @@
+module.exports = {
+    chainWebpack: config => {
+      config.resolve.alias.set('vue', '@vue/compat')
+  
+      config.module
+        .rule('vue')
+        .use('vue-loader')
+        .tap(options => {
+          return {
+            ...options,
+            compilerOptions: {
+              compatConfig: {
+                MODE: 2
+              }
+            }
+          }
+        })
+      }
+  }

vue.config.js

@@ -1,10 +1,27 @@
-let mix = require('laravel-mix');
+let mix = require("laravel-mix");
+let path = require("path");
+require("./nova.mix");
 
-mix
-    .js('resources/js/field.js', 'dist/js')
-    .sass('resources/sass/field.scss', 'dist/css')
+mix.setPublicPath("dist")
+    .js("resources/js/field.js", "js")
+    .vue({
+        version: 3,
+        options: {
+            compilerOptions: {
+                isCustomElement: (tag) => ["portal"].includes(tag),
+            },
+        },
+    })
+    .nova("kabbouchi/nova-impersonate")
     .webpackConfig({
         resolve: {
-            symlinks: false
-        }
+            symlinks: false,
+        },
     });
+
+mix.alias({
+    "laravel-nova": path.join(
+        __dirname,
+        "vendor/laravel/nova/resources/js/mixins/packages.js"
+    ),
+});