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>
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)
});
Issue:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Test.vue:
<template>
<p>test</p>
</template>
<script>
//also tried export default
module.exports = {
name: "test"
}
</script>
<style scoped>
</style>
app.js:
Vue.component('test', require('./components/Test'));
const app = new Vue({
el: '#app',
...
});
And my usage inside blade template:
<test></test>
What's wrong?
I have some other components which work without errors. They were made ~half year ago, probably npm update messed things up, but I'm not sure.
Can you try to import component and add it like this :
import Test from './components/Test';
const app = new Vue({
el: '#app',
components: {
Test
},
...
});
Youre problem seems to be related to this : Components registration
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')
}
})
I'm trying to follow that link, and implement it on VueCli webpack template..
Then i go to dev-server.js and create * route, to return as that link:
renderer.renderToString(require('./src/main'), function (err, html){
//code here
})
But that require keeps giving me error, that was not possible to load.
Here it's my main js:
import Vue from 'vue'
import App from './App'
const app = new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
If someone can help, i'll appreciate!