[Vue warn]: Unknown custom element: <app> - did you register the component correctly? (found in <Root>)

Question

I'm trying to setup Vue in Laravel 6.

I've ran:

composer require laravel/ui

php artisan ui vue

npm install && npm run dev

Then inside of welcome.blade.php, i've deleted the body of the welcome page and added a div with the id of root.

I can get the example component to show in the browser but I can't create any new components and get them to show without getting the error. I've even tried just renaming the example-component and even that won't work. I renamed the file to App.vue, and then renamed everthing else - see below:

app.js


require('./bootstrap');

window.Vue = require('vue');

Vue.component('app', require('./components/App.vue').default);

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

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{csrf_token()}}">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="/css/app.css">
      <!-- Bootstrap-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Journey To Dev</title>
  </head>

  <body>
    <div id="app">
      <app></app>
    </div>

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

</html>

The App.vue is unchanged from ExampleComponent.vue, i just renamed the file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

Thanks!

Answer 1

You need to run

npm run dev

Again everytime you change Javascript assets or Vue components so that Webpack recompile them to public/js/app.js

Or even better, boot up a watcher and let it recompile when you change code

npm run watch

And make sure to hard refresh or leave the devtools console open so cache would be disabled

You can also automatically register components like so

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

instead of

Vue.component('app', require('./components/App.vue').default);

Hope this helps

[Vue warn]: Unknown custom element: <app> - did you register the component correctly? (found in <Root>)

Question

1 answers

solution1
2 ACCPTED 2019-10-09 16:54:36

[Vue warn]: Unknown custom element: <app> - did you register the component correctly? (found in <Root>)

Question

1 answers

solution1 2 ACCPTED 2019-10-09 16:54:36

solution1
2 ACCPTED 2019-10-09 16:54:36