littleboby
319
5
Vue

Vue.js activated in tab: npm run watch build successful, no visual feedback

Posted 1 month ago by littleboby

I have this route:

Route::get('/discover', function() {
    return view('discover');
});

which returns an HTML file.

Discover.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-indigo.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script src="js/app.js" defer></script>
    <title>Discover</title>
</head>
<body>
    <div class="app">
        <discover></discover>
    </div>
</body>
</html>

while Discover.vue looks like this:

<template>
<div id="chat-app">
    <HeaderComponent></HeaderComponent>
</div>
</template>


<script>

import HeaderComponent from './HeaderComponent';

export default {
    mounted() {
        console.log('Component mounted.')
    }
}


components: {
    HeaderComponent
}

</script>

and HeaderComponent.vue

<template>
    <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
    mounted() {
       console.log('Component mounted.')
    }
}
</script>


App.js configuration is pretty standard:

Vue.component('discover', require('./components/Discover.vue').default);

/**
 * 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.
 */

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

The error has two parts:

  • I have a blank page &
  • On the console I get [Vue warn]: Unknown custom element: <HeaderComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Have I done a syntax error or am I not thinking about this logically?!

Please sign in or create an account to participate in this conversation.