diff --git a/database/data.ts b/database/data.ts
index b5b4f9476..b6aec302e 100644
--- a/database/data.ts
+++ b/database/data.ts
@@ -9,6 +9,7 @@ export const sidebarData: ISidebar[] = [
     category: 'frontend',
     subcategory: [
       { name: 'next js', url: '/next_js', resources: DB.next },
+      { name: 'vue js', url: '/vue_js', resources: DB.vuejs },
       {
         name: '3D libraries',
         url: '/three_d_libraries',
@@ -97,16 +98,16 @@ export const sidebarData: ISidebar[] = [
     category: 'CMS-toolkit',
     subcategory: [
       {
-        name: "Traditional CMS",
-        url: "/traditional_cms",
+        name: 'Traditional CMS',
+        url: '/traditional_cms',
         resources: DB.traditional_cms,
       },
       {
         name: 'Headless CMS',
         url: '/headless_cms',
         resources: DB.headless_cms,
-      }
-    ]
+      },
+    ],
   },
   {
     category: 'languages',
@@ -139,9 +140,7 @@ export const sidebarData: ISidebar[] = [
   },
   {
     category: 'mobile',
-    subcategory: [
-      { name: 'Android', url: '/android', resources: DB.android },
-    ],
+    subcategory: [{ name: 'Android', url: '/android', resources: DB.android }],
   },
   {
     category: 'open-source',
@@ -181,22 +180,22 @@ export const sidebarData: ISidebar[] = [
   {
     category: 'design',
     subcategory: [
-    {
-      name: 'design inspiration',
-      url: '/design_inspiration',
-      resources: DB.designInspirations,
-    },
-    {
-      name: 'design color tools',
-      url: '/design_color_tools',
-      resources: DB.designColorTools,
-    },
-    {
-      name: 'design tutorials',
-      url: '/design_tutorials',
-      resources: DB.designTutorials,
-    }
-  ]
+      {
+        name: 'design inspiration',
+        url: '/design_inspiration',
+        resources: DB.designInspirations,
+      },
+      {
+        name: 'design color tools',
+        url: '/design_color_tools',
+        resources: DB.designColorTools,
+      },
+      {
+        name: 'design tutorials',
+        url: '/design_tutorials',
+        resources: DB.designTutorials,
+      },
+    ],
   },
   {
     category: 'devops',
@@ -284,10 +283,7 @@ export const sidebarData: ISidebar[] = [
         url: '/chat_bots',
         resources: DB.chat_bots,
       },
-      { name: 'tensorflow',
-        url: '/tensorflow',
-        resources: DB.tensorflow,
-      }
+      { name: 'tensorflow', url: '/tensorflow', resources: DB.tensorflow },
     ],
   },
   {
@@ -364,8 +360,8 @@ export const sidebarData: ISidebar[] = [
         name: 'react',
         url: '/react_articles',
         resources: DB.reactArticles,
-      }
-    ]
+      },
+    ],
   },
   {
     category: 'newsletters',
@@ -381,11 +377,11 @@ export const sidebarData: ISidebar[] = [
         resources: DB.pythonLetters,
       },
       {
-        name:'java',
-        url:'/javaLetters',
-        resources:DB.javaLetters,
-      }
-    ]
+        name: 'java',
+        url: '/javaLetters',
+        resources: DB.javaLetters,
+      },
+    ],
   },
   {
     category: 'theory-of-computation',
diff --git a/database/frontend/vuejs.json b/database/frontend/vuejs.json
new file mode 100644
index 000000000..2128bfdb2
--- /dev/null
+++ b/database/frontend/vuejs.json
@@ -0,0 +1,135 @@
+[
+    {
+        "name": "Vue.js Official Guide",
+        "description": "Comprehensive guide to learn Vue.js from the official documentation.",
+        "url": "https://vuejs.org/guide/introduction.html",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue Mastery",
+        "description": "In-depth courses and tutorials on Vue.js for all levels.",
+        "url": "https://www.vuemastery.com/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue School",
+        "description": "Online platform offering beginner to advanced Vue.js courses.",
+        "url": "https://vueschool.io/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue.js Crash Course",
+        "description": "A crash course covering the basics of Vue.js.",
+        "url": "https://www.youtube.com/watch?v=Wy9q22isx3U",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Learn Vue 3 by Example",
+        "description": "Learn Vue 3 through practical examples and projects.",
+        "url": "https://scrimba.com/learn/vue",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Awesome Vue",
+        "description": "A curated list of Vue.js libraries, tutorials, and resources.",
+        "url": "https://github.com/vuejs/awesome-vue",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue.js Best Practices",
+        "description": "A guide to write maintainable and scalable Vue.js applications.",
+        "url": "https://vuejsdevelopers.com/blog/vue-js-best-practices/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue Router Introduction",
+        "description": "Learn how to implement routing in Vue.js applications.",
+        "url": "https://router.vuejs.org/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "State Management with Vuex",
+        "description": "Official documentation to manage application state using Vuex.",
+        "url": "https://vuex.vuejs.org/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vuetify Basics",
+        "description": "Learn how to use Vuetify for building stunning UI components.",
+        "url": "https://vuetifyjs.com/en/getting-started/installation/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Nuxt.js Documentation",
+        "description": "Learn how to build server-side rendered Vue applications with Nuxt.js.",
+        "url": "https://nuxtjs.org/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Real World Vue.js",
+        "description": "Tutorial series to build real-world Vue.js apps.",
+        "url": "https://vueschool.io/courses/real-world-vue-js",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue 3 Cookbook",
+        "description": "Collection of patterns and examples for Vue 3 development.",
+        "url": "https://vuejs.org/guide/reusability/custom-directives.html",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Scalable Vue.js Applications",
+        "description": "Tips for scaling and optimizing large Vue.js projects.",
+        "url": "https://markus.oberlehner.net/blog/scaling-vuejs-applications/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Test Vue.js Applications",
+        "description": "Learn to write unit and integration tests for Vue.js.",
+        "url": "https://vueschool.io/courses/unit-testing-vue",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue DevTools Guide",
+        "description": "Learn to debug Vue applications using Vue DevTools.",
+        "url": "https://devtools.vuejs.org/guide/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Vue 3 Features Deep Dive",
+        "description": "Explore advanced features of Vue 3 like teleport, fragments, and more.",
+        "url": "https://vuedose.tips/what-s-new-in-vue-3/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Building a Todo App in Vue.js",
+        "description": "Step-by-step guide to build a todo app in Vue.js.",
+        "url": "https://www.smashingmagazine.com/2020/12/todo-app-vue-js-node-vuex/",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    },
+    {
+        "name": "Using Vue.js with TypeScript",
+        "description": "Best practices for integrating Vue.js with TypeScript.",
+        "url": "https://vuejs.org/guide/typescript/overview.html",
+        "category": "frontend",
+        "subcategory": "vue_js"
+    }
+]
\ No newline at end of file
diff --git a/database/index.ts b/database/index.ts
index 8331ae460..830342472 100644
--- a/database/index.ts
+++ b/database/index.ts
@@ -15,6 +15,7 @@ export { default as next } from './frontend/next.json'
 export { default as _3dLibraries } from './frontend/three_d_libraries.json'
 export { default as uilibraries } from './frontend/ui_libraries.json'
 export { default as jsChartLibraries } from './frontend/js_chart_libraries.json'
+export { default as vuejs } from './frontend/vuejs.json'
 // backend
 export { default as authentication } from './backend/authentication.json'
 export { default as architecture } from './backend/architecture.json'
@@ -94,7 +95,7 @@ export { default as tensorflow } from './ai_tools/tensorflow.json'
 
 // Open-source
 export { default as openSourceArticles } from './open_source/articles.json'
-export { default as openSourceHacktoberfest} from './open_source/hacktoberfest.json'
+export { default as openSourceHacktoberfest } from './open_source/hacktoberfest.json'
 export { default as openSourcePrograms } from './open_source/os_programs.json'
 export { default as openSourceProjects } from './open_source/projects.json'
 export { default as openSourceTools } from './open_source/tools.json'
@@ -160,4 +161,4 @@ export { default as reactArticles } from './tech_articles/react.json'
 // Newsletters
 export { default as jsLetters } from './newsletters/js_Letters.json'
 export { default as pythonLetters } from './newsletters/py_Letters.json'
-export {default as javaLetters} from './newsletters/java_Letters.json'
\ No newline at end of file
+export { default as javaLetters } from './newsletters/java_Letters.json'