Unknown custom element: <app-home> - did you register the component correctly? For recursive components, make sure to provide the “name” option

Question

I have this problem but i try some solutions in web but and i can't resolve it: Unknown custom element:

- did you register the component correctly? For recursive components, make sure to provide the "name" option.

The problem appears to be in those fils:

Please I need help as soon as possible

routes.js:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import PostDetails from "../components/PostDetails.vue";
Vue.use(VueRouter);
const routes = [{
        path: "/",
        component: Home,
        name: "Home"
    },
    {
        path: "/post/:slug",
        component: PostDetails,
        name: "postDetails"
    }
];    
const router = new VueRouter({
    routes: routes,
    hashbang: false,
    mode: "history"
});
export default router;

app.js:

import Vue from "vue";
import VueRouter from "vue-router";
  
    require('./bootstrap');
    
    window.Vue = require('vue');
    Vue.component(key.split('/').pop().split('.')[0], files(key).default))
    
    Vue.component('app-home', require('./AppHome.vue'));        

    import router from "./routes/routes.js";
    
    const app = new Vue({
        el: '#app',
        vuetify,
        render: h => h(App),
        router: router,
    });

AppHome.vue:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
};
</script>

Home.vue:

<template>
  <div class="container">
    <div class="row my-4">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Articles</div>
          <div
            class="card-body"
            :key="index"
            v-for="(post, index) in posts.data"
          >
            <div class="media">
              <img
                :src="post.photo"
                class="rounded img-fluid mr-2 shadow-sm"
                alt=""
                srcset=""
              />
              <div class="media-body text-justify">
                <router-link :to="post.path">
                  <h3>{{ index }}:{{ post.title }}</h3>
                </router-link>

                <p>
                  <span class="textdefaut">
                    {{ post.user.name }}
                  </span>
                  <span class="text-danger">
                    {{ post.added }}
                  </span>
                </p>

                <p class="lead text-justify">
                  {{ post.body.substr(0, 200) }}...
                </p>
                <hr />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      posts: {},
    };
  },
  created() {
    this.getPosts();
  },
  methods: {
    getPosts() {
      axios
        .get("/api/posts")
        .then((response) => {
          console.log(response.data);
          this.posts = response.data;
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>

Post Details:

<template>

<div>
  Posts details , This shows that the route is really working!!
  <router-link to="/Home"><a>Back to the root</a></router-link>
</div>

</telpmate>

<script>
export default {
  data () {
    return {
      message: 'Hoera!!!!'
    };
  }
};
</script>

Answer 1

1. If all of your Vuejs components (including AppHome.vue) are in /resources/js/components directory, you must change:

Vue.component('app-home', require('./AppHome.vue'));

by

Vue.component('app-home', require('./components/AppHome.vue'));

...in your app.js

2. Try to append.default option:

 Vue.component('app-home', require('./components/AppHome.vue').default);