CODEWITHSUNDEEP
javascripthtmlvue.js
Vladimir Hraban
Vladimir Hraban

Reputation: 3581

Vue is not defined

I am trying to build a demo app with Vue.js. What I am getting is an odd error that Vue is not defined.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue JS Intro</title>
</head>
<body>
    <div id="demo">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    <script type="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>
</html>

What did I miss here? This is not a CDN issue as I also downloaded the library from the official website, used it and got the same result

index.html:15 Uncaught ReferenceError: Vue is not defined

Upvotes: 36

Views: 231350

Answers (10)

Abdelkhalek Haddany
Abdelkhalek Haddany

Reputation: 453

as extra information, if you use VueJs version ^3.2.0 and up, the way you should write Vueis is different witch you have the app.js has this code:

import "./bootstrap";
import { createApp } from "vue";

 const app = createApp({});

So you have to use app object instead of Vue as you see bellow

import VueCountdownTimer from "vuejs-countdown-timer";
app.use(VueCountdownTimer);

I shared this information because this error counted me.

Upvotes: 3

nakli_batman
nakli_batman

Reputation: 741

For those who are facing this error in src/main.js file in vue,

just add :-

var Vue = require('vue')

Then, It will work fine.

Upvotes: 0

pableiros
pableiros

Reputation: 16032

I had the same problem and for a strange reason, the js that contains the Vue, has a defer inside the script definition:

<script src="js/app.js" defer></script>

That caused the script loads asynchronously than the other js files.

After I remove the defer tag, the problem was solved.

Upvotes: 0

san_developer
san_developer

Reputation: 11

just put text/javascript in your script tag which you use for cdn

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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

jsBin demo

  1. You missed the order, first goes: 

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

and then: 

<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>
  1. And type="JavaScript" should be type="text/javascript" (or rather nothing at all)

Upvotes: 51

Teocci
Teocci

Reputation: 8885

I found two main problems with that implementation. First, when you import the vue.js script you use type="JavaScript" as content-type which is wrong. You should remove this type parameter because by default script tags have text/javascript as default content-type. Or, just replace the type parameter with the correct content-type which is type="text/javascript".

The second problem is that your script is embedded in the same HTML file means that it may be triggered first and probably the vue.js file was not loaded yet. You can fix this using a jQuery snippet $(function(){ /* ... */ }); or adding a javascript function as shown in this example: 

// Verifies if the document is ready
function ready(f) {
  /in/.test(document.readyState) ? setTimeout('ready(' + f + ')', 9) : f();
}

ready(function() {
  var demo = new Vue({
    el: '#demo',
    data: {
      message: 'Hello Vue.js!'
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
</div>

Upvotes: 1

Adi_Pithwa
Adi_Pithwa

Reputation: 421

I got this error but as undefined due to the way I included js files

Initailly i had 

<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>
<script src="~/lib/vue/vue_v2.5.16.js"></script>

in the end of my .cshtml page GOT Error Vue not Defined but later I changed it to

<script src="~/lib/vue/vue_v2.5.16.js"></script> 
<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>

and magically it worked. So i assume that vue js needs to be loaded on top of the .vue

Upvotes: 1

T.Todua
T.Todua

Reputation: 56371

Sometimes the problem may be if you import that like this:

const Vue = window.vue;

this may overwrite the original Vue reference.

Upvotes: 6

Vince Banzon
Vince Banzon

Reputation: 1489

I needed to add the script below to index.html inside the HEAD tag. 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

But in your case, since you don't have index.html, just add it to your HEAD tag instead.

So it's like:

<!doctype html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
...
</body>
</html>

Upvotes: 1

Sparkmorry
Sparkmorry

Reputation: 119

try to fix type="JavaScript" to type="text/javascript" in you vue.js srcipt tag, or just remove it. Modern browsers will take script tag as javascript as default.

Upvotes: 3

Related Questions