Not showing in Vue dev tools

[OwenMelbz]

I think this could potentially be closed easily if it's just me.

However currently when developing new nova components, and running npm run watch from within the component folder the Vue developer tools fails to detect Vue.

Is anybody else able to confirm if this is the same for them?

[alexbowers]

The reason for this is because you are not using the assets from within Nova itself, but a published version of the assets.

There is a php artisan vendor:publish for Nova, run that and see if that helps?

[vyuldashev]

Go to nova folder and run

npm install
npm run dev

Then, run nova:publish in your application.

[OwenMelbz]

@vyuldashev seems to throw an error running npm run dev

➜ npm run dev

> @ dev /Users/owen/Sites/nova-playground/nova
> npm run development


> @ development /Users/owen/Sites/nova-playground/nova
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

internal/modules/cjs/loader.js:596
    throw err;
    ^

Error: Cannot find module '/Users/owen/Sites/nova-playground/nova/webpack.mix'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/owen/Sites/nova-playground/nova/node_modules/laravel-mix/setup/webpack.config.js:9:1)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/owen/.npm/_logs/2018-08-23T17_15_21_169Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/owen/.npm/_logs/2018-08-23T17_15_21_462Z-debug.log

looks like maybe it cannot find the webpack mix file?

[bbrala]

Move/copy webpack.mix.js.dist to webpack.mix and it will work.

[vyuldashev]

@bbrala yep, I forgot about this

[OwenMelbz]

So to summarise for anybody else

cd ./nova (or ./vendor/laravel/nova)
npm i
mv webpack.mix.js.dist webpack.mix.js
npm run dev
cd ../  (or ../../../)
php artisan nova:publish

This should put it into dev mode so you can use your dev tools! :)

Thanks for everybody's input!

[simeonstoyanov1]

@OwenMelbz after php artisan nova:publish

When I open the Dashboard of my Nova app there are no errors but when I open a Resource I get the fallowing errors...

found in
---> <ResourceIndex> at resources/js/views/Index.vue
       <Root>
[Vue warn]: Property or method "currentFilters" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <ResourceIndex> at resources/js/views/Index.vue
       <Root>

[Vue warn]: Property or method "currentFilters" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ResourceIndex> at resources/js/views/Index.vue
       <Root>

app.js?id=b266027752dcefae6850:10524 Uncaught (in promise) TypeError: _this6.initializeFilterValuesFromQueryString is not a function

[DianaR19]

The same thing happens to me as @alg0rithmm

[aramirez92]

@OwenMelbz after php artisan nova:publish

When I open the Dashboard of my Nova app there are no errors but when I open a Resource I get the fallowing errors...

found in
---> <ResourceIndex> at resources/js/views/Index.vue
       <Root>
[Vue warn]: Property or method "currentFilters" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <ResourceIndex> at resources/js/views/Index.vue
       <Root>

[Vue warn]: Property or method "currentFilters" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ResourceIndex> at resources/js/views/Index.vue
       <Root>

app.js?id=b266027752dcefae6850:10524 Uncaught (in promise) TypeError: _this6.initializeFilterValuesFromQueryString is not a function

Have you ever solved the issue?

[OwenMelbz]

Nope sorry, it worked from when I originally posted.

However all the recent updates that have been released might not work.

Somebody might need to post new instructions, we’re not using nova for anything anymore so haven’t needed to revisit

[Krato]

@OwenMelbz See here: https://gist.github.com/Krato/b3f5891b917dadeb696b4aa36dda06d4

[Dixens]

Late to the party but for me adding Vue.config.devtools = true to Nova.booting((Vue, router, store) in nova-components/My-Component/resources/js/tool.js (and disabling it conditionally with a process.env.NODE_ENV === 'production' check) did the trick.

[chrillep]

Late to the party but for me adding Vue.config.devtools = true to Nova.booting((Vue, router, store) in nova-components/My-Component/resources/js/tool.js (and disabling it conditionally with a process.env.NODE_ENV === 'production' check) did the trick.

Thank u!
This should be default setting when generating a tool @davidhemphill
i would do a pr for the stub but i can't :)

[ramirespoa]

check you environment config requirements for version of laravel nova you are using:

https://nova.laravel.com/docs/3.0/installation.html#requirements