This is the component I want to use [https://krystalcampioni.github.io/vue-hotel-datepicker/] [https://github.com/krystalcampioni/vue-hotel-datepicker#i18n] for date picker on my index.html but it is me giving an error Failed to mount component: template or render function not defined. Below is the code I have written on my index.html`
//index.html
<html>
<script src="path/to/vue.js"></script>
<script src="vue-hotel-datepicker/dist/vue-hotel-datepicker.min.js"></script>
<body>
<div id="app">
<HotelDatePicker/></<HotelDatePicker>
</div>
<script>
new Vue({
el: '#app',
components: { HotelDatePicker }
})
</script>
</body>
</html>
`
If youre using a build tool, You must import the component before registering it with the vue instance
import HotelDatePicker from 'vue-hotel-datepicker'
new Vue({
el: '#app',
components: { HotelDatePicker }
})
Otherwise use require
new Vue({
el: '#app',
components: {
'vue-hotel-datepicker': require('vue-hotel-datepicker')
}
})
Related
I have the following code...
<html>
<head></head>
<body>
<div id="app">
{{ message }}
<jrg-element></jrg-element>
</div>
<script type="module">
import Vue from "//unpkg.com/vue/dist/vue.esm.browser.js";
import {ShadowElement, CREATE_ELEMENT} from "//unpkg.com/#jrg/ui/target/jrg-ui.esm.mjs";
class JrgElement extends ShadowElement {
constructor() {
super("<h1>CustomElement</h1>");
this.render();
}
}
CREATE_ELEMENT("jrg-element", JrgElement, {});
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
But when I run I get....
If I comment out the Vue portion everything works fine. How do I use Custom elements with Vue?
Update
I tried updating to ...
CREATE_ELEMENT("jrg-element", JrgElement, {});
Vue.config.ignoredElements = ['jrg-element']
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
But I still get...
The result is the Vue element renders but the custom element does not.
Full Code
Update 2
I tried waiting until the dom is loaded like...
document.addEventListener("DOMContentLoaded", function() {
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
});
But same outcome
With Vite 2, it's like this:
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag === 'jrg-element'
}
}
})
],
Source: https://github.com/vitejs/vite/issues/1312
Vue templates (content of app div in your case) are compiled by Vue template compiler and expects all custom elements are Vue components and properly registered. In order to tell Vue that you are using some non-Vue custom element (Web Components API), you need to configure compiler.
Vue 2.x
Vue.config.ignoredElements = ['jrg-element']
Vue 3
const app = Vue.createApp({})
app.config.isCustomElement = tag => tag === 'jrg-element'
The docs
Why is this Vue template rendering? h(App2), but App2 does not exists? What is wrong? Thanks a lot for your help.
index.html
<body>
<div id="app"></div>
</body>
App0.vue
<template>
<div>
Hi there!
</div>
</template>
<script>
export default {
name: "App1"
}
</script>
main.js
import Vue from 'vue';
import App2 from './App0';
new Vue({
el: '#app',
render: h => h(App2)
});
Just add components option:
new Vue({
el: '#app',
components: { App2 },
render: h => h(App2)
});
i'm learning Vue, and in first lesson this code not working, whats wrong? Vue update?
new Vue({
el: '#app',
data: {
name: 'Vue!'
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<div id="app">
<h1>Hello {{ name }}</h1>
</div>
</body>
</html>
There are two ways to use the data property in vue
This is used when you are using vue in a root Vue instance
new Vue({
el: "#app",
data: {
name: 'Vue !'
}
});
This is used when you are using vue components
new Vue({
el: "#app",
data() {
return {
name: 'Vue !'
}
}
});
Are you using components?
I have this code in app.js:
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
var app = new Vue({
el: '#app',
data: {}
});
in master page I used Yield before closing body tag:
#yield('scripts')
and in a view page I tried to use Vue like this:
#section('scripts')
<script>
var app = new Vue({
el: '#app',
data: {
permission: true
}
});
</script>
#endsection
But it gives this error:
ReferenceError: Vue is not defined
I can't figure out what's the problem.
Include the following before your script -
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
I do not get vue components really .... I have a vue component in my html and want to show it, but it does not show anything, what do I do wrong?
What is the proper way to register and show a component in vue? Can someone give me a simple example for a beginner? :)
This is my code:
HTML
<div id="na-vue-app">
<activity-filter>
<template>
'Some Text'
</template>
</activity-filter>
</div>
Vue
new Vue({
el: '#na-vue-app'
});
const filterActivity = Vue.extend({
data: function () {
return {
distance:100,
}
},
mounted() {
},
methods: {
}
});
Vue.component('activity-filter', filterActivity);
Look at this pen: https://codepen.io/Nartub600/pen/oopBYJ
HTML
<div id="app">
<my-component msg="Hi!">
</my-component>
</div>
JS
Vue.component('my-component', {
props: ['msg'],
template: '<p>{{ msg }}</p>'
})
var app = new Vue({
el: '#app'
})
It's the easiest form to try components I think