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

asked Mar 24, 2016 at 21:12

Vladimir HrabanVladimir Hraban

3,4633 gold badges24 silver badges43 bronze badges

jsBin demo

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>

And type="JavaScript" should be type="text/javascript" (or rather nothing at all)

answered Mar 24, 2016 at 21:13

Roko C. BuljanRoko C. Buljan

190k37 gold badges300 silver badges304 bronze badges

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

const Vue = window.vue;

this may overwrite the original Vue reference.

answered Apr 2, 2018 at 9:54

T.ToduaT.Todua

51.2k19 gold badges223 silver badges225 bronze badges

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.

answered Aug 29, 2016 at 11:52

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

answered Jan 24, 2019 at 1:23

Adi_PithwaAdi_Pithwa

4115 silver badges7 bronze badges

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>

answered Jan 24, 2019 at 4:40

TeocciTeocci

6,1931 gold badge43 silver badges43 bronze badges

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>

answered Mar 20, 2018 at 3:57

Vince BanzonVince Banzon

1,26412 silver badges17 bronze badges

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.

answered May 29, 2021 at 17:53

pableirospableiros

14.1k11 gold badges94 silver badges101 bronze badges

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.

answered Feb 27, 2022 at 8:08

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.

answered Oct 5, 2022 at 12:53

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>

answered Apr 15, 2021 at 0:00

Источник

I am moving to a workflow using WebPack, which bundles code. While transitioning, I stumbled across this error:

Uncaught ReferenceError: Vue is not defined

at eval (external “Vue”?548a:1)

at Object.<anonymous> (pcp_mainbundle.js:172)

at __webpack_require__ (pcp_mainbundle.js:20)

at eval (pcpVue.js?6cb8:1)

at Object.<anonymous> (pcp_mainbundle.js:196)

at __webpack_require__ (pcp_mainbundle.js:20)

at eval (pcpMain.js?814e:1)

at Object.<anonymous> (pcp_mainbundle.js:189)

at __webpack_require__ (pcp_mainbundle.js:20)

at Object.<anonymous> (pcp_mainbundle.js:181)

10000000111a2334:47 Uncaught TypeError: window.pcpRun is not a function

at 10000000111a2334:47

I ensured that the vue package is installed from npm:

npm install vue –save

(these are two dashes before save).

Then I imported it like this:

import Vue from ‘vue’;

as I was used to with other imports, and indeed as I have seen it in a very good Udemy course by Maximilian Schwarzmüller.

The reason it does not work is probably because this Udemy course is set up by vue-cli, which sets up package.json.

I did this manually / chose a different path.

In effect I suspect that ‘vue’ is being redefined there, to vue/dist/vue.esm.js

I got the hint here: Webpack Intro into Vue.js

resolve: { alias: { // Ensure the right Vue build is used ‘vue$’: ‘vue/dist/vue.esm.js’ } }

Therefore I could possibly update my webpack.config.js.

I chose to simply put it into my import, as this Forum thread suggests:

import Vue from ‘vue/dist/vue.esm.js’;

This now works for me, the error Uncaught ReferenceError: Vue is not defined is gone.

Update 2.3.2020 (solution): externals

As mentioned, I was transitioning from manual script tag includes to a webpack process. Previously, therefore, I had included Vue using a script tag.

In order for this to work, and Vue not being loaded TWICE, I had applied the following workaround in webpack.config.js:

externals: {

vue: ‘Vue’

},

this lead to webpack NOT including vue –> whenever it was included, webpack assumed that I would provide it externally, which I did not do.

The solution is, therefore, to remove this externals section from webpack.config.js

Источник

Grepper Logo

Add Answer
|
View In TPC Matrix

Technical Problem Cluster First Answered On
July 10, 2020

Popularity
10/10

Helpfulness
8/10

Contributions From The Grepper Developer Community

Code Examples

‘Vue’ is not defined

Vue is not defined

TPC Matrix View Full Screen