How to Create an Admin Panel Using Vue.js (Step-by-Step Guide)

Creating an admin panel using Vue.js is a great way to manage users, products, or any type of data efficiently. This guide will help you build a basic admin panel using Vue 3, Vue Router, and Vuetify for a modern UI.

1. Prerequisites

Before starting, make sure you have the following installed:

• Node.js & npm (Download from nodejs.org)
• Vue CLI (Install using npm install -g @vue/cli)

2. Setting Up the Vue Project

Run the following command in your terminal to create a Vue project:

vue create vue-admin-panel
cd vue-admin-panel
npm install vue-router@4 vuex vuetify

3. Install Vuetify (UI Library)

vue add vuetify

4. Setup Vue Router for Navigation

Create a router/index.js file inside the src directory and add:

import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import Users from '../views/Users.vue';
import Login from '../views/Login.vue';

const routes = [
  { path: '/', redirect: '/dashboard' },
  { path: '/dashboard', component: Dashboard },
  { path: '/users', component: Users },
  { path: '/login', component: Login },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Modify main.js to use the router:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

const app = createApp(App);
app.use(router);
app.use(Vuetify);
app.mount('#app');

5. Create a Layout Component

Inside src/components, create a file AdminLayout.vue:

<template>
  <v-app>
    <v-navigation-drawer app>
      <v-list>
        <v-list-item to="/dashboard" title="Dashboard" />
        <v-list-item to="/users" title="Users" />
      </v-list>
    </v-navigation-drawer>
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

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

6. Create Admin Pages

Dashboard.vue

<template>
  <v-container>
    <h1>Dashboard</h1>
    <p>Welcome to the admin panel.</p>
  </v-container>
</template>

Users.vue

<template>
  <v-container>
    <h1>Users</h1>
    <v-data-table :headers="headers" :items="users"></v-data-table>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Email', value: 'email' }
      ],
      users: [
        { name: 'John Doe', email: '[email protected]' },
        { name: 'Jane Doe', email: '[email protected]' }
      ]
    };
  }
};
</script>

7. Implement Authentication (Login Page)

Login.vue

<template>
  <v-container>
    <v-card class="mx-auto pa-5" width="400">
      <v-card-title>Login</v-card-title>
      <v-text-field v-model="email" label="Email"></v-text-field>
      <v-text-field v-model="password" label="Password" type="password"></v-text-field>
      <v-btn @click="login" color="primary">Login</v-btn>
    </v-card>
  </v-container>
</template>

<script>
export default {
  data() {
    return { email: '', password: '' };
  },
  methods: {
    login() {
      if (this.email === '[email protected]' && this.password === 'password') {
        this.$router.push('/dashboard');
      } else {
        alert('Invalid credentials');
      }
    }
  }
};
</script>

8. Protect Routes with Navigation Guards

Modify router/index.js:

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('auth');
  if (to.path !== '/login' && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

9. Final Steps

Start your project using:

npm run serve

Your Vue.js Admin Panel is now running at http://localhost:8080!

10. Future Enhancements

• Use Vuex for state management
• Connect to an API for real data
• Implement Role-Based Access Control

Conclusion

You have successfully built a basic Admin Panel using Vue.js, Vue Router, and Vuetify. With further improvements, you can make it production-ready!

 

Do you have any questions or need help with your Vue.js project? Drop a comment below! We’d love to hear your thoughts and suggestions.