I'm new to Vue.js and trying to test semantic binding. I have Vue.js in the same directory as my test page but I get a Vue warning of "Cannot find element: #growler". Am I doing this correct?
html
<head>
<title>
Growler
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="growler"></div>
<h2> {{ appName }} </h2>
</body>
app.js
var growler = new Vue({
el: '#growler',
data: {
appName: 'Growler'
}
});
Your HTML-markup is wrong.
The closing div tag has to be after the h2, otherwise the variable appName will not be found.
<div id="growler">
<h2> {{ appName }} </h2>
</div>
The error "Cannot find element: #growler" probably appears, because you include app.js in the head. Either move it downwards before the closing body tag or add some window.onload-condition to it to make sure, the JS will be executed after rendering the inital page.
app.js script must be below the application div
Also you must put the h2 tag inside the #glower div
Because the vue application glower working only inside #glower div
<div id="growler">
<h2> {{ appName }} </h2>
</div>
<head>
<title>
Growler
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="growler">
<h2> {{ appName }} </h2>
</div>
<script src="vue.js"></script>
<script src="app.js"></script>
</body>
There was a error in your HTML.
Related
Non WebDev here trying to build a basic UI with primevue on vue3. Tried to run the basic demo but with some components included. Don't know if components come with their own CSS dependencies.
Bellow is my html code. I have also tried using a vue project with separate components and gottenthe same result
Basic example fails:
<html>
<head>
<meta charset="utf-8">
<title>PrimeVue Demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="val"></p-inputtext>
<h6>{{val}}</h6>
</div>
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div>
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
</div>
<div class="p-grid">
<div class="p-col-2">2</div>
<div class="p-col-6">6</div>
<div class="p-col-4">4</div>
</div>
<script>
const {createApp, ref} = Vue;
const App = {
setup() {
const val = ref(null);
return {
val
};
},
components: {
'p-inputtext': primevue.inputtext
}
};
createApp(App).mount("#app");
</script>
</body>
</html>
Should render 1 row for flex items and 2 rows for numbers in grid layout. instead it renders all rows with no styling. What am I missing?:
In order to use prime vue's flex and grid layout, you need to load PrimeFlex.
https://primefaces.org/primevue/showcase/#/primeflex
The documentation only has npm setup but you may be able to include the following link.
<link href="https://cdn.jsdelivr.net/npm/primeflex#2.0.0/primeflex.min.css" rel="stylesheet">
In case you do it through npm, After installing the package, don't forget to include the CSS file, in my case, I included it in my main.js just adding this line.
import 'primeflex/primeflex.css';
https://primefaces.org/primevue/showcase/#/primeflex
The CDN method works!! However I downloaded the file and placed this
<link rel="stylesheet" href="static/primevue/primeflex.min.css" />
inside the head section of my html file.
However it did not work as per the documentation. I had to remove the p- for it to work:
<div id="app" class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
I'm trying to use the Vue2Leaflet component (https://vuejsexamples.com/vue-2-components-for-leaflet-maps/) but I have hard time to make it works. I could not make this simple example work, with the html file :
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div id="app" style="height: 400px">
<v-map :zoom=13 :center="[47.413220, -1.219482]">
<v-tilelayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></v-tilelayer>
<v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
</v-map>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet"></script>
</body>
</html>
and the js file :
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.TileLayer)
Vue.component('v-marker', window.Vue2Leaflet.Marker)
new Vue({ el: '#app'});
I made a fiddle with this basic exemple : http://jsfiddle.net/rvxc2uLk/3.
What am I missing ?
You forgot the "L" before .TileLayer also for .Marker.
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.LTileLayer)
Vue.component('v-marker', window.Vue2Leaflet.LMarker)
I always build my SPA apps with the vue-cli.
This time I'm building a small project and I'm incluing Vue with a script tag.
But I don't understand the following behavior.
// app.js
Vue.component('todo-item', {
template: `<div>Todo Component!</div>`
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue App!'
}
})
The HTML index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
<div>
Just some content...
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
The result is this:
Now, I'll try to add '<todo-item />' Component inside the HTML:
<div id="app">
{{ message }}
<todo-item />
<div>
Just some content...
</div>
</div>
The text 'Just some content...' disappeared:
What Am I doing wrong?
TL;DR;
instead of <todo-item/> use <todo-item></todo-item>
Un-compiled vue.js does not support self-closing html tags.
see style guide:
Unfortunately, HTML doesn’t allow custom elements to be self-closing -
only official “void” elements. That’s why the strategy is only
possible when Vue’s template compiler can reach the template before
the DOM, then serve the DOM spec-compliant HTML.
https://v2.vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended
and issues in github:
https://github.com/vuejs/vue/issues/1036
https://github.com/vuejs/vue/issues/8664
I have a very simple local setup for VueJS and am having problems running a simple example that shows how raw HTML can be output. I'm not including link to JS Fiddle because I want to make it work on local setup only, and sometimes my examples work on JS Fiddle but not on local machine.
Anyway, here's the html code:
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</head>
<body>
<div id="app">
<!-- Doesn't work! -->
<p>{{ link }}</p>
<!-- This works! -->
<p v-html>{{ link }} </p>
</div>
</body>
</html>
And here's my app.js file:
window.addEventListener('load', function(){
new Vue({
el: '#app',
data: {
link: 'Google'
}
});
});
Now when I load the window, I get twice the following error:
[Vue warn]: Property or method "link" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <Root>).
Any idea where I'm going wrong?
Can you try this one and see if it works as required. I moved the scripts after the body.
<html>
<head>
</head>
<body>
<div id="app">
<!-- Doesn't work! -->
<p>{{ link }}</p>
<!-- This works! -->
<p v-html>{{ link }} </p>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</html>
I'm developing my application with riot.js and I want to use dropzone(http://www.dropzonejs.com/).
In my code:
index.html below,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<app></app>
<script src="dist/scripts/bundle.js"></script>
</body>
</html>
app.tag below,
var route = require('riot-route'); require("dropzone"); require('./main/home.tag'); require('./main/contents1.tag');
<app>
<main>
<contents></contents>
</main>
<script>
route(function(tagName) {
tagName = tagName || 'home'
riot.mount('contents', tagName)
})
route.start(true)
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" />
</app>
home.tag below,
<home>
<div class="search-box"></div>
</home>
Then, I add <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> into app.tag like this, it works right.
<contents></contents>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
but, I add it into home.tag like this,
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</home>
it doesn't work. Can anyone help me??
Try to update DropZone when mounting the tag, using on('mount', or also you can try with on('updated',
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
<script>
this.on('mount', function(){
new Dropzone(".dropzone");
})
</script>
</home>