With the Composition API in Vue 3, importing and using child components has become much more easier than before.

Consider an example where we have two components named ParentComponent.vue and ChildComponent.vue inside the same directory. The ways of importing the ChildComponent in the ParentComponent would be like these in the Options API vs Composition API.

Importing a component in Options API

  <script>
  import ChildComponent from './ChildComponent.vue';
  export default {
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  }
  </script>

  <template>
    <div>
      <h2>Parent component</h2>
      <ChildComponent/>
    </div>
  </template>
Code language: HTML, XML (xml)

Importing a component in Composition API

  <script setup>
  import ChildComponent from './ChildComponent.vue';
  </script>

  <template>
    <div>
      <h2>Parent component</h2>
      <ChildComponent/>
    </div>
  </template>
Code language: HTML, XML (xml)

We can see that in the Composition API, we no longer need to register the components separately in the components: {} option. Whenever we import some component in another component, the former component is automatically available for use in the later component.

If you have any doubts or suggestions, sound off in the comments below!