[Vue warn]: Failed to resolve component: Header at <App>

Question

My component doesn't render and I get the above warning in the console. This is my first Vue project, so I am struggling to understand where the issue lies.

This is my App.vue:

<template>
  <Header />
</template>

<script>
import Header from "./components/Header";

export default {
  setup() {
    return {
      Header,
    };
  },
};
</script>

And this is the Header component, I am trying to render, Header.vue:

<template>
  <header>
    <h1>Income Tracker</h1>
    <div class="total-income">€0</div>
  </header>
</template>

<script>
export default {};
</script>

Any idea where I am going wrong?

Answer 1

Like in Vue 2:

 <script> import Header from "./components/Header"; export default { components { Header }, }; </script>