I set up a fresh Laravel project using laravel new sample. Then I executed npm install followed by npm run dev. Next, I modified the welcome.blade.php file as shown below:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" href="{{ mix('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>
However, upon making this change, the page remains blank and the Vue devtools extension in Chrome displays "Vue.js not detected". Even though Laravel usually pairs well with Vue, it seems like something is amiss. Below are the original files provided by Laravel without any alterations.
/resources/js/app.js (which compiles successfully to /public/js/app.js using npm run dev)
// JavaScript dependencies loading block
require('./bootstrap');
window.Vue = require('vue');
// Automatic component registration code block
Vue.component('example-component', require('./components/ExampleComponent.vue'));
// Fresh Vue application instantiation
const app = new Vue({
el: '#app',
});
/resources/js/components/ExampleComponent.vue<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
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 application.
|--------------------------------------------------------------------------
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
...
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
...
}
}
These files are all in their default state after installation. Any thoughts on why the page fails to render properly despite loading the compiled app.js? The file appears correct with references to Vue and example-component.