php storm vue component doesnt work / unresoved function or method component

Question

I am having this problem since days and I really cannot find any solution in the internet.

I am new to Vue.js

I am working on a TDD laravel project:

Now I want to add the standard vue example-component to my app.blade.php like this:

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',
});

as a result the example component gets rendered on the webpage ... no problem ...

But here comes the problem:

As soon as I am changing any HTML code inside the example component it doesn't show the changes in the browser. It keeps showing the standard example component.

Even worse:

When I am renaming the examplecomponent.vue file through refactoring into FlashTest.vue (for example or anything else) and changing the app.layout.blade and app.js like this:

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<body>
<div id="app">
    <flash-test></flash-test>
</div>

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('flash-test', require('./components/FlashTest.vue').default);

const app = new Vue({
    el: '#app',
});

I am not able to see that component.

The only error message I am getting is from the console when ever I want to register any global component other then :

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 get is from php storm:

next to the line where I register my component:

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

It quaks:

unresolved function or method component check that called functions are valid

please help me I tried everything already since 2 days

You can use npm run watch for hot reloading your changes. It'll take your initial script (i.e. resources/js/app.js) and build into public/js/app.js as per defined in your webpack config file. It'll automatically build your files that recently changed. You can also use npm run dev as well for each of your modifications. — Adam

Надиль Каримов Надиль Каримов · Accepted Answer · 2019-11-11T08:40:10

1)First you need to download node.js and npm : https://nodejs.org/en/

2)You need to install npm. Run in the project root dir

npm install

3)You must build the app.js script with npm. Run in the project root dir

npm run dev

php storm vue component doesnt work / unresoved function or method component

1 Answers