How To Create A Role Based Menu Using Vue.js

In this article, we will learn how to create role based menu using Vue.js

Step 1: Create a new Vue project:

vue create role-based-menu

Step 2: Install require packages:

npm i bootstrap vue-router

Step 3: Create a login.vue file and add the following in it:

<template>
  <div class="container">
    <h2>Login</h2>
    <form>
      <div class="form-group pt-3">
        <label for="username">Username</label>
        <input
          type="text"
          name="username"
          v-model="userName"
          class="form-control"
        />
      </div>
      <div class="form-group pt-3">
        <label htmlFor="password">Password</label>
        <input
          type="password"
          name="password"
          v-model="password"
          class="form-control"
        />
      </div>
      <div class="form-group pt-3">
        <button class="btn btn-primary" @click="login">
          <span>Login</span>
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      userName: '',
      password: '',
    };
  },
  methods: {
    login() {
      if (this.userName === 'admin' && this.password === 'admin@123') {
        localStorage.clear();
        localStorage.setItem('userName',this.userName);
        localStorage.setItem('isAdmin', true);
        this.$router.push('/dashboard');
      }
      if (this.userName === 'user' && this.password === 'user@123') {
        localStorage.clear();
        localStorage.setItem('userName',this.userName);
        localStorage.setItem('isUser', true);
        this.$router.push('/dashboard');
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Step 4: Create a dashboard.vue file and add the following in it:

<template>
  <div class="container">
    <header-view></header-view>
    <h1 class="p-4">Dashboard</h1>
    
  </div>
</template>
<script>
import HeaderView from '../components/header.vue';
export default {
  name: 'Dashboard',
  components: {
    HeaderView,
  },
};
</script>

Step 5: Open main.js file and add the following in it:

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router'
import Routes from './router/index';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Vue.config.productionTip = false;

Vue.use(VueRouter);
const router=new VueRouter({
  mode:'history',
  routes:Routes,
});
new Vue({
  render: (h) => h(App),
  router,
}).$mount('#app');

Step 6: Create a index.js file and add the following in it:

import Login from '../components/login';
import Dashboard from '../components/dashboard';
import Admin from '../components/admin';
import User from '../components/user';

export default [
  {
    path: '/',
    name: 'Login',
    component: Login,
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
  },
  {
    path: '/user',
    name: 'User',
    component: User,
  },
];

Step 7: Create a header.vue file and add the following in it:

<template>
  <div class="d-flex justify-content-center">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <router-link to="/dashboard" class="nav-link"
                >Dasboard</router-link
              >
            </li>
            <li class="nav-item" v-if="!isUser">
              <router-link to="/admin" class="nav-link">Admin</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/user" class="nav-link">UserDetails</router-link>
            </li>
            <li>
              <button class="btn btn-danger" @click="logout">Logout</button>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isUser: localStorage.getItem('isUser')
        ? localStorage.getItem('isUser')
        : false,
    };
  },
  methods: {
    logout() {
      localStorage.clear();
      this.$router.push('/');
    },
  },
};
</script>

Step 8: Create an admin.vue file and add the following in it:

<template>
  <div class="container">
    <header-view></header-view>
    <h1 class="p-4">Admin</h1>
    <h3>Welcome {{ userName }}</h3>
  </div>
</template>
<script>
import HeaderView from '../components/header.vue';
export default {
  components: {
    HeaderView,
  },
  data() {
    return {
      userName: localStorage.getItem('userName'),
    };
  },
};
</script>

Step 9: Create an user.vue file and add the following in it:

<template>
  <div class="container">
    <header-view></header-view>
    <h1 class="p-4">User</h1>
    <h3 v-if="userName == 'user'">
      Welcome <span>{{ userName }}</span>
    </h3>
    <h3 v-else>UserDetails</h3>
  </div>
</template>
<script>
import HeaderView from '../components/header.vue';
export default {
  components: {
    HeaderView,
  },
  data() {
    return {
      userName: localStorage.getItem('userName'),
    };
  },
};
</script>

Step 10: Open App.vue file and add the following in it:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
};
</script>

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

Code in action: