I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>
Related
Im new to VueJS and trying to figure out how I would nest components or have sub components. I don't know if im very bad at googling but I couldn't really find a clear answer.
This is my script and html :
Vue.component('card', {
template: '<div class="card"></div>'
})
Vue.component('card-text', {
props: ['text-content'],
template: '{{ text-content }}'
})
new Vue({
el: '#app',
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="app">
<card>
<card-text text-content="Text to show"></card-text>
</card>
</div>
</body>
</html>
as you can see I have 2 components, card and card-text.
I want to display these like this :
<card>
<card-text text-content="text to show"></card-text>
</card>
You would need slots to do that. Just change your card component to:
Vue.component('card', {
template: '<div class="card"><slot></slot></div>'
})
To be able to render different stuff inside <card></card>
You can read more in the docs
If you want to nest card-text inside card, just do as follows:
Vue.component('card', {
template: '<div class="card"><card-text text-content="Text to show"></card-text></div>'
})
I have index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="module">
import Vue from '/static/js/vue.js'
new Vue({
el: '#index',
data:{
message:'Hello Vue!'
}
})
</script>
<div id="index">
<p>{{ message }}</p>
</div>
</body>
</html>
also I have this file structure
But I get this error:
GET http://localhost:8080/static/js/vue.js net::ERR_ABORTED 404
Can anybody help me? I want to use Vue.js without webpack, npm or something else.
Put your Vue scripts at the end of the body and as #Terry suggested change the path of your vue.js script to '/js/vue.js':
here's a working example https://codepen.io/ellisdod/pen/PoqBRbg?editors=1010
<body>
<div id="index">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#index',
data:{
message:'Hello Vue!'
}
})
</script>
</body>
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)
hi I'm trying to autocomplete/typeahead component for Vue 2 and Bootstrap 4
This is my code.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
</head>
<body>
<div id="container">
<vue-bootstrap-typeahead
v-model="query"
:data="['Canada', 'USA', 'Mexico']" />
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>
<script>
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead';
Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead);
new Vue({
el: '#container',
data: {
value: '',
},
});
</script>
</body>
</html>
Unfortunately this is not working due to following errors.
SyntaxError: import declarations may only appear at top level of a module
Source map error: request failed with status 404 Resource URL:
https://unpkg.com/vue-bootstrap-typeahead Source Map URL:
VueBootstrapTypeahead.umd.min.js.map
It would be great if someone can help me on this.
The code <script src="https://unpkg.com/vue-bootstrap-typeahead"></script> has imported the VueBootstrapTypeahead, and became a property of window.You don't need import again. when we talk about import, often the module concert come to us too. import declarations was often used in an app which need be transformed by tools, such as babel,webpack or rollup.
Please add this to the <head> of your document before the <link> tags:
<meta charset="UTF-8">
This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 5 years ago.
Here is my code and i seem to have done everything correctly.
what might be the problem as the output is only {{message}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
<script>
new Vue({
el: '#app',
data:{
message: "Yow"
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
</html>
and it just outputs {{message}}
Hey man you forgot to close ending script tag in vue.js script/api
You were rendering whole html part in script tag like you can see in console below :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
</script>
<script>
console.log('hi');
var app = new Vue({
el: '#app',
data:{
message: 'yow'
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
And always inlude api/main/cdn link ahead of any operational js file