Vue 3 support

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,15 @@
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */

dist/mix-manifest.json

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

mix-manifest.json

@@ -1,4 +1 @@
-{
-    "/dist/js/field.js": "/dist/js/field.js",
-    "/dist/css/field.css": "/dist/css/field.css"
-}
+{}

package.json

@@ -2,23 +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"
     },
     "devDependencies": {
         "cross-env": "^5.1",
-        "laravel-mix": "^4.0.7",
-        "resolve-url-loader": "^2.3.1",
+        "laravel-mix": "^6.0",
+        "resolve-url-loader": "^4.0.0",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
-        "vue-template-compiler": "^2.6.10"
+        "vue-loader": "^16.2.0"
     },
     "dependencies": {
         "laravel-nova": "^1.2.0",
-        "vue": "^2.5.0"
+        "vue": "^3.0"
     }
 }

resources/js/components/FormField.vue

@@ -1,5 +1,5 @@
 <template>
-    <field-wrapper>
+    <FieldWrapper>
         <div class="comodolab-help-field-container flex w-full">
             <div :class="labelClasses" v-if="field.sideLabel">
                 <label class="inline-block text-80 leading-tight">
@@ -29,11 +29,11 @@
                 </div>
             </div>
         </div>
-    </field-wrapper>
+    </FieldWrapper>
 </template>
 
 <script>
-    import {FormField} from 'laravel-nova'
+    import { FormField } from 'laravel-nova'
 
     export default {
         mixins: [FormField],

resources/js/field.js

@@ -1,5 +1,9 @@
+import IndexField from "./components/IndexField";
+import DetailField from "./components/DetailField";
+import FormField from "./components/FormField";
+
 Nova.booting((Vue, router) => {
-    Vue.component('index-help', require('./components/IndexField').default);
-    Vue.component('detail-help', require('./components/DetailField').default);
-    Vue.component('form-help', require('./components/FormField').default);
+    Vue.component('index-help', IndexField);
+    Vue.component('detail-help', DetailField);
+    Vue.component('form-help', FormField);
 })

webpack.mix.js

@@ -1,5 +1,12 @@
 let mix = require('laravel-mix')
 
-mix.setPublicPath('./')
-   .js('resources/js/field.js', 'dist/js')
-   .sass('resources/sass/field.scss', 'dist/css')
+mix
+    .setPublicPath("dist")
+    .js('resources/js/field.js', 'js')
+    .sass('resources/sass/field.scss', 'css')
+    .vue({ version: 3 })
+    .webpackConfig({
+        externals: {
+            vue: 'Vue',
+        },
+    })