Enable VueJS DevTools for Laravel Nova

Question

I want to inspect the underlying behavior of Laravel Nova(or custom field) and i am trying to enable the devtools. On the top right corner I can see the green icon of VueJS but when i go to the console there is no tab for VueJS

How can i enable it and inspect all the components?

Cheers

If you click the icon for Vue Devtools, does it give you any information? You might be compiling your Vue in production mode and not development mode. Also, I have found that I randomly need to hide and then show the console again to get the Vue tab to show up for me (in Chrome). — Thursday42
– Thursday42, Commented Nov 28, 2018 at 11:47
Thanks for the tips! What actually worked was restarting Chrome. Now i am diving into trying to customize nova and see what is the behavior. — linkmarine
– linkmarine, Commented Nov 28, 2018 at 12:47

Shamsheer · Accepted Answer · 2019-12-03 10:10:16Z

9

Try these Steps:

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

edited Dec 3, 2019 at 10:10

answered Dec 3, 2019 at 9:45

Shamsheer

7444 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abkrim Over a year ago

nova.laravel.com/docs/3.0/customization/…

Shamsheer Over a year ago

Read the documentation if you can something!

Sesha · Accepted Answer · 2018-12-12 17:54:35Z

6

By adding Vue.config.devtools = true to MyComponent/resources/js/filed.js, the devtools are available.

Close the console and open again, Make sure your in dev or watch mode.

edited Dec 12, 2018 at 17:54

answered Dec 12, 2018 at 17:46

Sesha

3282 silver badges6 bronze badges

Collectives™ on Stack Overflow

Enable VueJS DevTools for Laravel Nova

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related