Laravel nova: How to override nova components

Question

Let's say, I want to replace the nova/resources/js/components/Form/FieldWrapper.vue with a custom one (add some CSS classes or add additional HTML), how to do this, without making changes to the /nova directory (to be able to update nova)?

The usecase for changing the edit view is for example:

• to add a "*" sign to a field, if its a mandatory field
• to change the "one field per row" style to a "two fields per row" style to use the huge wasted empty space and reduce the height of the form to reduce scrolling

Answer 1

inside nova folder change file :

webpack.mix.js.dist to webpack.mix.js

enter to nova folder and do:

npm install
npm run watch

and then go to folder nova\resources\js

go change vue component do you need

after then run (on your root project):

php artisan nova:publish