Layout and header in Nuxt

How to add a custom header in Nuxt

Sat Jun 19 2021

Nuxtjs is a framework which simplifying the development of the Vue project.

Lets learn how to add a cool Header component which will displayed all of the routes in our project.

Component

The component folder holds our custom vue components, lets create a Header component first

Our simple Header look like this

<template>
  <div>
    <nav>
      <nuxt-link  to="/" >
        <div class="navigation\_\_logo">BlueBird</div>
      </nuxt-link>
      <div class="navigation\_\_user"> @user</div>
    </nav> 
  </div>
</template>
<script>
export default {
  name: "Header",
  created() {},
  data() {
    return {};
  },
  props: {},
  methods: {},
  components:{

  }
  };
</script>

<style scoped>
.header {
  background-color: red;
}
nav {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 5%;

  background-color: crimson;

  color: white;
}

nav.navigation\_\_logo {
  font-weight: bold;

  font-size: 24px;
}
a{
  text-decoration:none;
  color: white;
}
.navigation\_\_user {
  font-weight: bold;
}
</style>

Layout

The default.vue under Layout folder is responsible for structuring the site layout, we can add our component before the Nuxt component as follow, leave everything else intact.

<template>
  <div>
    <Header/>
    <Nuxt />    
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
export default {
  components:{
    Header
  }
}
</script>

We can also create additional components and import and place them in the default.vue

Layout and header in Nuxt

Component

Layout

Comments