Hey there, I'm just starting out with Vue and have globally installed vue-cli. However, I encountered an error that says:
Uncaught ReferenceError: Vue is not defined
at eval (Hello.vue?13ca:73)
at Object.<anonymous> (main.js:1061)
at __webpack_require__ (main.js:679)
at fn (main.js:89)
at eval (Hello.vue?549c:1)
at Object.<anonymous> (main.js:1049)
at __webpack_require__ (main.js:679)
at fn (main.js:89)
at eval (index.js?fc04:1)
at Object.<anonymous> (main.js:1035)
This is how my main.js file looks like:
import 'bootstrap';
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App,
},
});
Since index.js is also referenced, here's the code for it:
import Vue from 'vue';
import Router from 'vue-router';
import Hello from '../components/Hello';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
},
],
});
The root of the error seems to be this part in the Hello.vue file. When removed, everything works fine:
<script>
var nav = new Vue({
el: '#loginButtons',
methods: {
open: function(which, e) {
// Prevents clicking the link from doing anything
e.preventDefault();
}
}
});
</script>