Search code examples
laravelvue.jsdevtools

Laravel + vue.js : vue devtools only showing <Root> compenent

I have a little problem with vue.js recently and wondering if anyone could help please?

I have a new install of laravel 7.3.3 and vue.js 2.6.12 can not get the vue devtools extension to show me my components, variables etc.

This is what the devtools look like :

enter image description here

Here is the repo : https://github.com/yex777/pa-hub

Thanks for any help!

Solution

  • I had a similar issue with my repo. I don't actually register components globally, I instead make components and just register them on the page they are needed. My issue with this was caused because I was binding Vue to the page twice. Once in app.js and then again in my custom JS file for my component. As such, I think the dev tools was picking up the wrong Vue instance.

    I resolved my issue by removing the references to vue in my app.js file and then only binding elements using my new JS file. So my app.js file only contains

    require('./bootstrap');

    and then I have a separate file which I include on the relevant page which looks a little like this:

    import Vue from 'vue';
import Axios from 'axios';
import StudentManagement from './StudentManagement.vue';


window.axios = Axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

new Vue({ // eslint-disable-line no-undef, no-new
    el: '#student-management',
    render: h => h(StudentManagement),
});

    I suspect you may have a similar issue where the Vue instance is being setup twice.

    The easiest way to check is in the console, it will output a message saying that Vue is in development mode:

    dev tools

    As you can see, it's got a 2 next to the message, saying the message has been output twice. If this is the case, you just need to make sure you only include or set up your Vue instance once and the dev tools should pickup your components.