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>