I am starting to learn vuejs by building a simple website. Right now I have made three components

• Header
• Navigation
• Topbar

I want to render navigation and topbar inside header, so I can call the header component inside every page (I haven't found a way to make a "layout" or something, that every page uses).

Header.vue

<template>
    <header id="topNav">
      <topbar />
      <navigation />
    </header>
</template>

<script lang="ts">
import Vue from 'vue'
import navigation from '../navigation/navigation.vue'
import Topbar from '../topbar/topbar.vue'
export default Vue.extend({
  components: { Topbar, navigation },
    
})
</script>

<style scoped>
    #topNav{
        background-color: #fff;
        -webkit-box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
        box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
        position: fixed;
        left: 0;
        right: 0;
        top:0;
        z-index: 1001;
        padding: 0 12px;
    }
</style>

Topbar

<template>
    <div id="topBar">
        <h2>this is the topbar</h2>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    
})
</script>
<style scoped>
    #topBar{
        border-bottom: 1px solid #dee2e6;
        height:70px;
        padding: 0 10px;
        z-index: 100;
        position:fixed;
        left:0;
        right:0;
    }
</style>

And when i call it on for example my home page (index.vue) nothing renders.

<template>
  <main>
    <header />
    <div id="page-content">
      <h1>Home</h1>
    </div>
  </main>
  
</template>

<script lang="ts">
import Vue from 'vue'
import Header from '../components/header/header.vue'

export default Vue.extend({
  components: {Header  },
  name: 'Home'
})
</script>
<style scoped>
  
</style>

I've tried reading the documentation and search around, but haven't been able to figure out what i'm doing wrong.

Any ideas, links or tips?

CodePudding user response：

You have named your component header, which is a standard html element. Therefore the browser will probably just try to render a standard <header> element instead of your component.

Therefore it is advised to always use multi word component names. See docs here. You can use eslint in your code editor to help you spot these mistakes.

PS: if you are learning vue from the start, I would advise you to use the composition api with the script setup approach, as it makes things easier and provide the opportunity to write clearer code as components grow.

CodePudding user response：

Since the question is tagged with a Nuxt tag, I'll recommend looking into Nuxt layouts: https://nuxtjs.org/docs/concepts/views#layouts

There is a default named default that you could use by creating the file /layouts/default.vue and passing the components inside of it.

You can of course change that with a layout: 'yolo' if you want another 'yolo` layout.

Pro tip: you don't need to import the components yourself in Vue