Can't register component locally in Vue.js. “[Vue warn]: Unknown custom element”

Question

Have a problem with registering component locally in Vue.js app. I'm trying to use MovieCard.vue inside it's parent MainView.vue. Made everythig as in the Vue docs, but still getting this error:

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

found in

---> <MainView> at src\components\MainView.vue
       <VApp>
         <App> at src\App.vue
           <Root>

Here goes the code for MovieCard.vue (child component)

<template>
<div>
 <!-- <v-card class="movie-card" height="30vh" hover>
        <v-card-media :src="'http://image.tmdb.org/t/p/w500' + movie-info.poster_path" height="100%">
         <v-card class="movie-card__info-cover" width="100%" height="100%">
             {{this.movie-info}}
         </v-card>
        </v-card-media>
       </v-card> -->
</div>      
</template>

<script>
export default {
    name: "MovieCard",
    props: ["movie-info"],
    data() { 
        return {
        visible: false
        }
    },
    created() {
        console.log("Info:", this["movie-info"])
    }
}
</script>

<style>

</style>

And for MainView.vue (parent component):

<template>
  <v-container class="main-view" column>
    <v-btn color="pink" dark small absolute bottom left fab></v-btn>
    <v-tabs centered grow color="pink" slot="extension" slider-color="yellow">
      <v-tab class="main-view__option" @click="setCategory('popular')">
        Popular
      </v-tab>
      <v-tab class="main-view__option" @click="setCategory('upcoming')">
        Upcoming
      </v-tab>
      <v-tab class="main-view__option" @click="setCategory('topRated')">
        Top Rated
      </v-tab>
    </v-tabs>
    <v-container class="movie-cards__container" fluid grid-list-xl>
      <v-layout row wrap>
        <v-flex xs3 md2 class="" v-for="n in this.movies.movieLists.list" :key="n.id">
          <movie-card :movie-info="n"></movie-card>
        </v-flex>
        <infinite-loading @infinite="infiniteHandler" spinner="spiral"></infinite-loading>
      </v-layout>
    </v-container>
  </v-container>
</template>


<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import InfiniteLoading from 'vue-infinite-loading';
import MovieCard from "./MovieCard"
console.log(MovieCard)
export default {
  name: 'MainView',
  components: {MovieCard}, 
  data () {
    return {
      chosenCategory: 'popular'
    }
  },
  computed: {
    ...mapState([
      'movies'
    ])
  },
  methods: {
    ...mapActions([
      "getNextPageByCategory",
      'setCategory'
    ]),
    async infiniteHandler($state) {
      await this.getNextPageByCategory(this.chosenCategory);
      $state.loaded();
      console.log("yay");
    },
    ...mapMutations([])
  },
  components: {
    InfiniteLoading
  }
}
</script>

Also, I've noticed the fact that if i put the same component into my App.vue root component, it works as intended(like any other subcomponents, which are registered locally inside App.vue(for example MainView.vue)).

In addition, I'll say that i'm using Vuex and Vuetify inside my app.

Tried to solve this issue for hours, but for now no results...

Thank you in advance for your help!

Answer 1

try to define your component in MainView like this :

components: {
  'movie-card': MovieCard
}

edit: maybe it's because you define your components twice

Answer 2

In the OP question, he made the mistake defining components twice in MainView.vue , so that the latter components overrode the first one, which is the one declared movie-card component, so only

components: {
  InfiniteLoading
}

is the valid registered component at the end of the day,

components: {MovieCard},

was overridden

---

And today, I've gone through the same shit

Unknown custom element: <movie-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

And the mistake of mine was I mistyped the word components to component without the s . So if any of you guys go later and about to see this kind of error, chances you've mistyped something.

The Vue error prompt was also smart enough to ask us did you register the component correctly? , yet we made the assumption that we did, but hold on, we likely didn't.

That being said, the problem had nothing to do with

components: {
  'movie-card': MovieCard 
}
// the above is the same at the below in Vue
components: {
  MovieCard
} 

If you read Sovalina's answer , please notice that the answer is his edit

---

Another thing btw, I've thought the problem had something to do with recursive components , so I made sure providing the "name" option , but as you could read this , it didn't have a thing to do with "name" option cause movie-card was not a recursive component. In my case, I resolved my problem by adding a character s , not any name .