I installed a fresh Laravel 8 and Vue js. upon installing the npm and vue it installs well. Now my problem is when i run the npm run watch then load the page it is a blank white page
my testapp.vue
<template>
<div>
<h1>Hello world! asasasaas</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
my views/testpage.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testpage</title>
</head>
<body>
<div id="app">
<main-app></main-app>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>
my js/app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('main-app', require('./components/TestApp.vue').default);
const app = new Vue({
el: '#app'
});
my 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')
.postCss('resources/css/app.css', 'public/css', [
// require('postcss-import'),
// require('tailwindcss'),
// require('autoprefixer'),
])
.vue();
my route/web
Route::get('/test', [TestController::class, 'index']);
Can someone help me figured this thing out? when i load the page it is a blank white page. it seems the vue is not loaded.
TIA
question from:
https://stackoverflow.com/questions/65832965/laravel-8-and-vue-js-page-vue-template-not-displaying 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
