Vue.js hello world won't render - javascript

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

Related

Why does code's structure is so different with each CDN in VueJS?

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!

Does Vue not show in file #1 because of an unknown hidden character?

I expected both of these files to show 'Test!' and have a Vue component. Both of these files reference the exact same Vue source code. Both of these have what appear to be exactly the same Javascript. Both of these call the message key with the exact same mustache syntax.
Instead, one file shows me a {{ message }} while the other works as intended, showing Test!. Both files indicate that Vue is 'Ready. Detected Vue 2.5.21'. Here's the result of the 'broken' file. Why is there a difference?
I've tried (on the broken file):
Changing the CDN link where I get my Vue from (didn't work).
Changing the variable name that the Vue is stored in from 'root' to 'app' to 'rooty' (didn't work).
Using single parentheses vs. double for the ID and element reference (didn't work).
Changing the location of where the Vue source code is called, putting it at the top of the body and then beneath the content, as is default (nope).
(Vue staying alive despite deleting it). Deleting the Vue reference entirely to see if I was seeing a cached page (surprise! Even with the Vue reference gone, it still said 'Ready! Detected Vue 2.5.21').
Hard refreshing on Chrome to get rid of the cache with the Vue scripts deleted... still detected Vue.
Changing the file name to get a new, uncached version without Vue detected. (End the part where Vue stays alive after deleting it, i.e. Undead Vue).
Comparing the non-working script and the working script with https://www.diffchecker.com/diff (it showed the two files as exactly the same).
Copying the working script straight from Vue's documentation (how I made the working file, and it worked).
Retyping the Vue script again (this also got it to work).
Viewing the broken script on both Chrome (Version 70.0.3538.110 (Official Build) (64-bit)) and Firefox Quantum (65.0b4 (64-bit)). Both are still broken.
(Switching the coding context from Laravel Blade templates to a standalone HTML file; didn't work, so it was not Laravel's fault).
Using JS Fiddle to make sure it's not just my machine (it isn't; it did not work).
Environment:
Browsers mentioned above
PHP 7.2.11
PHP -S localhost:8001
Vue 2.5.21
Broken file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<h1>Home Page</h1>
<div id="rooty">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var rooty = new Vue({
el: '#rooty',
data: {
message = 'Test!'
}
})
</script>
</body>
</html>
Working file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<h1>Home Page</h1>
<div id="rooty">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var rooty = new Vue({
el: '#rooty',
data: {
message: 'Test!'
}
})
</script>
</body>
</html>
Bibliography:
Learn Vue 2: Step By Step
Vue component not showing up
Simple html with vue.js not working
Introduction to Vue (Vue documentation)
The reason being a simple semicolon. On your broken file if you change = to : on the data it would work as expected.
var rooty = new Vue({
el: '#rooty',
data: {
message : 'Test!' //it is not message = 'Test!', but message: 'Test'
}
})
Here is your updated fiddle https://jsfiddle.net/jayas_godblessall/7e2g1ykd

Unable to import one Svelte component into another

I've been really intrigued by Svelte when I went through the documentation yesterday, but I'm struggling to set up even a pretty basic project and I can't seem to figure out what I'm doing wrong.
I'm starting out with the following HTML :
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
Then, I create the following App.html component :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
export default {}
</script>
I run svelte compile --format iife App.html > App.js, and everything works fine.
So far, so good!
Now, I create a Line.html component with the following content :
<div class="line">{{value}}</div>
<script>
export default {}
</script>
I modify my App.html component like this :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
import Line from './Line.html';
export default {
oncreate() {
const line = new Line({
target: document.querySelector( 'lines' ),
data: {
value: 'test'
}
});
}
}
</script>
I would expect this code to add something like <div class="line">test</div> to the DOM as a child of <div class="lines"></div>.
However, I get the following warning when I compile this code :
No name was supplied for imported module './Line.html'.
Guessing 'Line', but you should use options.globals
And when I try to run the compiled code, I just get the following output in my console :
App.js:250 Uncaught ReferenceError: Line is not defined at App.js:250
index.html:10 Uncaught TypeError: App is not a constructor at index.html:10
What am I doing wrong here?
Note
I also raised this issue on Github.
Copying the answer from GitHub:
svelte-cli works on individual files — you would need to compile Line.html separately, and include it on the page like so:
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='Line.js'></script> <!-- one for each component! -->
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
It will guess that Line.js is defining a global variable called Line, which is how App.js is able to reference it — but it prefers that you're explicit about that, by using the --globals option.
Needless to say, this is a huge pain — it doesn't scale at all past a certain point. For that reason we recommend that you use a build tool with Svelte integrated. That way, you don't have to worry about juggling all the different imported files, and as a bonus Svelte is able to generate more compact code (because it can deduplicate some helper functions between components).
The easiest way to get started — and I keep meaning to write a very short blog post about this — is to click the 'download' button in the REPL. That will give you a basic project setup that you can get running with npm run dev and npm start. Under the hood it uses Rollup to create a bundle that can run in the browser.
Here's your test app running in the REPL. Notice that the way we use the <Line> component is by declaring it using components, and just writing it into the template, rather than manually instantiating it with oncreate.

Simple AngularJS 1.5.9 Component Not Rendering in MVC 5

I am trying to get AngularJS 1.5.9 up and running an MVC 5 application using a very simple component called configuration-list.
I created an MVC 5 application (4.5.2), added the Angular.Core 1.5.9 Nuget package
To take MVC 5, layout and razor rendering out of the picture, I created a simple file called test.htm:
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/app/module.js"></script>
</head>
<body>
<configuration-list></configuration-list>
</body>
</html>
And in module.js:
(function () {
"use strict";
angular.module("radar", []).component("configuration-list", {
template: "Hello from configuration list"
});
}());
The browser (IE 11) comes up empty.
I have opened the debugging tools and go to the console tab, and there are no errors logged.
I have put a breakpoint in module.js and it is hit (so I know the code is running)
I have tried moving the scripts below the component in the body tag
I have tried setting ng-app="radar" in the html tag
Any idea what I'm missing?
For components the naming has to be camelcase, not hyphencase
angular.module("radar", []).component("configurationList", {
template: "Hello from configuration list"
});

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

Categories