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,5133 gold badges26 silver badges46 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

193k39 gold badges302 silver badges306 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

52.4k19 gold badges232 silver badges237 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

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

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,29413 silver badges17 bronze badges

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

4215 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,8941 gold badge47 silver badges47 bronze badges

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 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.7k12 gold badges99 silver badges104 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

Источник

vue

In this article, you are going to learn about how to fix Uncaught ReferenceError: Vue is not defined.

“Uncaught ReferenceError: Vue is not defined” is a common problem and if you are an absolute beginner you will face this problem once in your programming career. This error may occur for a few reasons. I will explain my experience while I was facing this problem and how I solved it and later on I will show a few other reasons for this problem and the solution for it. First see the error below:

I was facing this error while working with Vue and first I have no idea why this was happening. But later on, I have figured out that I was linking my files in the wrong order. I was linking my app.js file first and then the Vue CDN file and for this reason, I was getting that particular error. See the wrong code in the below example:


<script src="app.js"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js>"></script>

This is the wrong order. You have to link the CDN file first and your own created file and this is the convention of linking JavaScript files into HTML. When I follow the convention the error has vanished. See the correct code in the below example:

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js>"></script>
<script src="app.js"></script>

If you have faced this error, you should check the HTML file. In there if you link JavaScript file in the wrong order then write it in the right order and this will fix the problem.

Now, if you maintain the order and still have faced error then there will be a different cause for it. You may create a type error while importing Vue in your project. See the below code example :

import Vue from 'Vue'

If you write this code while importing Vue, you will simply get “Uncaught ReferenceError: Vue is not defined” this error. Because you have spelled in the correct form but both’s first latter in UpperCase. Which is creating the case-sensitive issue. See the correct code in the below example:

import Vue from 'vue'

This problem has occurred for some silly mistakes. You need to be careful and focus while working with Vue and by doing this you may avoid this kind of error.

This guide is part of the “Common Vue Errors” series. It’s focused entirely on providing quick and easy solutions for Vue-related problems.

Deven

Deven is an Entrepreneur, and Full-stack developer, Constantly learning and experiencing new things. He currently runs CodeSource.io and Dunebook.com

Источник

I was able to use gridjs with vue, but this was with the gridjs core library and not the wrapper for vue i.e gridjs-vue.

Here is how i used it

<script setup lang="ts">
	import { Grid } from "gridjs"
	import "gridjs/dist/theme/mermaid.css"

       // create a ref to hold the table in template
	const myTable = ref()
        // create a ref variable to hold new gridjs instance
	const gridjs = ref()

	onMounted(() => {
		gridjs.value = new Grid({
			columns: ["Name", "Email", "Phone Number"],
			data: [
				["John", "john@example.com", "(353) 01 222 3333"],
				["Mark", "mark@gmail.com", "(01) 22 888 4444"],
				["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
				["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
				["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
			],
			pagination: true,
			search: true,
			sort: true
		})

		gridjs.value.render(myTable.value)
		gridjs.value.on("cellClick", (...args: any) => console.log(args))
	})
</script>

<template>
	<h3 class="text-lg font-semibold">Gridjs Table</h3>
	<div id="id" ref="myTable"></div>
</template>

<style></style>

Источник

Sometimes, we want to fix the ‘Vue is not defined’ with JavaScript.

In this article, we’ll look at how to fix the ‘Vue is not defined’ with JavaScript.

How to fix the ‘Vue is not defined’ with JavaScript?

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.

For instance, we write:

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

<div id='app'>

</div>

to add the script above the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `<p>{{exampleContent}}</p>`,
  data: {
    'exampleContent': 'hello'
  },

});

in a script tag below the div to run the code

We set el to an element that’s added above the code.

And we also add a template and some data to render on the template.

Therefore, we should see ‘hello’ displayed.

Conclusion

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.

Web developer specializing in React, Vue, and front end development.

View Archive

Источник

Answer by Leilani Cummings

You missed the order, first goes: ,That caused the script loads asynchronously than the other js files.,just put text/javascript in your script tag which you use for cdn,I got this error but as undefined due to the way I included js files

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

Answer by Bishop Burgess

i use this statement. but same error «Uncaught TypeError: window.Vue.use is not a function»,

Sponsor

Sponsor ctf0/Laravel-Media-Manager

,can u reproduce using the demo repo ?,

The text was updated successfully, but these errors were encountered:

require('./bootstrap');

import  Vue from  'vue';


require('../assets/vendor/MediaManager/js/manager')

new Vue({
    el: '#app'
})

Answer by Gerald Stevens

import Vue from 'vue'

Answer by Maren Quinn

Example 1: Vue is not defined

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

Example 2: Uncaught ReferenceError: Vue is not defined

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
</script>

Answer by Sevyn Hogan

1- This error comes from not referring to the file js of Vue . , For the error you have, try to change the position% references js in this way , I get an error showing the index.html file in the browser.

1- This error comes from not referring to the file js of Vue .

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

Then you can use:

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

For the error you have, try to change the position% references js in this way

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="index.js"></script>

Answer by Emerson Lim

Ask
questionsUncaught ReferenceError: Vue is not defined
,npm run dev successfully compiled.
http://127.0.0.1:8000/media
show error in chrom developer console

app.js

require('./bootstrap');

import  Vue from  'vue';


require('../assets/vendor/MediaManager/js/manager')

new Vue({
    el: '#app'
})

npm run dev successfully compiled.
http://127.0.0.1:8000/media
show error in chrom developer console

Uncaught ReferenceError: Vue is not defined
    at Module../resources/assets/vendor/MediaManager/js/manager.js (app.js:5132)
    at __webpack_require__ (app.js:87950)
    at Module../resources/js/app.js (app.js:8901)
    at __webpack_require__ (app.js:87950)
    at checkDeferredModulesImpl (app.js:88114)
    at Function.__webpack_require__.x (app.js:88127)
    at app.js:88133
    at app.js:88134

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.2",
        "sass-loader": "^8.0.2",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "annyang": "^2.6.1",
        "buffer": "^6.0.3",
        "cropperjs": "^1.5.9",
        "dropzone": "^5.7.2",
        "fuse.js": "^6.4.6",
        "idb-keyval": "^3.2.0",
        "keycode": "^2.2.0",
        "lottie-web": "^5.7.5",
        "music-metadata-browser": "^2.1.9",
        "plyr": "^3.6.3",
        "process": "^0.11.10",
        "vue": "^2.6.12",
        "vue-awesome": "^2.3.8",
        "vue-clipboard2": "^0.3.1",
        "vue-focuspoint-component": "^2.0.1",
        "vue-image-compare2": "^1.0.0",
        "vue-infinite-loading": "^2.4.5",
        "vue-input-autowidth": "^1.0.10",
        "vue-ls": "^3.2.1",
        "vue-notif": "^1.1.10",
        "vue-tippy": "^2.1.3",
        "vue-touch": "^2.0.0-beta.4",
        "vue2-filters": "^0.11.1"
    }
}

composer.json

    "require": {
        "php": "^7.3|^8.0",
        "ctf0/media-manager": "^3.8",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.12",
        "laravel/tinker": "^2.5"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    }

Источник