Vue 3 Component not displaying in Laravel Project-CodePudding

I have tried everything I can think of but despite having no build errors I cannot get Vue components to load in my very simple project. I do not understand why but I just get a blank page when trying to view the page with Laravel serve.

`welcome.blade.php`

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>Laravel</title>
    
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    
    </head> 
    <body >
        <div id='app'>
            <Home />
        </div>
    
        <script scr="{{ asset('js/app.js') }}"></script>
    </body>
</html>

`app.js`

require('./bootstrap');

import { createApp } from 'vue'

import Home from './components/Home.vue';

const app = createApp({});

app.component('home', Home);

app.mount('#app');

`Home.vue`

<template>
    <div>
        <h1> WELCOME </h1>
    </div>
</template>

`webpack.mix.js`

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

CodePudding user response：

i cant comment because of my score, sorry to have to do it like an awnser..

are you sure that app.component('home', Home); line is the right way to import a comp? because from what i find, this would be the

Vue.component('home', require('./components/Home.vue').default);

whould be the way.

CodePudding user response：

have you tried to change the tag in your blade from <Home />to <home /> ? As wrote by another user before you must add .default in your row where you import the component