Components not showing up in Vue DevTools

I had the same issue and here's what fixed it for me:

Ensure Allow access to file URLs in the chrome extension settings (chrome://extensions) is enabled. Restart Chrome.

Open the Vue DevTools extension and click the Refresh button on the top right after opening a Vue component on the page.

I hope this helps someone.

I see that you are using vue-cli and I assume it is running in dev mode (npm run dev).

Obviously it will not work after you build the production app using npm run build and serve from the dist folder.

Assuming you have taken care of the above, did you install the Vue.js devtools recently in Chrome? If so, your browser might need a restart. I think I had to do it when I installed Vue devtools for the first time.

After all that, you should start seeing your components in "Vue" tab of developer tools. You might see Anonymous component for some components, but all you need is name: app which is something you are already doing in your App.vue component.

I had the same issue! Not much to find scratching around for help, but this worked for me:

change the webpack.config.js setting for NODE_ENV: '"production"' to NODE_ENV: '"development"'

Seems almost too obvious but the rendered Vue app(s) then appeared like magic showing all the object goodness!