Vue 3 issues importing / resolving component

Hi new to Vue and learning through tutorials. I have created a component Header.vue and try to import it to App.vue. This is the structure: code structure

here is App.vue:

<template>
  <Header />
</template>

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

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

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Fira Sans", sans-serif;
}
body {
  background: #eee;
}
</style>

Here is the Header.vue component:

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

<script>
export default {

};
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #313131;
  border-bottom: 5px solid #ffce00;
}
header h1 {
  color: #eee;
  font-size: 28px;
}
header .total-income {
  font-family: "Fira Code", "Fira Sans", sans-serif;
  background-color: #ffce00;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  padding: 5px 10px;
  min-width: 100px;
  text-align: center;
  border-radius: 8px;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
}
</style>

I am getting the styling from the App.vue but the component isn't resolving. In the console I get this error: error message

What I have tried is stack overflow and google search based on the error message text.

Either I am not searching correctly, or I do not have enough experience at this point to identify the issue causing this problem.

Education on how to resolve this would be greatly appreciated.

Plain Vue

You need to register components in the components option.

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

See the docs.

Note that including a valueless entry in a JavaScript object (e.g. Header) is ES6 syntax for Header: Header.

script setup

As Vue 3 has matured over the years, there is less and less reason to use the Options API (less and less Vue 2 code exists or remains relevant). Without the need for the Options API (using the Composition API), all code is written in the setup hook, so script setup has taken up a strong hold as it has less boilerplate. When using script setup, simply importing the component is enough.

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