How to Style an Active Link in VueJS ?
Last Updated :
24 Apr, 2025
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.
JavaScript
<!-- App.vue file -->
<script>
import
{
RouterView,
RouterLink,
useRouter,
useRoute
} from 'vue-router';
const router = useRouter();
const route = useRoute();
export default {
name: '#app',
};
</script>
<template>
<nav>
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/contact">Contact</RouterLink> |
<RouterLink to="/about">About</RouterLink>
</nav>
<RouterView />
</template>
<style>
nav {
width: 100%;
font-size: 24px;
}
nav a {
display: inline-block;
padding: 5px 10px;
margin: 10px;
}
nav a.router-link-exact-active {
background-color: green;
color: #fff;
text-decoration: none;
}
</style>
// router.js
import {
createRouter,
createWebHistory }
from 'vue-router';
import HomeView
from './views/HomeView.vue';
import ContactView
from './views/ContactView.vue';
import AboutView
from './views/AboutView.vue';
const router = () =>
createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
},
{
path: '/contact',
name: 'contact',
component: ContactView,
},
],
});
export default router;
// main.js file
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
createApp(App).
use(createRouter()).
mount('#app');
<!-- views -> AboutView.vue file -->
<template>
<h1>This is About Page</h1>
</template>
<script>
export default {};
</script>
<!-- views -> ContactView.vue file -->
<template>
<h1>This is Contact Page</h1>
</template>
<script>
export default {}
</script>
<!-- views -> HomeView.vue file -->
<template>
<h1>This is Home Page</h1>
</template>
<script>
export default {}
</script>
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.
JavaScript
<!-- App.vue file -->
<script>
import {
RouterView,
RouterLink,
useRouter,
useRoute }
from "vue-router";
const router = useRouter();
const route = useRoute();
export default {
name: '#app',
};
</script>
<template>
<nav>
<RouterLink
to="/"
:class=
"{ 'active-link': $route.path === '/' }">
Home
</RouterLink> |
<RouterLink
to="/contact"
:class=
"{ 'active-link': $route.path === '/contact' }">
Contact
</RouterLink> |
<RouterLink
to="/about"
:class=
"{ 'active-link': $route.path === '/about' }">
About
</RouterLink>
</nav>
<RouterView />
</template>
<style>
nav {
width: 100%;
font-size: 24px;
}
nav a {
display: inline-block;
padding: 5px 10px;
margin: 10px;
}
nav a.active-link {
background-color: green;
color: #fff;
text-decoration: none;
}
</style>
// router.js
import {
createRouter,
createWebHistory }
from 'vue-router';
import HomeView
from './views/HomeView.vue';
import ContactView
from './views/ContactView.vue';
import AboutView
from './views/AboutView.vue';
const router = () =>
createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
},
{
path: '/contact',
name: 'contact',
component: ContactView,
},
],
});
export default router;
// main.js file
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
createApp(App).use(createRouter()).mount('#app');
<!-- views -> AboutView.vue file -->
<template>
<h1>This is About Page</h1>
</template>
<script>
export default {};
</script>
<!-- views -> ContactView.vue file -->
<template>
<h1>This is Contact Page</h1>
</template>
<script>
export default {}
</script>
<!-- views -> HomeView.vue file -->
<template>
<h1>This is Home Page</h1>
</template>
<script>
export default {}
</script>
Output:
Similar Reads
How To Add Styling To An Active Link In NextJS?
Styling active links is important for enhancing user navigation by providing visual feedback on the current page or section. In Next.js, you can achieve this by using the Link component from next/link and applying styles conditionally based on the active route. In this article, we will learn about h
3 min read
How to Style Links in CSS ?
Styling links in CSS is one of the fundamentals in web design that helps in creating an interactive and pleasant user experience through navigation. Links are core components for web pages, and using CSS, you can easily come up with the kind of look you want in terms of the overall appearance of the
7 min read
How to binding inline styles in Vue.js ?
Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Every Web application needs HTML CSS styles for presenting a better User Interface. Vue.js allows you to dynamically render styling with data model structure. Usual
4 min read
How to create instance in Vue.js ?
A Vue.js Instance refers to a Vue constructor's instance in the Vue application. It acts as a container that holds your application's data and methods. Vue.js implements the Component-Based Architecture that enables the generation of these instances, in order to represent and manage individual compo
2 min read
How to Bind Attributes in VueJS ?
In Vue.JS, the attribute binding allows us to properly manipulate the HTML elements that are based on the Vue Data properties and the expressions. We can bind these attributes using 2 different methods as listed below:Table of ContentApproach 1: Using v-bindApproach 2: Using shortHandApproach 1: Usi
2 min read
How to Bind the Background Image in VueJS ?
In VueJS, the background images can be set from different types of properties like data property, computed property, or directly from an image source. In this article, we will see the different approaches to bind the background image in VueJS as listed below: Table of Content Using Inline StyleUsing
2 min read
How to Include CSS Files in Vue2 ?
VueJS is one of the greatest frameworks for JavaScript similar to ReactJS. The user interface layer is designed with VueJS. When working with Vue2, styling your components is an essential aspect of creating a visually appealing and user-friendly application. In Vue2 you can include CSS files in vari
4 min read
How to use Link Component in React JS?
Material-UI provides a set of components that can be seamlessly integrated with React to create visually appealing and functional navigation elements. The Link component allows you to easily customize anchor elements with our own theme colors and typography styles. Material UI for React has this com
2 min read
How to Add Custom Fonts in VueJS ?
Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. Custom fonts can bring uniqueness and visual appeal to your Vue.js application
2 min read
How to Add List Items Onclick in VueJS ?
In VueJS, we can make dynamic applications by adding list items on click. This allows for interactive user experiences where new items can be added to a list with a click event. The below approaches can be used to accomplish this task. Table of Content By creating a custom method to Add ItemsUsing I
2 min read