Unknown custom element

Question

I want to create a tab in vuejs but all i get is an error, Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I have already import all needed components including the tab component but still get the error.

Any help will be appreciated

Profile Component

<template>
  <layout>
    <div class="mt-4 md:mt-10">
        <div class="mx-auto px-3 sm:px-6 xl:px-16">    
            <div class="flex flex-wrap justify-between">
                <div class="md:w-2/6 lg:w-1/5 w-full mb-6 lg:mb-0 lg:block md:order-last lg:order-none">
                    <div class="bg-white rounded shadow">   
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="text-center justify-center flex-col">
                                <div class="border-t border-b flex justify-center items-center">
                                    <p class="px-3 py-1 flex-col">
                                        <span class="font-bold text-sm">543</span> 
                                        <span class="text-gray-500 text-xs">Posts</span>
                                    </p>
                                    <p class="px-3 border-l py-1 flex-col">
                                        <span class="font-bold text-sm">436</span> 
                                        <span class="text-gray-500 text-xs">Following</span>
                                    </p>
                                </div>
                            </div>
                        </div>   
                    </div>
                    <div class="p-4 bg-white shadow mt-4">
                        <div class="flex items-center">
                          <i data-feather="map-pin" class="text-gray-600 w-4 h-4"></i>
                          <span class="text-sm ml-3 font-semibold text-gray-800">Lagos, Nigeria</span>
                        </div>
                                                <div class="flex items-center mt-2">
                                                    <i data-feather="calendar" class="text-gray-600 w-4 h-4"></i>   
                                                    <span class="text-sm ml-3 font-semibold text-gray-800">Joined, January 2018</span>
                        </div>
                        <div class="flex items-center mt-2">
                                                    <i data-feather="link" class="text-gray-600 w-4 h-4"></i>   
                                                    <span class="text-sm ml-3 font-semibold text-gray-800 hover:underline"><a href="#">https://twingle.io</a></span>
                        </div>
                       <div class="flex items-center mt-2">
                                                    <i data-feather="globe" class="text-gray-600 w-4 h-4"></i>  
                                                    <span class="text-sm ml-3 font-semibold text-gray-800 hover:underline"><a href="#">https://omike.me</a></span>
                        </div>
                    </div>
                    <div class="p-4 bg-white shadow mt-4">
                        <div>
                            <p class="font-bold">My Skills</p>
                        </div>
                        <div class="mt-3">
                            <ul class="inline">
                                <li class="inline mr-2">Javascript</li>&middot;
                                <li class="inline mr-2">PHP</li>&middot;
                                <li class="inline mr-2">Laravel</li>&middot;
                                <li class="inline mr-2">NodeJS</li>&middot;
                                <li class="inline">VueJS</li>
                            </ul>
                        </div>
                    </div> 
                </div>
                <div class="w-full md:w-3/7 lg:w-1/2">
                    <tabs>
                                            <tab name="Services" :selected="true">
                                                <h1>What we do</h1>
                                            </tab>
                                            <tab name="Pricing">
                                                <h1>How much we do it for</h1>
                                            </tab>
                                            <tab name="About Us">
                                                <h1>Why we do it</h1>
                                            </tab>
                                        </tabs>
                </div>
                <div class="hidden lg:block md:w-2/6 lg:w-1/4">
                    <Info/>
                </div>
            </div>  
        </div>
    </div>        
    </layout>  
</template>
<script>

import Info from '@/Shared/Info'
import Layout from '@/Shared/Layout'
import UserFeed from '@/Components/User/UserFeed'
import Tabs from '@/Components/Tabs'

export default {
    components:{
        Info,
            UserFeed,
        Layout,
        Tabs,
    },
}
</script>

Tabs Component

<template>
    <div>
        <div class="bg-white shadow rounded px-4 mb-6">
           <ul class="list-reset flex pro-tab">
               <li class="pro-tab-active py-2">Posts</li>
               <li class="ml-6 py-2">Achievements</li>
               <li class="ml-6 py-2 hidden sm:block">Activities</li>
           </ul>
        </div>
        <div class="tab-details">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Tab from '@/components/Tab'

export default {

    component:{Tab},

    mounted(){
        console.log(this.$children);
    }


}
</script>

<style>

</style>

Tab Component

    <template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Answer 1

Try adding the Tab component to the ProfileComponent:

 components:{
        Info,
        UserFeed,
        Layout,
        Tabs,
        Tab
    },

Even though you've already added it to the Tabs components object, that's not accessible to the template processor when parsing the ProfileComponent, which is where Tab appears. You should also be able to remove the import from the Tabs component.