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!

in MainView.vue(parent component) you have two components objects.That is you issue — Roland
– Roland, Commented Apr 28, 2018 at 17:33

Sovalina · Accepted Answer · 2018-04-28 17:27:03Z

2

try to define your component in MainView like this :

components: {
  'movie-card': MovieCard
}

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

edited Apr 28, 2018 at 17:27

answered Apr 28, 2018 at 17:19

Sovalina

5,6094 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Simon Bryatov Over a year ago

Tried it already. No results. Also tried to change name inside MovieCard.vue to "movie-card".

Slawek Over a year ago

@sovalina is right, you define components twice in MainView, try to do it only once, like: components: { 'movie-card': MovieCard, 'infinite-loading': InfiniteLoading }

Simon Bryatov Over a year ago

It worked! Thank you so much!!! You saved hours of my life :) Silly mistake, but for now one more thing to be aware of when creating objects in js, haha

Loi Nguyen Huynh · Accepted Answer · 2019-12-13 17:02:38Z

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.

Thanks, same thing to me, i was declaring compontents instead components

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related