Enable VUE Devtools when building an Tool for Nova

[michaelLoeffelmann]

Hi, i just started building a new tool for laravel nova. When i navigate to ./nova-components/MyComponent and run npm run watch, everything is getting compiled and is also running, but i can't see the vue devtools.

By adding Vue.config.devtools = true to MyComponent/resources/js/tool.js, the devtools are available. Is that the only way to enable devtools in webpack's watch-mode?

[noahlocke]

@LrMiLoef did you npm install and npm run dev in your /vendor/laravel/nova directory?

[noahlocke]

33

[techouse]

Here use this bash script if you're lazy like me 😇

#!/bin/sh
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm i
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish

[davidhemphill]

See solution above.

[miharbi]

Don't you think that this details have to be in the Nova documentation? This and several others stuffs still out of the documentation, now is kind of limbo all the potential that represent the customization of tools/cards/fields, I mean is too basic the actual documentation about it.

[tylernathanreed]

@LrMiLoef @miharbi

I've created a PR to add the script that @techouse wrote to the official documentation.

[akimlyubchenko]

May help https://github.com/vuejs/vue-devtools/issues/190#issuecomment-536451548

[jivanrij]

To get Nova in Vue dev mode, I've added this command to package.json:

"build-nova-dev-mode": "cd ./vendor/laravel/nova && mv webpack.mix.js.dist webpack.mix.js && npm i && npm run dev && rm -rf node_modules && cd - && php artisan nova:publish"

[crynobone]

Again, use npm ci and not npm install

[ekazda]

Here use this bash script if you're lazy like me 😇

#!/bin/sh
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm i
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish

npm run dev produced dozens of errors for me and broke my local environment. Use this code with caution!