CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Simone Di Nallo
Simone Di Nallo

Reputation: 35

Error : Uncaught ReferenceError: Vue is not defined

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>

Upvotes: 1

Views: 3526

Answers (2)

Daniyal Lukmanov
Daniyal Lukmanov

Reputation: 1229

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.

Upvotes: 2

Sozary
Sozary

Reputation: 85

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).

Upvotes: 0

Related Questions