Vue.js unknown custom element with Laravel (Have already checked other answers)

Question

My app.js

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Buefy from 'buefy'
Vue.use(Buefy)


// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('edit-delete-dropdown', require('./components/Dropdown.vue').default);
Vue.component('flash-message', require('./components/FlashMessage.vue').default);
Vue.component('store-create-form', require('./components/StoreCreateForm.vue').default);

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

My StoreCreateForm.vue

<template>
<section>
  <h1 class="title"> Create a new store </h1>

  <form :action="createRoute" method="post" role="form">
    <input type="hidden" name="_token" :value="csrfToken">

    <b-field label="Name">
        <b-input placeholder="Store Name" icon-pack="fas" icon="store">
        </b-input>
    </b-field>

    <b-field label="Address">
        <b-input placeholder="Store Address" icon-pack="fas" icon="location-arrow">
        </b-input>
    </b-field>

    <b-field label="Description">
        <b-input type="textarea" placeholder="Store Description" icon-pack="fas" icon="info-circle">
        </b-input>
    </b-field>

    <b-field>
        <button type="submit" name="button" class="button is-primary"> Create </button>

        <a class="button is-light" :href="previousUrl"> Cancel </a>
    </b-field>

  </form>
</section>
</template>

<script>
export default {
  props: {
    createRoute: String,
    csrfToken: String,
    previousUrl: String,
  }
}
</script>

The story is that I use the element in another blade file:

<store-create-form
     create-route="{{ route('users.stores.store', auth()->user()) }}"
     csrf-token="{{ csrf_token() }}"
     previous-url="{{ url()->previous() }}">
 </store-create-form>

and Vue gives me the warning

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

and doesn't display the component even though I can use the other two components 'edit-delete-dropdown' and 'flash-message' in my application. I also run npm run watch to compile files when there is a change.

I've already checked other answers on StackOverflow and other forums but seems like nothing works.

Any thoughts on this hassle?

Your help will be appreciated.

// Updated:

I think the problem is something with Laravel Mix. I tried changing something in other components and the notification from Mix is 'Build successfully' but it doesn't change in the view (it still worked just fine yesterday)

Just disable cache in the Network tab (F12) and everything works!

Thank you for all your help!

Answer 1

You need to give your component a 'name'

<script>
  export default {
    name: 'store-create-form'
    props: {
      createRoute: String,
      csrfToken: String,
      previousUrl: String,
    }
  }
</script>