My Vue root file/component is not showing up in Laravel-CodePudding

I'm following this simple Crud tutorial for Vue Laravel and everything in Laravel part seems fine (from creating controllers & models) seems fine but I can't make vue show up in Laravel welcome blade. Here's my code:

app.js file

 require('./bootstrap');
 window.Vue = require('vue'); 
 import App from './App.vue';
 import VueAxios from 'vue-axios';
 import VueRouter from 'vue-router';
 import axios from 'axios';
 import { routes } from './routes';
 
 Vue.use(VueRouter);
 Vue.use(VueAxios, axios);
  
 const router = new VueRouter({
     mode: 'history',
     routes: routes
    });
    
    
 const app = new Vue({
     el: '#app',
     router: router,
     render: h => h(App),
     });

App.vue file:

<template>
    <div > 
        <h2>Vue app</h2>
     
        <router-view> </router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

and this is the 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>
        
        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body >
        <div id="app"> </div>
        <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
        <h2>The welcome blade</h2>
    </body>
</html>

CodePudding user response：

Firstly, try this:

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

Secondly, you may need a router view element inside the div with id app. I can't say for sure since I don't know your routes. If the change above doesn't solve the problem, add router view like

<div id="app">
    <router-view />
</div>

CodePudding user response：

Looking at the code after composer require laravel/ui and php artisan ui vue I see small change that may affect the execution of code. Originally the Laravel setup creates window.Vue = require('vue').default;, but your code has window.Vue = require('vue')