SoI've been trying for weeks now to get a custom component to compile and it is not working. I know it isn't compiling becuause when I check the compiled Vue file, I search for the custom element added. It does not appear in the compiled JavaScript.
The funny thing is is that the ExampleCOmponent.vue file gets compiled. However everytime I try to add a custom componnt, my \JavaScript console tells me that the custom element is not defined.
I have tried using several methods to import the vue file but it still never gets compiled. I don't know thatI'm doing wrong.
Here is my ChatMessage.vue file
<template>
<div class="container">
<P>I'm an example message</P>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Here is my app.js file
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('chat-message', require('./components/ChatMessage.vue'));
const app = new Vue({
el: '#app'
});
and here is my view
<html>
<head>
<title>Title goes here</title>
<link rel="stylesheet" href="css/stylesheet.css" />
</head>
<body>
<div id="app">
<h1>Chatroom</h1>
<example-component>
</example-component>
<chat-message><</chat-message>
</div>
<script src="js/app.js"></script>
</body>
</html>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire