Support Laravel Nova 4.0

.gitignore

@@ -102,5 +102,7 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
+# IDE
+.idea
 
 # End of https://www.gitignore.io/api/git,laravel,macos,windows,linux

composer.json

@@ -7,7 +7,7 @@
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": "^7.3|^8.0"
     },
     "autoload": {
         "psr-4": {

dist/mix-manifest.json

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

nova.mix.js

@@ -0,0 +1,40 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+  name() {
+    return 'nova-extension'
+  }
+
+  register(name) {
+    this.name = name
+  }
+
+  webpackPlugins() {
+    return new webpack.ProvidePlugin({
+      _: 'lodash',
+      Errors: 'form-backend-validation',
+    })
+  }
+
+  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())

package.json

@@ -2,20 +2,23 @@
     "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",
+        "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^6.0.19",
-        "laravel-nova": "^1.0"
+        "@vue/compiler-sfc": "^3.2.22",
+        "form-backend-validation": "^2.3.3",
+        "laravel-mix": "^6.0.41",
+        "lodash": "^4.17.21",
+        "postcss": "^8.3.11",
+        "vue-loader": "^16.8.3"
     },
     "dependencies": {
-        "vue": "^2.5.0",
-        "vue-qr": "^1.5.2"
+        "vue-qr": "^4.0.6"
     }
 }

resources/js/components/DetailField.vue

@@ -14,8 +14,12 @@
 </template>
 
 <script>
+import VueQr from 'vue-qr/src/packages/vue-qr.vue'
 export default {
     props: ['field'],
+    components: {
+        VueQr
+    }
 }
 </script>
 

resources/js/components/IndexField.vue

@@ -12,11 +12,15 @@
 </template>
 
 <script>
+import VueQr from 'vue-qr/src/packages/vue-qr.vue'
 export default {
     props: [
     	'resourceName',
     	'field'
     ],
+    components: {
+        VueQr
+    }
 }
 </script>
 

resources/js/field.js

@@ -1,7 +1,7 @@
-import VueQr from 'vue-qr'
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
 
-Nova.booting((Vue, router) => {
-	Vue.component('vue-qr', VueQr);
-    Vue.component('index-qrcode', require('./components/IndexField'));
-    Vue.component('detail-qrcode', require('./components/DetailField'));
+Nova.booting((app, store) => {
+    app.component('index-qrcode-field', IndexField)
+    app.component('detail-qrcode-field', DetailField)
 })

src/Qrcode.php

@@ -2,7 +2,7 @@
 
 namespace Kristories\Qrcode;
 
-use Cache;
+use Illuminate\Support\Facades\Cache;
 use Laravel\Nova\Fields\Field;
 
 class Qrcode extends Field

webpack.mix.js

@@ -1,4 +1,8 @@
 let mix = require('laravel-mix')
 
+require('./nova.mix')
+
 mix.setPublicPath('dist')
-   .js('resources/js/field.js', 'js')
+    .js('resources/js/field.js', 'js')
+    .vue({ version: 3 })
+    .nova('kristories/nova-qrcode-field')