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.
Table of Content
- Using router-link-exact-active class
- Conditional class binding
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> |
Javascript
// 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; |
Javascript
// main.js file const { createApp } = require( 'vue' ); import App from './App.vue' ; import createRouter from './router' ; createApp(App). use(createRouter()). mount( '#app' ); |
Javascript
<!-- views -> AboutView.vue file --> <template> <h1>This is About Page</h1> </template> <script> export default {}; </script> |
Javascript
<!-- views -> ContactView.vue file --> <template> <h1>This is Contact Page</h1> </template> <script> export default {} </script> |
Javascript
<!-- 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> |
Javascript
// 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; |
Javascript
// main.js file const { createApp } = require( 'vue' ); import App from './App.vue' ; import createRouter from './router' ; createApp(App).use(createRouter()).mount( '#app' ); |
Javascript
<!-- views -> AboutView.vue file --> <template> <h1>This is About Page</h1> </template> <script> export default {}; </script> |
Javascript
<!-- views -> ContactView.vue file --> <template> <h1>This is Contact Page</h1> </template> <script> export default {} </script> |
Javascript
<!-- views -> HomeView.vue file --> <template> <h1>This is Home Page</h1> </template> <script> export default {} </script> |
Output:
Contact Us