After beginning the process of converting my Laravel 8 project to VueJS, I encountered an issue where the template content was not rendering properly. I followed these commands to incorporate the basic structure of Vue:
php artisan ui vue && npm installIn my app.js file:
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
And in my webpack.mix.js file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
The main view looks like this:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body id="app">
<example-component></example-component>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Although the Npm build is successful without any errors, unfortunately, the templates' content is not visible on the frontend. All that can be seen is the Vue tag itself, as shown here: https://i.sstatic.net/SlxrG.png
Any help or advice would be greatly appreciated. Thank you!