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
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)
Sometimes the problem may be if you import that like this:
const Vue = window.vue;
this may overwrite the original Vue reference.
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.
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>
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
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>
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.
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>
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.
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.
Related
I am so confusing about Vue's structure. First time, I learnt from a video by freeCodeCamp channel on YouTube.
After that, I found a book to learn
Getting to Know Vue.js Learn to Build Single Page Applications in Vue from Scratch
by Brett Nelson
The problem I faced was that when I follow the tutorial on YouTube, I used unpkg to run and it worked but with the book, they use
jsdelivr and when I used the same code with the code I used for unpkg, it didn’t work.
I have no idea about what I should learn because 2 tutorials from 2 sources I used were totally different.
Code I use for unpkg
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script>
let app=Vue.createApp({
data: function(){
return {
propertyName: 'Hello from Getting to Know Vue.js!'
}
}
})
app.mount('#app')
</script>
</body>
</html>
Code I use for jsdelivr (it works but doesn't work with the code in <script> tag above):
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
propertyName: 'Hello from Getting to Know Vue.js!'
}
});
</script>
</body>
</html>
Both codes are doing the same thing at the end, it's a subtle change in syntax. Sorry if it's confusing but understand that it's actually the same thing at the end.
The jsdelivr CDN is also using Vue2, while the unpkg is using Vue3 hence the small differences in plugin them to the DOM.
I recommend the usage of SFC style anyway tho (with a build tool like Vite): https://vuejs.org/api/sfc-spec.html#sfc-syntax-specification!
I am trying to import a module to my JavaScript code, which should later run on a WordPress server.
Currently i wanted to test it on localhost, but it gives me an error like:
The Skript from "http://127.0.0.1:46513/js/main.js" was loaded, despite it's MIME-Typ ("text/html") is not valid in JavaScript
Which is strange because it is js code and not html.
My main.js looks like this:
const { Origin, Horoscope } = require('./circular-natal-horoscope-js/dist/index.js');
And index.html like this:
<html>
<head> Horoscope </head>
<body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
I also tried different import syntax:
import { Origin, Horoscope } from '/circular-natal-horoscope-js/dist/index.js';
Which gives me the same error.
The only thing which is working is, when i type in node main.js into console, then the Origin and Horoscope functions are beeing loaded.
How can i use this to be working in my js-files without using the console?
Trying to migrate from jQuery web page to VueJs.
I thought wholly rebuild web page to vue-cli based template code might be difficult.
So 1st Step to migrate jQuery to vuejs without webpack. It means all page keep individual pages not SPA. So every single page include vue.js with <script> tag.
I stuck with jQuery slider.
Original code seems like $( ".slider" ).slider({....
Converting jQuery's slider to vue-slider-component was stuck, cause I don't know how can make static js from vue components.
My expectation is at below.
<head>
<script src="https://unpkg.com/vue"></script>
<script src="vue-slide.js"></script> <-- like this
</head>
<body>
<vue-slider v-ref:slider :value.sync="value"></vue-slider>
...
<script>
new Vue({ ...
</script>
</body>
Is stupid idea?
What is the best practice for converting jQuery to vuejs without heavy cost?
Until now, I often use inline vuejs. I think that is the good option to migration from legacy code to full SPA.
For example, below code is what I used for migration.
<head>
<script src="lib/vue.min.js"></script>
<script src="lib/bootstrap-vue.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slider').nivoSlider({
pauseTime: 3000
});
});
</script>
</head>
<body>
<div id="app">
<div v-cloak>
<div id="header">
<div class="nav" style="display: block;">
...
</div>
<script language="javascript" type="text/javascript">
Vue.component('room', {
...
})
const app = new Vue({
el: "#app",
component: [
'room'
],
...
</script>
</body>
</html>
...
I cannot seem to figure out what I shall do to correct the issue:
I always got no display on the browser, where I expect to see "Hello React".
Here is the HelloWorld code:
ReactDOM.render(Hello, React!,document.getElementById('root'));
You can use following code base to understand basic of React JS (have been used latest version react-15.0.0) -
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
<!-- use this as script file "fb.me/react-15.0.0.js"
"fb.me/react-dom-15.0.0.js"
cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js" -->
</head>
<body>
<div id="greeting-div"></div>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return ( <div>{this.props.children} </div>)
}
});
ReactDOM.render(
<div>
<Greeting>hello Aby</Greeting>
<h1>HELLO</h1>
</div>,
document.getElementById('greeting-div') );
</script>
</body>
</html>
check your example here, https://codesandbox.io/s/ElRmqWK5Y
what I will suggest download the react package and run your code there in the beginning, and what I think about your code is you should add react library first than react-dom.
there is a missing < body > in your code , try to add it and tell us if it works
So basically the problem is that you don't transpile your jsx. For your simple example what you can do if you don't want to configure transpiling 'explicitly' with some bundler you can add Babel library and change
<script type="text/jsx">
to
<script type="text/babel">
Let's have a look here, but please remember that jsfiddle uses babel behind (quite sure):
https://jsfiddle.net/69z2wepo/83023/
Also let me paste example from babel docs. Especially take a look for added babel lib + script type.
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
I'm trying to create an Hello world app like in the get started documentation on the Vue.js site. Everything looks fine but the text isn't displayed on the page, just the html code.
Vue version : 1.0.26
Here's the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue!</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="vue.js"></script>
<script src="app.js"></scrip>
</body>
</html>
And here's the app.js code :
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
Of course, vue.js is the vue.js source file and both js files are loaded.
No errors in the console
What am I doing wrong ?
<script src="app.js"></scrip>
You have a typo. The t is missing from your end tag. Consequently the app.js script will never load.
Methods that might have detected this:
Look at the Developer Tools Network tab in your browser. You won't see the request for app.js
Validate your HTML
Just so you know - the data prop of a Vue component should be a function that returns an Object
data () { return { message: 'Hello vue....' } }
see: Vue JS Docs