Vue - Using component inside other component

Question

I am trying to use a search-bar component inside my home.vue component but I can't figure out why its not working.

Folder structure

App.vue
 components
   home.vue
   query.vue
   common
    HeaderBar.vue
    SideBar.vue
    SearchBar.vue

App.vue

script

  import HeaderBar from './components/common/HeaderBar'
  import SideBar from './components/common/SideBar'

  export default {
    name: 'App',
    components: {
      HeaderBar,
      SideBar
   },

html

<template>
  <div id="app">
   <HeaderBar></HeaderBar>
   <SideBar></SideBar>
   <main class="view">
     <router-view></router-view>
   </main>
  </div>
</template>

This above works just fine.

Home.vue

script

 import SearchBar from './common/SearchBar'

 export default {
   name: 'Home',
   components: SearchBar
 }

html

<template>
  <section class="home">
    <div class="hero-content">
      <h1>Hello World</h1>
      <SearchBar></SearchBar>
    </div>
  </section>
</template>

I get those errors:

[Vue warn]: Invalid component name: "_compiled". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

[Vue warn]: Invalid component name: "__file". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

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

found in

---> <Home> at src\components\Home.vue
       <App> at src\App.vue
         <Root>

Gentlefolk

did you miss the </section> in the template? – Ib

I edited it, just missed it in my question. – Gentlefolk

components: { SearchBar } ? – Ib

You should have a main.js somewhere in your project where you specify the names of all the components you are using. It seems like Vue can't recognize what component you want to use. It should be something like this: Vue.component('app-searchbar', SearchBar); See here: vuejs.org/v2/guide/components-registration.html – Vibration

This works now, like it should! Thanks.But for my understanding... I imported now the component in main.js import SearchBar from './components/common/SearchBar' and then Vue.component('app-search', SearchBar); . So now its registered it globally and I can remove the import and components: {} in my app.vue ? – Gentlefolk

Does this answer your question? VueJs: Using component inside another component – Gomez

Answer 1

By default you have to use it with kebab-case in template tag.

Register component as of PascalCase notation. Use it in component with kebab-case notation. Simple as that!

Case 1 : Default

<template>
 <section class="home">
  <div class="hero-content">
   <h1>Hello World</h1>
  <search-bar></search-bar>
 </div>
 </section>
</template>
<script>
import SearchBar from './common/SearchBar'
export default{
 components: SearchBar
}
</script>

Case 2 : Customized

Or you want to register it with your way(by applying custom name) just change this code :

export default{
 components: {
  'search-bar' : SearchBar 
 }
}

UPDATE: This answer was provided in reference to vue version 2.x. I am unaware of vue 3.x and haven't read 3.x docs. You can always submit an edit draft for vue 3.x compatible solution. Thanks!

Fatherless

Edited answer - This is camelCase. This is PascalCase. – Androsphinx

Answer 2

Script of Home.vue should be like following

import SearchBar from './common/SearchBar'

export default {
   name: 'Home',
   components: {
       'SearchBar': SearchBar
   }
}

If you SearchBar component already have a name property values SearchBar, the 'SearchBar' filed name is not required.

Suspensor

Answer 3

May or May not help you, but I did a silly mistake: as

import ServiceLineItem from "@/Pages/Booking/ServiceLineItem";

export default {
  components: ServiceLineItem,
};

As it should be like :

import ServiceLineItem from "@/Pages/Booking/ServiceLineItem";

export default {
  components: {
    ServiceLineItem,
  },
};

Shock