Vue 3 issues importing / resolving component-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

You need to use components like this

<template>
  <header />
</template>

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

export default {
    components: {
        "header": Header
    },
  setup() {
    return {
      Header,
    };
  },
};
</script>

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

CodePudding user response：

In your Header.vue replace your div tag with header tag, because you are styling header tag in your CSS and not div tag.

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