Komponen Vue 3 tidak boleh dipaparkan dalam projek Laravel
Saya telah mencuba semua yang saya boleh fikirkan, tetapi walaupun tidak mendapat ralat binaan, saya tidak dapat memuatkan komponen Vue dalam projek saya yang sangat mudah. Saya tidak faham mengapa, tetapi apabila cuba melihat halaman menggunakan Laravelserve, saya hanya mendapat halaman kosong.
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 class="antialiased">
<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', [
//
]);