Menu
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>
989
The Vue devtools don't show upCheck if you have the extension installed. If you are on a live website, there is a good chance it's using a production build of Vue. Set the __VUE_PROD_DEVTOOLS__ environment variable for Vue 3 when using a bundler like Webpack (more info).
Open the file in your code editor. Create the component's template section by adding <template></template> to the top of the file. Create a <script></script> section below your template section. Inside the <script> tags, add a default exported object export default {} , which is your component object.
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.
153
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
