Error : Uncaught ReferenceError: Vue is not defined

Question

I'm trying to build this simple app, but I always get this error

Uncaught ReferenceError: Vue is not defined.

<template>
  <v-app>

  <div id="example-1">
  <v-btn v-on:click="counter += 1">Add 1</v-btn>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

  </v-app>
</template>

<script>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }

})

</script>

The error says to you what is wrong. You didn't define Vue anywhere. — Daniyal Lukmanov
– Daniyal Lukmanov, Commented Oct 4, 2019 at 10:11
@evolutionxbox yes, i imported vue in the main.js file : import Vue from 'vue' — Simone Di Nallo
– Simone Di Nallo, Commented Oct 4, 2019 at 10:24
You're missing the important part - how and where you are importing Vue, this isn't a viable question unless you provide that — nanobar
– nanobar, Commented Oct 4, 2019 at 10:37

Dale K · Accepted Answer · 2019-10-04 11:24:09Z

2

Replace template tag with the div and add cdn at least before </body> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div>
  <v-app>
    <div id="example-1">
      <button v-on:click="counter += 1">Add 1</button>
       <p>The button above has been clicked {{ counter }} times.</p>
    </div>
  </v-app>
</div>

<script>

var example = new Vue({
    el: '#example-1',
    data: {
      counter: 0
    }
  })

</script>

I replaced v-btn with the button just to show that it works.

edited Oct 4, 2019 at 11:24

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Oct 4, 2019 at 10:25

Daniyal Lukmanov

1,22912 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sozary · Accepted Answer · 2019-10-04 10:28:19Z

0

This syntax with "template" and "v-btn" means that you want to use a vue file. If it's the case, you have to use something to interpret those files(vue-cli).

answered Oct 4, 2019 at 10:28

Sozary

851 silver badge7 bronze badges

Collectives™ on Stack Overflow

Error : Uncaught ReferenceError: Vue is not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related