Components not showing up in Vue DevTools

Question

Has anyone experienced this problem? I'm using Vue Devtools but can't inspect any components on a count of none are showing up. No Root component or anything. Pretty much just a blank DevTools. I'm new to Vue so I'm sure I'm missing something obvious. I'm using the webpack cli template and haven't implemented any Vue Router stuff yet. Nothing comes up when searching for components either. I'm assuming it's something in these 3 files?

main.js

import Vue from 'vue'
import App from './App'
var db = firebase.database();

var vm = new Vue({
  el: '#app',
  created: function() {
    // Import firebase data 
    var quizzesRef = db.ref('quizzes');
    quizzesRef.on('value', function(snapshot) {
      console.log(snapshot.val());
      vm.quizzes = snapshot.val();
    });
  },
  data: function() {
    return {
        authenticated: false,
        quizzes: {},
        resources: []
    }
  },
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info></resource-info>
  </div>
</template>

<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

export default {
  name: 'app',
  components: {
    Navbar,
    ResourceInfo
  }
}
</script>

<style>
</style>

Index.html (Omitted header)

<body>
    <div id="app" class="container-fluid"></div>
    <!-- built files will be auto injected -->
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        storageBucket: "",
        messagingSenderId: ""
      };
      firebase.initializeApp(config);
    </script>
</body>

You're serving the files from an http server, correct? The Vue DevTools won't work with file-based serving. — PatrickSteele
Which browser are you using? I get exactly that behaviour in Vivaldi, but it works in plain Chrome... I'm posting that to both the vuedevtools and Vivaldi groups... — dsl101

Jamie Smith Jamie Smith · Accepted Answer · 2018-12-06T16:24:50

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.

Components not showing up in Vue DevTools

3 Answers