Laravel and Vue are installed in Homestead. Laravel Framework 11.5.0 and Vue 10.5.1
Fresh install of Laravel and Vue using these commands:
composer create-project --prefer-dist laravel/laravel my_project
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
In the resources/js/components/ExampleComponent.vue:
<template>
<div class="example-component">
<h1>Hello, World!</h1>
</div>
</template>
<script>
export default {
name: 'ExampleComponent',
};
</script>
<style scoped>
.example-component {
/* Add your styles here */
}
</style>
In in resources/js/app.js:
import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
const app = new Vue({
el: '#app',
});
In resources/views/welcome.blade.php:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- ... -->
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
These commands were then run:
npm install
npm run dev
When navigating the browser to the test page, a single page application was expected but a blank screen occurs with a 404 error.