Uncaught ReferenceError: Vue is not defined in .vue file

Question

Hi so I'm new to vue and I have installed vue-cli globally and wonder why I get this Error :

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)

my main.js looks like this:

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 I also post 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 error is because of this part in the Hello.vue file, when I delete this everything seems ok :

<script>

  var nav = new Vue({  
  el: '#loginButtons',
  methods: {
    open: function(which, e) {
      // Prevents clicking the link from doing anything
      e.preventDefault();
    }
  }
});
</script>

Answer 1

The <script> tags of single file components have to export the object you'd normally pass to the new Vue() constructor. You also don't need the el property because Vue will use the <template> as the root element.

<script>
export {
  methods: {
    open: function(which, e) {
      // Prevents clicking the link from doing anything
      e.preventDefault();
    }
  }
};
</script>