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

[dharmatv]

<template>
  <div id="app">
    <!-- <ac-simple-card></ac-simple-card> -->
    <vuep :template="code"></vuep>
  </div>
</template>

<script>
import Vue from 'vue'
import Vuep from 'vuep'
import 'vuep/dist/vuep.css'

Vue.use(Vuep /*, { codemirror options } */)
export default {
    name: 'LiveEditor',
      created: function () {
    this.code = `<template><div>Hello, {{ name }}!<ac-gravatar :avatar_props="{ size: 100, rounded: false }" email="example@mail.com"/></div></template><script>module.exports = {data: function () {return { name: 'Vue' }}}`;
    }
}
</script>

<style>
</style>

ERROR

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

found in

--->


at src/components/LiveEditor.vue
at src/App.vue

I am getting above ERROR please help me, anyone,

[kalynrobinson]

You need to provide Vuep a scope for it to pick up components.

<script>
import Vuep from "vuep";
import { Gravatar } from "path/to/component";

export default {
    name: "LiveEditor",
    components: {
        Vuep
    },
    props: ["template"],
    data() {
        return {
            scope: { Gravatar },
            source: "..."
        };
    }
};
</script>

<template>
    <vuep :template="source" :scope="scope" />
</template>