Laravel 9: How to rebuild Javascript files in a project-CodePudding

I have created a Laravel 9 project recently on mac. I am trying to use Vue components in my project. The Laravel installation comes with a Vue component (js/Components/ExampleComponenets.vue). I included the example-component in a view file, and the page displays the component correctly.

I made a copy of this component as js/Components/NoteComponent.vue and updated app.js to register the new component as 'note-component'

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('note-component', require('./components/NoteComponent.vue').default);

However, when I used the note-component in my view file, it displays error:

[Vue warn]: Unknown custom element: <note-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

I removed the note-component from my view file and made a change to the console.log used in the ExampleComponent.vue, but surprisingly, the page continues to display the old message. I am getting an impression that somehow the application continues to use the old js files, and I need to do something to rebuild/regresh the js files. (php artisan clear:cache) did not help.

Can someone please advise how to fix this issue?

Thanks.

CodePudding user response：

You need use npm run dev to start your vue server and remember, js is loaded when page was stored in browser memory, so do a full reload

Command Shift R in mac
CTRL Shift F5 in windows

CodePudding user response：

We updated to Laravel to v9 recently and had to modify the js files in this way:

import Vue from "vue";

Vue.component("example", () => import("./components/ExampleComponent"));

Source: Vue template or render function not defined yet I am using neither?