Vue.component is not a function

I have a fresh Laravel 8 Application with breeze installed . Then i installed vue with npm. Once i load the dashboard page and try load a simple vue component i am getting the error 'Vue.component is not a function' My files are as following

app.js


window.Vue = require('vue');

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

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


webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
  .postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

What else do i have to do to get vue components to load? I have added id="app" to main div also

MarianoMoreyra

5 years ago

Level 25

Hi @reaz

No errors when you run npm run dev?

Also, just in case, that code is from \resources\js\app.js and not from \public\js\app.js right?

reaz

5 years ago

Best Answer

Level 5

Hi , thanks for your reply. it is from the \resources\js\app.js infact. But i have i found the problem. In default breeze app layout, script tag is in the head section. I had to move it to just before the end body tag. That solved the problem for me.

  <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100" id="app">
            @include('layouts.navigation')

            <!-- Page Heading -->
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
        <script src="{{ asset('js/app.js') }} "></script>
    </body>

Please or to participate in this conversation.