Have a problem with registering ponent 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 ponent correctly? For recursive ponents, make sure to provide the "name" option.

found in

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

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

<template>
<div>
 <!-- <v-card class="movie-card" height="30vh" hover>
        <v-card-media :src="'' + 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 ponent):

<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('uping')">
        Uping
      </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',
  ponents: {MovieCard}, 
  data () {
    return {
      chosenCategory: 'popular'
    }
  },
  puted: {
    ...mapState([
      'movies'
    ])
  },
  methods: {
    ...mapActions([
      "getNextPageByCategory",
      'setCategory'
    ]),
    async infiniteHandler($state) {
      await this.getNextPageByCategory(this.chosenCategory);
      $state.loaded();
      console.log("yay");
    },
    ...mapMutations([])
  },
  ponents: {
    InfiniteLoading
  }
}
</script>

Also, I've noticed the fact that if i put the same ponent into my App.vue root ponent, it works as intended(like any other subponents, 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!

Have a problem with registering ponent 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 ponent correctly? For recursive ponents, make sure to provide the "name" option.

found in

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

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

<template>
<div>
 <!-- <v-card class="movie-card" height="30vh" hover>
        <v-card-media :src="'http://image.tmdb/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 ponent):

<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('uping')">
        Uping
      </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',
  ponents: {MovieCard}, 
  data () {
    return {
      chosenCategory: 'popular'
    }
  },
  puted: {
    ...mapState([
      'movies'
    ])
  },
  methods: {
    ...mapActions([
      "getNextPageByCategory",
      'setCategory'
    ]),
    async infiniteHandler($state) {
      await this.getNextPageByCategory(this.chosenCategory);
      $state.loaded();
      console.log("yay");
    },
    ...mapMutations([])
  },
  ponents: {
    InfiniteLoading
  }
}
</script>

Also, I've noticed the fact that if i put the same ponent into my App.vue root ponent, it works as intended(like any other subponents, 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!

• javascript
• vue.js

Share Follow asked Apr 28, 2018 at 17:14 Simon BryatovSimon Bryatov 2311 gold badge11 silver badge44 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

try to define your ponent in MainView like this :

ponents: {
  'movie-card': MovieCard
}

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

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

ponents: {
  InfiniteLoading
}

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

ponents: {MovieCard},

was overridden

---

And today, I've gone through the same shit

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

And the mistake of mine was I mistyped the word ponents to ponent 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 ponent 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

ponents: {
  'movie-card': MovieCard 
}
// the above is the same at the below in Vue
ponents: {
  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 ponents, 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 ponent. In my case, I resolved my problem by adding a character s, not any name.