Debugging Vue In chrome does not showing the original vue component

Question

I am new in Vue Js. I am developing a project in Laravel 7.* with Vue js.
My Vue Project Structure

app.js File contains:

require('./bootstrap');

window.Vue = require('vue');
Vue.config.debug = true;
Vue.config.devtools = true;
Vue.config.productionTip = false;
Vue.config.silent = false;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';
Vue.use(VueAxios, axios);

import HomeComponent from './components/home/HomeComponent.vue';
import CreateComponent from './components/post/CreateComponent.vue';
import IndexComponent from './components/post/IndexComponent.vue';
import EditComponent from './components/post/EditComponent.vue';
import Notification from './components/Notification.vue';

const routes = [
    {
        name: 'home',
        path: '/',
        component: HomeComponent
    },
    {
        name: 'create',
        path: '/create',
        component: CreateComponent
    },
    {
        name: 'posts',
        path: '/posts',
        component: IndexComponent
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditComponent
    },
    {
        name: 'notify',
        path: '/notifications',
        component: Notification
    }
];

const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

App.Vue File contains:

<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 p-0">
                <nav class="navbar navbar-expand-sm bg-info navbar-dark">
                    <div class="container">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <router-link to="/" class="nav-link">Home</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/create" class="nav-link">Create Post</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/posts" class="nav-link">Posts</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/notifications" class="nav-link">Notifications</router-link>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <br/>
                    <!--                <transition name="fade">-->
                    <router-view></router-view>
                    <!--                </transition>-->
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-active {
        opacity: 0
    }
</style>

<script type="text/babel">

    export default {}
</script>

Webpack.mix file contains

const mix = require('laravel-mix');

let productionSourceMaps = false;
if ( ! mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'eval-source-map'
    });
}

mix.sourceMaps(false, type = 'eval-source-map')
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

bootstrap.js file contains:

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.baseURL = 'http://dshop.test';
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');

HomeComponent.vue contains

<template>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-default">
                <div class="card-header">Home Component</div>

                <div class="card-body">
                    I'm the Home Component component.
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Now when I want to debug in Chrome the components don't showing the original components

Please help me! What configurations I have missed I can't find it.

Regards

Answer 1

You cant see Vue component at this way. Install Vue dev tool plugin following this link: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Then you will be able to see this in your chrome browser: https://www.dropbox.com/s/fo0jpb4y1w0cv8k/Screenshot%202020-04-17%2010.26.52.png?dl=0

Please note that in order to be able to see Vue dev tab in your chrome dev tools, you must have assets built as dev. npm run dev or yarn watch etc.. If you run npm run production or yarn production, you will not have Vue tab since is not in development mode.

Answer 2

maybe try this extension when trying to debug Vue as it will show component structures, props and much more: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd