The nice thing about components is that we can reuse them, mix and match, and we can create components that build on top of other components.

For example, a Form component might use an Input component, a CheckBox component, a Label component and so on.

In a Blog application, you might have a Sidebar component which includes a PostList component, and a Search component.

When a component wants to use another component, it must first import it using:

import Search from './Search'

the location depends on how you organized the files in the project directory. If the component lives in the same folder, ./ works. Otherwise, you might need to navigate the filesystem using ../../folder/Input.

Once you import it, you need to add it to the components property of the Component, so that it’s available for use inside the template.

In a Single File Component, here’s what you would do:

<script>
import Search from './Search'

export default {
  name: 'Sidebar',
  components: {
    Search
  }
}
</script>

Now you can reference the component in the template:

<template>
  <h2>Sidebar</h2>
  <Search />
</template>

<script>
import Search from './Search'

export default {
  name: 'Sidebar',
  components: {
    Search
  }
}
</script>