Components not showing up in Vue DevTools
vue.js
Solution
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.
Problem
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> ```