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.
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>
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>