How to Style an Active Link in VueJS ?

In single-page applications effective navigation becomes crucial. In this article, we’ll explore how to style active links in Vue.js using the popular routing library, Vue-router.

Steps to Setup the Project Environment

Step 1: Create a VueJS application using the below command.

 npm create vue@latest 

Step 2: Navigate to the project that you have just created by this command.

cd your-project-name

Step 3: Run this command to install all packages

npm install

Step 4: Now, Set up vue router using below command.

npm install vue-router@4

Step 5: Create a folder inside src named views. Inside it, we will put all our components.

Step 6: Create components inside the views folder as listed below:

• AboutView.vue
• ContactView.vue
• HomeView.vue

Step 7: Create another file inside src named router.js. It will handle the routes of the application.

Step 8: Now Create a navbar inside the App.vue file to navigate easily around the webpage.

Step 9: Add the below code to main.js. It is the starting point of our application.

// main.js file
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
createApp(App).use(createRouter()).mount('#app');

Project Structure:

Using router-link-exact-active class

Vue-router automatically adds a class called router-link-active to the active router-link in your code. You can use this class to style the active link and do modifications in your project.

Syntax:

.router-link-exact-active {
  //your styles here
}

Example: The below JavaScript codes will help you implement the router-link-exact-active class to apply style in active links.

Output:

Conditional class binding

You can conditionally bind a class based on the route using Vue.js class binding. We adjust the condition in the “:class” binding based on the specific requirements.

NOTE: All the other files will be same as in the previous example except the App.vue file.

Syntax:

<RouterLink to="/" class="{ 'active-link': $route.path === '/' }>Home</RouterLink>
.active-link {
  // Your styles here 
}

Example: The below JavaScript codes will help you implement the conditional class binding method to apply style in active links.

Output:

Commit to GfG's Three-90 Challenge! Purchase a course, complete 90% in 90 days, and save 90% cost click here to explore.