How to create a responsive navbar in vue.js with bootstrap

Table Of Contents

    * [Chapter 1](Introduction)
    * [Chapter 2](Setting up vue)
    * [Chapter 3](Using bootstrap to configure the vue router)
    * [Chapter 4](Conclusion)

Chapter 1: Introduction

Do you want to create a responsive navbar in Vuejs? Here's a guide on how to port bootstrap navbar to vuejs without any hassle.

Brief Introduction Before We Get Started

Vue.js is a JavaScript progressive framework that helps in creating web interfaces and a single-page application. Vue.js comes with a lot of features that can dramatically reduce your development time, one of them is the Vue router, if you're coming from a react background, you will have to set up all this yourself but with vue everything comes to make your life much easier. You can read up here Vue Router to learn more of all its features. The Vue router renders the anchor tag with the correct href by default. You can read up on Vue router-link

To get started here are the tools you'll be needing,

Node
npm
code editor
vue CLI

To ensure proper installation of the aforementioned tools, follow these steps for downloading and verifying them:

Node: To download Node on your PC, you can visit the official Node website here to learn more about the installation process. To verify if Node is installed correctly, follow these steps:

Open the Command Prompt on your PC.
Type the command "node -v".
Press Enter.

This command will display the version number of Node installed on your system. You should see something similar to v14.17.2

Npm: Npm is included by default when you download Node. To check the version of npm installed on your system, follow these steps:

Open your command prompt or terminal.
Type the command npm -v.
Press Enter.

This command will display the version number of npm installed on your system. You should see something similar to 6.14.13.

Code editor: There are lots of code editors, for this tutorial I will be using the visual studio code editor. You can check here Vscode setup to learn more about it.

Vue CLI: The Vue CLI only needs to be run once on your PC. To install this, you should run this on your terminal or cmd using the npm or yarn

npm install -g @vue/cli
        OR
yarn global add @vue/cli

To check if vue is correctly installed , type vue--version, This should display the version number you currently have, so you'll see something like this @vue/cli 4.5.13

Chapter 2: Setting up Vue

Creating our project folder

On your command prompt, navigate into the folder you will like to save your project and type vue create (project name here)

In this tutorial, our project name is titled navbar. We therefore, proceed to write vue create navbar on our command prompt as shown below

C:\Users\Desktop\code\T-Projects\my projects> vue create navbar

The next thing it displays is

Vue CLI v4.5.13
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features

Here we click on Manually select features to be able to choose the feature we want on our projects. You can select and deselect by using the arrow keys to move up and down & the space bar to choose. Here we will be selecting the vue router as this is what we need to create our navbar

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
() Choose Vue version
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

We'll be using the vue 3 option, therefore we can select the vue 3.x since that's the latest release.

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router
? Choose a version of Vue.js that you want to start the project with
2.x
3.x

Once the version is selected, it pops up a few 1-2 more questions after which it runs the process. After it successfully runs, it is going to display this below

Successfully created project navbar.
Get started with the following commands:

$ cd navbar
$ npm run serve

Now let's open the created project in our vscode editor. You can just type this (code .) after the commands generated .This opens the project on vscode editor, from here we can see all the dependencies installed inside the package.json file.

Chapter 3: Using bootstrap to configure the vue router

The first thing to be done is to connect the bootstrap to our project. This can be in two ways

1) By using the npm/yarn to install bootstrap on the terminal
2) By attaching the bootstrap CDN to the index.html file
We will be going by the second option; you can get the Bootstrap Cdn by visiting the bootstrap website. The bootstrap cdn connected to our project is shown below

After successfully adding the bootstrap cdn, we can then use the bootstrap framework in our code. However our major concern in this tutorial is the navbar, therefore we will be extracting one of the bootstrap navbar templates from their websites. First of all, let's run the command npm run serve on our vscode terminal to see what we got

Yippee, our vue.js app has been launched. Taking a look at the top we have the Home and about, It was created from the router. That's one of the benefits of using a js framework like vue. It automatically creates a navbar with styles for us (Not a responsive one). Let's add two more pages to the views folder. Here will be adding careers & login for a better understanding of how the navbar works.

Now an additional link is on the screen, the career & login (To do this, create a new file in the views, name it career & login respectively, go to your index.js & add the routes . Let’s come back to the app.vue and add it to the div id = "nav"). Vue has helped us create a navbar, not just a responsive type. Also, Vue router automatically comes with css styles for the exact active navlinks.

Going back to our components folder, we have a helloworld.vue which was what generated the whole content on the above image. This won't be needed so we'll delete it from the component folder and the components in the home.vue can also be erased. Once this is done, all we are left on the screen will be the Home | About | Careers | Contact navigation

Let's visit the bootstrap website to copy one of their navbar templates. You can visit Bootstrap template to choose.

The one to be use for this tutorial is shown below

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav> 

The output of the navbar code (Desktop & Mobile) is shown below

Now that we have picked our desired bootstrap navbar template we can then integrate it into our Vue.js files.

Firstly, let's create the files in the views components. I will be adding four pages as shown below ( Home, About, Careers & Contact )

Moving in to our Index.js files, let's creates the path as shown below

import { createRouter, createWebHistory } from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue';
import Contact from '../views/Contact.vue'
import Careers from '../views/Careers.vue'


const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },

  {
    path: '/about',
    name: 'About',
    component:About
  },
  {
    path: '/careers',
    name: 'Careers',
    component:Careers
  },
  {
    path: '/contact',
    name: 'Contact',
    component:Contact
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Our App.vue initial state is shown below.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>


</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

The next step is to add the navbar items to the router links but before this, here is what our template looks like

<template>
  <div id="nav">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo Here</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Careers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav> 
 </div>
  <router-view/>
</template>

The following instructions are to be followed in changing our template.
1) Change the ul tag to a div tag

2) Remove the li class : On each of the li tags, there is a class named nav item, copy it and place it on the anchor tag & delete the li tag

3) Replace the anchor tag with the router link

After following the three(3) steps above, here is the new template

<template>
<template>
  <div id="nav">
  <nav class="container navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Logo Here</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav mr-auto">
            <router-link to="/" class="nav-item nav-link">Home</router-link>
            <router-link to="/About" class="nav-item nav-link">About</router-link>
            <router-link to="/Careers" class="nav-link">Careers</router-link>
            <router-link to="/Contact" class="nav-link">Contact</router-link>
        </div>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
</nav>
 </div>
  <router-view/>
</template>

Now, our navbar looks nice, check the web & mobile version visuals below

In addition, the router link has helped us in styling the exact active classes, by doing so it has helped in saving us from styling the navbar separately. I have updated the styles by adding padding, background color, border radius & text-align: center to the styling

Initial CSS styles

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

Additional styles added

#nav {

  padding: 30px;

  text-align: center;

}

#nav a {

  font-weight: bold;

  color: #2c3e50;

}

#nav a.router-link-exact-active {

  color: whitesmoke;

  background: crimson;

  border-radius: .5rem;

}

Chapter 4: Conclusion

In this article, we have been able to create a responsive navbar which can be use in our vue.js application. You can take it further by customizing to your needs & I hope you find it useful. Let me know what you think in the comment section. Also the source code can be found here Github feel free to access it

Happy Coding!