How to solve Unknown custom element problem?

Question

I'm using vue and laravel to create a chat app this is ChatMessage.vue code:

<template lang="html">
<div class="container">
    <p>Message text is here</p>
    <small>Author name</small>
</div>
</template>

<script>
export default { 
}
</script>
<style lang="css">
</style>

and this is my app.js code:

require('./bootstrap');

window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat-message', require('./components/ChatMessage.vue'));

const app = new Vue({
  el: '#app'
});

my chat.blade.php view code:

<!DOCTYPE html>
<html>
<head>
  <title>Chatroom</title>
  <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
    <h1>
        Chat
    </h1>
    <chat-message></chat-message>
    {{-- <chat-log></chat-log>
    <chat-composer></chat-composer> --}}
</div>

<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

I get this error:"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."

Show the template for #app. Are you sure both require's are working? — Eric Guan
i'll edit my question to show the blade view where i'm using chat-message tag.I'm new to vue.js how can i check if require is working ? — Youssef Boudaya

Kamrul Touhid Kamrul Touhid · Accepted Answer · 2018-11-29T09:55:16

Remove comments

Use asset function in link resources

<!DOCTYPE html>
    <html>
    <head>
      <title>Chatroom</title>
      <link rel="stylesheet" type="text/css" href="{{asset('css/app.css')}}">
    </head>
    <body>
    <div id="app">
        <h1>
            Chat
        </h1>

        <chat-message></chat-message>

    </div>

    <script type="text/javascript" src="{{asset('js/app.js')}}"></script>
    </body>
    </html>

How to solve Unknown custom element problem?

1 Answers