How to add header in Nuxtjs


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

The following Nuxtjs posts may help you

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.