I have been struggling with this issue for days and cannot seem to find a solution online.
Being new to Vue.js, I am currently working on a TDD Laravel project:
My goal is to add the standard Vue example-component to my app.blade.php as follows:
app.blade.php
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<body>
<div id="app">
<example-component></example-component>
</div>
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
After adding the example component, it renders on the webpage without any issues.
However, here lies the problem:
Whenever I make changes to the HTML code inside the example component, the browser does not reflect those changes. It continues to display the standard example component.
Furthermore, if I rename the examplecomponent.vue file through refactoring into FlashTest.vue (for example) and update the app.layout.blade and app.js like so:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<body>
<div id="app">
<flash-test></flash-test>
</div>
The only error message I receive is from the console whenever I try to register any global component other than :
app.js:37935 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in )app.js:37935 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in )
The other error that I encounter is from PhpStorm:
next to the line where I register my component:
´´´ Vue.component('example-component', require('./components/ExampleComponent.vue').default); ´´´
It displays:
unresolved function or method component check that called functions are valid
Please assist me as I have tried everything over the past 2 days.