diff --git a/src/lib/mocks/index.ts b/src/lib/mocks/index.ts
index da9f664e..bde22c84 100644
--- a/src/lib/mocks/index.ts
+++ b/src/lib/mocks/index.ts
@@ -7,6 +7,7 @@ import { NODE_IDS, NODE_TEMPLATES } from './node';
 import { REACT_IDS, REACT_TEMPLATES } from './react';
 import { TS_IDS, TS_TEMPLATES } from './typescript';
 import { PHP_IDS, PHP_TEMPLATES } from './php';
+import { VUE_IDS, VUE_TEMPLATES } from './vue';
 import { GIT_IDS, GIT_TEMPLATES } from './git';
 
 export const TAGS = {
@@ -53,7 +54,7 @@ export const TEMPLATES = {
   [TAGS.JS]: generateTemplateForTag(JS_IDS, JS_TEMPLATES),
   [TAGS.Typescript]: generateTemplateForTag(TS_IDS, TS_TEMPLATES),
   [TAGS.ReactJS]: generateTemplateForTag(REACT_IDS, REACT_TEMPLATES),
-  [TAGS.VueJS]: [],
+  [TAGS.VueJS]: generateTemplateForTag(VUE_IDS, VUE_TEMPLATES),
   [TAGS.NodeJS]: generateTemplateForTag(NODE_IDS, NODE_TEMPLATES),
   [TAGS.PHP]: generateTemplateForTag(PHP_IDS, PHP_TEMPLATES),
   [TAGS.GIT]: generateTemplateForTag(GIT_IDS, GIT_TEMPLATES)
diff --git a/src/lib/mocks/vue/001_vue_directives.ts b/src/lib/mocks/vue/001_vue_directives.ts
new file mode 100644
index 00000000..83eb30b1
--- /dev/null
+++ b/src/lib/mocks/vue/001_vue_directives.ts
@@ -0,0 +1,172 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Directives Quiz',
+  description: 'Test your knowledge of Vue.js directives with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the "v-bind" directive in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To conditionally apply a class to an element',
+            is_correct: false,
+          },
+          {
+            label: 'To dynamically bind an attribute to an element',
+            is_correct: true,
+          },
+          {
+            label: 'To define a computed property in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Which directive is used to loop through an array of items in Vue.js?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'v-model',
+            is_correct: false,
+          },
+          {
+            label: 'v-for',
+            is_correct: true,
+          },
+          {
+            label: 'v-show',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of the "v-if" and "v-else" directives in Vue.js.',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "v-on" directive in Vue.js?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Which directive is used to two-way bind data in an input element in Vue.js?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'v-bind',
+            is_correct: false,
+          },
+          {
+            label: 'v-model',
+            is_correct: true,
+          },
+          {
+            label: 'v-on',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you conditionally apply a class to an element using "v-bind"?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using a computed property',
+            is_correct: false,
+          },
+          {
+            label: 'By binding the class name to a variable',
+            is_correct: true,
+          },
+          {
+            label: 'By using a filter',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of the "v-show" and "v-if" directives in Vue.js.',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you bind a method to a button click event in Vue.js using "v-on"?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "v-pre" directive in Vue.js?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To print text directly without any processing',
+            is_correct: false,
+          },
+          {
+            label: 'To skip compilation for this element and all its children',
+            is_correct: true,
+          },
+          {
+            label: 'To prevent a component from rendering',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you conditionally render content using the "v-if" directive?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using "v-if" and "v-else" together',
+            is_correct: true,
+          },
+          {
+            label: 'By using "v-for" with a condition',
+            is_correct: false,
+          },
+          {
+            label: 'It is not possible to conditionally render content in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/002_vue_vBind.ts b/src/lib/mocks/vue/002_vue_vBind.ts
new file mode 100644
index 00000000..29322fa3
--- /dev/null
+++ b/src/lib/mocks/vue/002_vue_vBind.ts
@@ -0,0 +1,133 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js v-bind Quiz',
+  description: 'Test your knowledge of Vue.js v-bind with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the "v-bind" directive in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To conditionally apply a class to an element',
+            is_correct: false,
+          },
+          {
+            label: 'To dynamically bind an attribute to an element',
+            is_correct: true,
+          },
+          {
+            label: 'To define a computed property in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you bind an attribute to an element using "v-bind"?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the usage of the "v-bind:class" directive in Vue.js.',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "v-bind:style" directive in Vue.js?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you bind the "href" attribute of an anchor tag in Vue.js?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using "v-href"',
+            is_correct: false,
+          },
+          {
+            label: 'By using "v-bind:href"',
+            is_correct: true,
+          },
+          {
+            label: 'By using "v-url"',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of the "v-bind" directive with "v-for" in Vue.js.',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you bind a method to a button click event using "v-on"?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "v-bind:key" directive in a "v-for" loop?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you bind an image source dynamically in Vue.js?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using "v-src"',
+            is_correct: false,
+          },
+          {
+            label: 'By using "v-image"',
+            is_correct: false,
+          },
+          {
+            label: 'By using "v-bind:src"',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of the "v-bind" directive with "v-model" in Vue.js.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/003_vue_vIf.ts b/src/lib/mocks/vue/003_vue_vIf.ts
new file mode 100644
index 00000000..7a3c71f5
--- /dev/null
+++ b/src/lib/mocks/vue/003_vue_vIf.ts
@@ -0,0 +1,133 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js v-if Quiz',
+  description: 'Test your knowledge of Vue.js v-if with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the "v-if" directive in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To conditionally apply a class to an element',
+            is_correct: false,
+          },
+          {
+            label: 'To conditionally render an element based on a condition',
+            is_correct: true,
+          },
+          {
+            label: 'To define a computed property in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you use "v-if" to conditionally render an element in Vue.js?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the usage of "v-else" and "v-else-if" directives in Vue.js.',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "v-show" directive in Vue.js?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you conditionally show an element using "v-show" in Vue.js?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By toggling the element display property',
+            is_correct: false,
+          },
+          {
+            label: 'By rendering the element conditionally',
+            is_correct: true,
+          },
+          {
+            label: 'By using a computed property',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of "v-if" and "v-show" directives in Vue.js.',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you use "v-if" with "v-else" to conditionally render content in Vue.js?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the key difference between "v-if" and "v-show" in Vue.js?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you use "v-else-if" to conditionally render content in Vue.js?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using "v-else" with a condition',
+            is_correct: false,
+          },
+          {
+            label: 'By using "v-else" with multiple conditions',
+            is_correct: true,
+          },
+          {
+            label: 'By using "v-show" with a condition',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of "v-if" with "v-for" in Vue.js.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/004_vue_vShow.ts b/src/lib/mocks/vue/004_vue_vShow.ts
new file mode 100644
index 00000000..ce4dffdf
--- /dev/null
+++ b/src/lib/mocks/vue/004_vue_vShow.ts
@@ -0,0 +1,133 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js v-show Quiz',
+  description: 'Test your knowledge of Vue.js v-show with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the "v-show" directive in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To conditionally render an element based on a condition',
+            is_correct: true,
+          },
+          {
+            label: 'To toggle a class on an element',
+            is_correct: false,
+          },
+          {
+            label: 'To define a computed property in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you use "v-show" to conditionally display an element in Vue.js?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the key difference between "v-show" and "v-if" directives in Vue.js.',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'In what scenarios is "v-show" typically preferred over "v-if" in Vue.js?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you conditionally show an element using "v-show" in Vue.js?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By rendering the element conditionally',
+            is_correct: true,
+          },
+          {
+            label: 'By toggling the element display property',
+            is_correct: false,
+          },
+          {
+            label: 'By using a computed property',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of "v-show" with "v-else" in Vue.js.',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you use "v-show" with "v-else-if" to conditionally render content in Vue.js?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the key difference between "v-show" and "v-if" in terms of rendering in Vue.js?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you use "v-else-if" with "v-show" to conditionally render content in Vue.js?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using "v-else" with a condition',
+            is_correct: true,
+          },
+          {
+            label: 'By using "v-else" with multiple conditions',
+            is_correct: false,
+          },
+          {
+            label: 'By using "v-if" with a condition',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of "v-show" with "v-for" in Vue.js.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/005_vue_vFor.ts b/src/lib/mocks/vue/005_vue_vFor.ts
new file mode 100644
index 00000000..82238508
--- /dev/null
+++ b/src/lib/mocks/vue/005_vue_vFor.ts
@@ -0,0 +1,133 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js v-for Quiz',
+  description: 'Test your knowledge of Vue.js v-for with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the main purpose of the "v-for" directive in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To conditionally render an element based on a condition',
+            is_correct: false,
+          },
+          {
+            label: 'To iterate over an array and render elements for each item',
+            is_correct: true,
+          },
+          {
+            label: 'To define a computed property in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you use "v-for" to iterate over an array and render elements in Vue.js?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the key usage of "v-for" in a Vue.js template.',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the difference between "v-for" and "v-if" in Vue.js?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you get the index of the current iteration in a "v-for" loop in Vue.js?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using a computed property',
+            is_correct: false,
+          },
+          {
+            label: 'By referencing the index variable',
+            is_correct: true,
+          },
+          {
+            label: 'By using "v-index" directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain how "v-for" can be used to render a list of items with Vue.js.',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you conditionally render items in a "v-for" loop based on a condition?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "key" attribute when using "v-for"?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the main advantage of using "v-for" in Vue.js?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To create computed properties',
+            is_correct: false,
+          },
+          {
+            label: 'To simplify rendering lists of data',
+            is_correct: true,
+          },
+          {
+            label: 'To conditionally render elements',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of "v-for" with nested loops in Vue.js.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/006_vue-vEvents.ts b/src/lib/mocks/vue/006_vue-vEvents.ts
new file mode 100644
index 00000000..ba0caeab
--- /dev/null
+++ b/src/lib/mocks/vue/006_vue-vEvents.ts
@@ -0,0 +1,120 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Events Quiz',
+  description: 'Test your knowledge of Vue.js events with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the primary purpose of event handling in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To create computed properties',
+            is_correct: false,
+          },
+          {
+            label: 'To manage user interactions and respond to them',
+            is_correct: true,
+          },
+          {
+            label: 'To define data properties in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you attach a click event handler to an element in Vue.js?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the syntax for binding a method to an event in Vue.js?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you pass data to an event handler in Vue.js?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the purpose of the "@" symbol in Vue.js event binding.',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the difference between "v-on" and "v-bind" in Vue.js event handling?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you prevent the default behavior of an event in Vue.js?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the concept of event modifiers in Vue.js.',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "stop" event modifier in Vue.js?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To stop event propagation',
+            is_correct: true,
+          },
+          {
+            label: 'To stop the event handler',
+            is_correct: false,
+          },
+          {
+            label: 'To stop event bubbling',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of the "once" event modifier in Vue.js.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/007_vue_vOn.ts b/src/lib/mocks/vue/007_vue_vOn.ts
new file mode 100644
index 00000000..e794c864
--- /dev/null
+++ b/src/lib/mocks/vue/007_vue_vOn.ts
@@ -0,0 +1,120 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js v-on Directives Quiz',
+  description: 'Test your knowledge of Vue.js v-on directives with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the primary purpose of the v-on directive in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To create data properties',
+            is_correct: false,
+          },
+          {
+            label: 'To manage user interactions and respond to events',
+            is_correct: true,
+          },
+          {
+            label: 'To define computed properties',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you attach a click event handler to an element using v-on?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the syntax for binding a method to an event using v-on?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you pass data to an event handler using v-on?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the purpose of the "@click" syntax in v-on event binding.',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the difference between "v-on" and "v-bind" in Vue.js?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you prevent the default behavior of an event using v-on?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the concept of event modifiers in Vue.js v-on directives.',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the ".stop" event modifier in Vue.js v-on directives?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To stop event propagation',
+            is_correct: true,
+          },
+          {
+            label: 'To stop the event handler',
+            is_correct: false,
+          },
+          {
+            label: 'To stop event bubbling',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Explain the usage of the ".once" event modifier in Vue.js v-on directives.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/008_vue_methods.ts b/src/lib/mocks/vue/008_vue_methods.ts
new file mode 100644
index 00000000..1b84fd45
--- /dev/null
+++ b/src/lib/mocks/vue/008_vue_methods.ts
@@ -0,0 +1,120 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Methods Quiz',
+  description: 'Test your knowledge of Vue.js methods with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the primary purpose of methods in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To define computed properties',
+            is_correct: false,
+          },
+          {
+            label: 'To manage user interactions and create custom functions',
+            is_correct: true,
+          },
+          {
+            label: 'To style the components',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you define a method in a Vue component?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the purpose of the "methods" property in a Vue component.',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you call a method defined in a Vue component from the template?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the key difference between "computed properties" and "methods" in Vue.js?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the concept of "method binding" in Vue.js.',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you pass arguments to a method when calling it from the template?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "this" keyword in Vue.js methods?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the usage of the ".prevent" modifier in Vue.js event handling methods.',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To prevent event propagation',
+            is_correct: false,
+          },
+          {
+            label: 'To prevent the default behavior of an event',
+            is_correct: true,
+          },
+          {
+            label: 'To prevent the method execution',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you reuse a method defined in a Vue component in another component?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/009_vue_eventModifiers.ts b/src/lib/mocks/vue/009_vue_eventModifiers.ts
new file mode 100644
index 00000000..74e8fa12
--- /dev/null
+++ b/src/lib/mocks/vue/009_vue_eventModifiers.ts
@@ -0,0 +1,120 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Event Modifiers Quiz',
+  description: 'Test your knowledge of Vue.js event modifiers with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the ".stop" event modifier in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To stop event propagation',
+            is_correct: true,
+          },
+          {
+            label: 'To prevent the default behavior of an event',
+            is_correct: false,
+          },
+          {
+            label: 'To stop the method execution',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you use the ".prevent" event modifier in Vue.js?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the purpose of the ".capture" event modifier in Vue.js.',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What does the ".self" event modifier do in Vue.js?',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you use the ".once" event modifier in Vue.js?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the ".passive" event modifier in Vue.js and its use cases.',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the ".ctrl" event modifier in Vue.js?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain how to use the ".exact" event modifier in Vue.js and its significance.',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the use of the ".middle" event modifier in Vue.js?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To handle middle mouse button clicks',
+            is_correct: true,
+          },
+          {
+            label: 'To handle right mouse button clicks',
+            is_correct: false,
+          },
+          {
+            label: 'To handle left mouse button clicks',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you combine multiple event modifiers in Vue.js?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/010_vue_forms.ts b/src/lib/mocks/vue/010_vue_forms.ts
new file mode 100644
index 00000000..ad9b5a60
--- /dev/null
+++ b/src/lib/mocks/vue/010_vue_forms.ts
@@ -0,0 +1,172 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Forms Quiz',
+  description: 'Test your knowledge of Vue.js forms with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'How do you create a text input field in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Using the <input> element',
+            is_correct: true,
+          },
+          {
+            label: 'Using the <form> element',
+            is_correct: false,
+          },
+          {
+            label: 'Using the <textarea> element',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "v-model" directive in Vue.js forms?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you validate a form input in Vue.js?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'Using computed properties',
+            is_correct: true,
+          },
+          {
+            label: 'Using Vue.js built-in validation functions',
+            is_correct: false,
+          },
+          {
+            label: 'Using inline JavaScript functions',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'Explain the purpose of the "v-form" directive in Vue.js.',
+        name: 'q4',
+        points: 3,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you bind a select input to a data property in Vue.js?',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Using the "v-bind" directive',
+            is_correct: false,
+          },
+          {
+            label: 'Using the "v-model" directive',
+            is_correct: true,
+          },
+          {
+            label: 'Using the "v-data" directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "v-validate" directive in Vue.js forms?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you handle form submissions in Vue.js?',
+        name: 'q7',
+        points: 3,
+        order: 6,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'Using the "v-submit" directive',
+            is_correct: false,
+          },
+          {
+            label: 'Using the "v-on:submit" directive',
+            is_correct: true,
+          },
+          {
+            label: 'Using JavaScript event listeners',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the difference between "v-model" and "v-bind" in Vue.js forms?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you implement form validation messages in Vue.js?',
+        name: 'q9',
+        points: 3,
+        order: 8,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'Using CSS classes',
+            is_correct: true,
+          },
+          {
+            label: 'Using the "v-message" directive',
+            is_correct: false,
+          },
+          {
+            label: 'Using the "v-show" directive',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "v-reset" directive in Vue.js forms?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To reset a form input field',
+            is_correct: false,
+          },
+          {
+            label: 'To reset a form to its initial state',
+            is_correct: true,
+          },
+          {
+            label: 'To validate a form',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/011_vue_vModel.ts b/src/lib/mocks/vue/011_vue_vModel.ts
new file mode 100644
index 00000000..48bb230e
--- /dev/null
+++ b/src/lib/mocks/vue/011_vue_vModel.ts
@@ -0,0 +1,202 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js v-model Quiz',
+  description: 'Test your knowledge of Vue.js v-model with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of "v-model" in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you create two-way data binding in Vue.js using "v-model"?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By binding a data property to an input element',
+            is_correct: true,
+          },
+          {
+            label: 'By using the "v-bind" directive',
+            is_correct: false,
+          },
+          {
+            label: 'By manually updating the DOM',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Which HTML input elements can be used with "v-model" in Vue.js?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: '<input type="text">',
+            is_correct: true,
+          },
+          {
+            label: '<input type="checkbox">',
+            is_correct: true,
+          },
+          {
+            label: '<select>',
+            is_correct: false,
+          },
+          {
+            label: '<textarea>',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the shorthand for "v-bind" in Vue.js forms?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: ':model',
+            is_correct: false,
+          },
+          {
+            label: 'v-model',
+            is_correct: true,
+          },
+          {
+            label: 'bind-model',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you implement form validation with "v-model" in Vue.js?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By defining custom validation functions',
+            is_correct: true,
+          },
+          {
+            label: 'By using built-in validation attributes',
+            is_correct: true,
+          },
+          {
+            label: 'By manually handling input events',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What happens when you bind "v-model" to a data property in Vue.js?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'The input element reflects the data property value',
+            is_correct: true,
+          },
+          {
+            label: 'The data property is updated without affecting the input element',
+            is_correct: false,
+          },
+          {
+            label: 'An error is thrown',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you use "v-model" with a select dropdown in Vue.js?',
+        name: 'q7',
+        points: 3,
+        order: 6,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By binding a data property to the "value" attribute',
+            is_correct: true,
+          },
+          {
+            label: 'By using the "v-select" directive',
+            is_correct: false,
+          },
+          {
+            label: 'By manually updating the selected value',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the main benefit of using "v-model" for form inputs in Vue.js?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you handle user input events when using "v-model"?',
+        name: 'q9',
+        points: 3,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using the "v-on" directive',
+            is_correct: true,
+          },
+          {
+            label: 'By binding directly to input element events',
+            is_correct: false,
+          },
+          {
+            label: 'By using the "v-input" directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the equivalent of "v-model" in React?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'v-bind',
+            is_correct: false,
+          },
+          {
+            label: 'setState',
+            is_correct: true,
+          },
+          {
+            label: 'v-model',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/012_vue_cssBinding.ts b/src/lib/mocks/vue/012_vue_cssBinding.ts
new file mode 100644
index 00000000..fa9ec436
--- /dev/null
+++ b/src/lib/mocks/vue/012_vue_cssBinding.ts
@@ -0,0 +1,198 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js CSS Binding Quiz',
+  description: 'Test your knowledge of Vue.js CSS binding with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'How can you bind CSS classes in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using the "v-css" directive',
+            is_correct: false,
+          },
+          {
+            label: 'By using the "v-bind" directive with the "class" attribute',
+            is_correct: true,
+          },
+          {
+            label: 'By defining a custom CSS binding method',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the purpose of binding CSS classes in Vue.js?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you conditionally apply CSS classes in Vue.js?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using the "v-style" directive',
+            is_correct: false,
+          },
+          {
+            label: 'By using conditional expressions with the "v-bind" directive',
+            is_correct: true,
+          },
+          {
+            label: 'By using inline styles',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Which syntax should you use to bind a single CSS class conditionally in Vue.js?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: ':class="{ active: isActive }"',
+            is_correct: true,
+          },
+          {
+            label: 'class="active: isActive"',
+            is_correct: false,
+          },
+          {
+            label: 'v-bind:class="active: isActive"',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the Vue.js directive for binding inline styles?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'v-inline',
+            is_correct: false,
+          },
+          {
+            label: 'v-style',
+            is_correct: true,
+          },
+          {
+            label: 'v-css',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you bind multiple CSS classes in Vue.js?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By defining a custom CSS binding method',
+            is_correct: false,
+          },
+          {
+            label: 'By using a computed property that returns an object',
+            is_correct: true,
+          },
+          {
+            label: 'By using the "v-class" directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the benefit of using CSS binding in Vue.js?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'It simplifies CSS usage in Vue components',
+            is_correct: true,
+          },
+          {
+            label: 'It improves JavaScript performance',
+            is_correct: false,
+          },
+          {
+            label: 'It is not recommended in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you bind CSS inline styles in Vue.js using "v-style"?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By directly specifying a string of CSS properties',
+            is_correct: true,
+          },
+          {
+            label: 'By using a computed property that returns an object of style properties',
+            is_correct: true,
+          },
+          {
+            label: 'By applying a predefined CSS class',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the purpose of using conditional CSS classes in Vue.js?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To apply styles dynamically based on data or user interaction',
+            is_correct: true,
+          },
+          {
+            label: 'To override all other CSS styles',
+            is_correct: false,
+          },
+          {
+            label: 'To define fixed styles for all components',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'Which Vue.js directive is used to bind HTML attributes?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/013_vue_computedProperties.ts b/src/lib/mocks/vue/013_vue_computedProperties.ts
new file mode 100644
index 00000000..9691924a
--- /dev/null
+++ b/src/lib/mocks/vue/013_vue_computedProperties.ts
@@ -0,0 +1,172 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Computed Properties Quiz',
+  description: 'Test your knowledge of Vue.js computed properties with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What are computed properties in Vue.js used for?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To perform asynchronous operations',
+            is_correct: false,
+          },
+          {
+            label: 'To calculate and cache derived data based on reactive dependencies',
+            is_correct: true,
+          },
+          {
+            label: 'To render dynamic templates',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you define a computed property in a Vue component?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'In Vue.js, can you use a computed property to change data in a component?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Yes, computed properties can change data directly',
+            is_correct: false,
+          },
+          {
+            label: 'No, computed properties are read-only and cannot modify data',
+            is_correct: true,
+          },
+          {
+            label: 'Only in specific situations',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the key advantage of using computed properties over methods in Vue.js?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Computed properties are faster',
+            is_correct: true,
+          },
+          {
+            label: 'Methods are easier to write',
+            is_correct: false,
+          },
+          {
+            label: 'There is no difference between them',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'When should you use a computed property instead of a data property in Vue.js?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you define a computed property that depends on multiple data properties?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By using the "computed" option and returning the computed value',
+            is_correct: true,
+          },
+          {
+            label: 'By defining a separate method to compute the value',
+            is_correct: false,
+          },
+          {
+            label: 'By using the "v-computed" directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What happens when the dependent data properties change in a computed property?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'The computed property updates automatically',
+            is_correct: true,
+          },
+          {
+            label: 'The computed property becomes a method',
+            is_correct: false,
+          },
+          {
+            label: 'The computed property is cached and does not update',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is a common use case for computed properties in Vue.js?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'In Vue.js, can you define a computed property with parameters?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Yes, by using the "params" option',
+            is_correct: false,
+          },
+          {
+            label: 'No, computed properties do not support parameters',
+            is_correct: true,
+          },
+          {
+            label: 'Yes, by defining a method with parameters and using it as a computed property',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the scope of computed properties in Vue.js?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/014_vue_watchers.ts b/src/lib/mocks/vue/014_vue_watchers.ts
new file mode 100644
index 00000000..1f3e358f
--- /dev/null
+++ b/src/lib/mocks/vue/014_vue_watchers.ts
@@ -0,0 +1,185 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Watchers Quiz',
+  description: 'Test your knowledge of Vue.js watchers with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is a watcher in Vue.js used for?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To observe and react to changes in data properties',
+            is_correct: true,
+          },
+          {
+            label: 'To create new data properties',
+            is_correct: false,
+          },
+          {
+            label: 'To define computed properties',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you define a watcher in a Vue component?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'In Vue.js, can you have multiple watchers for the same data property?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Yes, you can have multiple watchers for the same property',
+            is_correct: true,
+          },
+          {
+            label: 'No, you can only have one watcher for each property',
+            is_correct: false,
+          },
+          {
+            label: 'Only if the data property is an array',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'When is a watcher function executed in Vue.js?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Before the data property changes',
+            is_correct: false,
+          },
+          {
+            label: 'Immediately after the data property changes',
+            is_correct: true,
+          },
+          {
+            label: 'At a specific interval set by the developer',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the main difference between a computed property and a watcher in Vue.js?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you unregister a watcher in Vue.js?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By using the "$off" method',
+            is_correct: false,
+          },
+          {
+            label: 'By setting the watcher function to null',
+            is_correct: false,
+          },
+          {
+            label: 'By calling the "$unwatch" method on the component',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the purpose of using a deep watcher in Vue.js?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To watch changes in nested data properties of objects or arrays',
+            is_correct: true,
+          },
+          {
+            label: 'To watch data properties only at the top level',
+            is_correct: false,
+          },
+          {
+            label: 'To watch computed properties',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What happens if you attempt to watch a non-existent data property in Vue.js?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Can you use watchers with computed properties in Vue.js?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Yes, watchers can be used with computed properties',
+            is_correct: true,
+          },
+          {
+            label: 'No, computed properties and watchers are mutually exclusive',
+            is_correct: false,
+          },
+          {
+            label: 'Only in specific situations',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'In Vue.js, what is the purpose of the "immediate" option in a watcher definition?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To trigger the watcher immediately after component creation',
+            is_correct: true,
+          },
+          {
+            label: 'To prevent the watcher from ever executing',
+            is_correct: false,
+          },
+          {
+            label: 'To delay the execution of the watcher',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/015_vue_templates.ts b/src/lib/mocks/vue/015_vue_templates.ts
new file mode 100644
index 00000000..5fe31b44
--- /dev/null
+++ b/src/lib/mocks/vue/015_vue_templates.ts
@@ -0,0 +1,185 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Templates Quiz',
+  description: 'Test your knowledge of Vue.js templates with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is a Vue.js template used for?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To define the structure of a Vue component\'s HTML',
+            is_correct: true,
+          },
+          {
+            label: 'To create computed properties',
+            is_correct: false,
+          },
+          {
+            label: 'To write JavaScript code',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you bind an element\'s text content to a Vue.js component\'s data property?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'In Vue.js templates, what does double curly braces ({{ }}) represent?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'A variable placeholder to display data',
+            is_correct: true,
+          },
+          {
+            label: 'A JavaScript comment',
+            is_correct: false,
+          },
+          {
+            label: 'An HTML tag',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the "v-bind" directive used for in Vue.js templates?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To bind an attribute to an expression',
+            is_correct: true,
+          },
+          {
+            label: 'To define a new data property',
+            is_correct: false,
+          },
+          {
+            label: 'To create a computed property',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'In Vue.js templates, how do you conditionally render an element based on a data property?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the "v-for" directive used for in Vue.js templates?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To render a list of items based on an array',
+            is_correct: true,
+          },
+          {
+            label: 'To define a computed property',
+            is_correct: false,
+          },
+          {
+            label: 'To create a data property',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'In Vue.js templates, what does the "@" symbol represent?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'A shorthand for the "v-on" directive',
+            is_correct: true,
+          },
+          {
+            label: 'A JavaScript comment',
+            is_correct: false,
+          },
+          {
+            label: 'A data property',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you conditionally apply a CSS class to an element in a Vue.js template?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "v-html" directive in Vue.js templates?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To render raw HTML content from a data property',
+            is_correct: true,
+          },
+          {
+            label: 'To create a computed property',
+            is_correct: false,
+          },
+          {
+            label: 'To insert a JavaScript script into the template',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'In Vue.js templates, how do you bind an element\'s attribute?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By using the "v-bind" directive',
+            is_correct: true,
+          },
+          {
+            label: 'By enclosing the attribute value in double curly braces ({{ }})',
+            is_correct: false,
+          },
+          {
+            label: 'By defining a new data property for each attribute',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/016_vue_components.ts b/src/lib/mocks/vue/016_vue_components.ts
new file mode 100644
index 00000000..edcaac9a
--- /dev/null
+++ b/src/lib/mocks/vue/016_vue_components.ts
@@ -0,0 +1,185 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Components Quiz',
+  description: 'Test your knowledge of Vue.js components with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is a Vue.js component?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'A reusable and self-contained Vue instance',
+            is_correct: true,
+          },
+          {
+            label: 'A JavaScript function',
+            is_correct: false,
+          },
+          {
+            label: 'A built-in HTML element',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you define a Vue.js component?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the primary advantage of using Vue components?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Reusability and maintainability',
+            is_correct: true,
+          },
+          {
+            label: 'Faster page load times',
+            is_correct: false,
+          },
+          {
+            label: 'Improved SEO',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you pass data from a parent component to a child component?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using props',
+            is_correct: true,
+          },
+          {
+            label: 'By defining a data property in the child component',
+            is_correct: false,
+          },
+          {
+            label: 'By using v-model directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is a Vue.js component lifecycle hook?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you create a global Vue component?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using Vue.component method',
+            is_correct: true,
+          },
+          {
+            label: 'By including a component in a parent component template',
+            is_correct: false,
+          },
+          {
+            label: 'By defining a new Vue instance',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the purpose of the Vue component template?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To define the structure and layout of the component',
+            is_correct: true,
+          },
+          {
+            label: 'To store data and business logic',
+            is_correct: false,
+          },
+          {
+            label: 'To define component props',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you define component props?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the Vue component root element?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'It encapsulates the component template',
+            is_correct: true,
+          },
+          {
+            label: 'It defines component data properties',
+            is_correct: false,
+          },
+          {
+            label: 'It represents the component props',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you create a named slot in a Vue component?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By using the "slot" attribute in the component template',
+            is_correct: true,
+          },
+          {
+            label: 'By defining a prop with the name of the slot',
+            is_correct: false,
+          },
+          {
+            label: 'By declaring a new Vue instance',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/017_vue_props.ts b/src/lib/mocks/vue/017_vue_props.ts
new file mode 100644
index 00000000..35b48b39
--- /dev/null
+++ b/src/lib/mocks/vue/017_vue_props.ts
@@ -0,0 +1,185 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Vue.js Props Quiz',
+  description: 'Test your knowledge of Vue.js props with practical questions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the primary purpose of using props in Vue.js components?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To pass data from a parent component to a child component',
+            is_correct: true,
+          },
+          {
+            label: 'To create a new data property in a child component',
+            is_correct: false,
+          },
+          {
+            label: 'To define a computed property in a child component',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you define a prop in a child component in Vue.js?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'In a Vue.js parent component, how do you pass a prop to a child component?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using the v-bind directive on the child component tag',
+            is_correct: true,
+          },
+          {
+            label: 'By using the v-model directive on the child component tag',
+            is_correct: false,
+          },
+          {
+            label: 'By using double curly braces ({{ }}) around the prop value',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What happens if a parent component updates the value of a prop?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'The change is not reflected in the child component',
+            is_correct: false,
+          },
+          {
+            label: 'The child component receives the updated value automatically',
+            is_correct: true,
+          },
+          {
+            label: 'An error occurs',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'In Vue.js, how do you specify the type of a prop?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "required" prop option in Vue.js?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'It specifies that the prop must be passed from the parent',
+            is_correct: true,
+          },
+          {
+            label: 'It indicates that the prop is optional',
+            is_correct: false,
+          },
+          {
+            label: 'It defines the type of the prop',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you provide a default value for a prop in Vue.js?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By adding a default property to the prop definition',
+            is_correct: true,
+          },
+          {
+            label: 'By using the v-bind directive in the parent component',
+            is_correct: false,
+          },
+          {
+            label: 'By using the v-model directive in the child component',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is a prop validation function used for in Vue.js?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you pass multiple props to a child component in Vue.js?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By including multiple v-bind directives on the child component tag',
+            is_correct: true,
+          },
+          {
+            label: 'By using the v-model directive with an array of prop names',
+            is_correct: false,
+          },
+          {
+            label: 'By wrapping the child component in a div element',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you receive and access props in a child component in Vue.js?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'By declaring a props option in the child component',
+            is_correct: true,
+          },
+          {
+            label: 'By using the "this" keyword in the child component',
+            is_correct: false,
+          },
+          {
+            label: 'By defining a new data property for each prop',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/018_vue_vForComp.ts b/src/lib/mocks/vue/018_vue_vForComp.ts
new file mode 100644
index 00000000..c75380ca
--- /dev/null
+++ b/src/lib/mocks/vue/018_vue_vForComp.ts
@@ -0,0 +1,185 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Practical Vue.js v-for Quiz',
+  description: 'Test your knowledge of Vue.js v-for directive and component iteration.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the Vue.js v-for directive?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To render a list of items based on an array or object',
+            is_correct: true,
+          },
+          {
+            label: 'To create a Vue component',
+            is_correct: false,
+          },
+          {
+            label: 'To define CSS styles',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How do you iterate over an array using v-for?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the index in a v-for loop?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'The current item in the loop',
+            is_correct: false,
+          },
+          {
+            label: 'The position of the current item in the array',
+            is_correct: true,
+          },
+          {
+            label: 'A reserved keyword in Vue.js',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you filter items in a v-for loop?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using the v-if directive',
+            is_correct: true,
+          },
+          {
+            label: 'By using the v-else directive',
+            is_correct: false,
+          },
+          {
+            label: 'By using the v-while directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the key attribute used for in v-for?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you iterate over the properties of an object using v-for?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By specifying the "in" keyword in v-for',
+            is_correct: false,
+          },
+          {
+            label: 'By using "v-for" on the object directly',
+            is_correct: false,
+          },
+          {
+            label: 'By using "(value, key) in object" syntax',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the shorthand syntax for v-for with an array?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: '*item in items',
+            is_correct: false,
+          },
+          {
+            label: '*(item, index) in items',
+            is_correct: false,
+          },
+          {
+            label: '*item of items',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the default iteration order when using v-for on an object?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you loop through a range of numbers using v-for?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using an array containing the numbers',
+            is_correct: true,
+          },
+          {
+            label: 'By specifying a start and end value in v-for',
+            is_correct: false,
+          },
+          {
+            label: 'By using a dedicated v-range directive',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is a key conflict in v-for, and how can it be resolved?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'A situation where two v-for loops use the same variable name',
+            is_correct: false,
+          },
+          {
+            label: 'A situation where v-for and v-if are used together',
+            is_correct: true,
+          },
+          {
+            label: 'A situation where two items in a list have the same key',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/019_vue_emit.ts b/src/lib/mocks/vue/019_vue_emit.ts
new file mode 100644
index 00000000..5fd37b9e
--- /dev/null
+++ b/src/lib/mocks/vue/019_vue_emit.ts
@@ -0,0 +1,185 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Practical Vue.js Emitting Events Quiz',
+  description: 'Test your knowledge of Vue.js event handling and emitting events.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of emitting events in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To pass data from child to parent components',
+            is_correct: true,
+          },
+          {
+            label: 'To create Vue.js components',
+            is_correct: false,
+          },
+          {
+            label: 'To style the user interface',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How is an event emitted from a child component?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the $emit method in Vue.js?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To emit an event from a parent component',
+            is_correct: false,
+          },
+          {
+            label: 'To emit an event from a child component',
+            is_correct: true,
+          },
+          {
+            label: 'To define CSS styles',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you pass data when emitting an event?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using the $on method',
+            is_correct: false,
+          },
+          {
+            label: 'By including data as a parameter in $emit',
+            is_correct: true,
+          },
+          {
+            label: 'By defining a new event handler',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the key modifier for emitting events with the Enter key?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the v-on directive used for in Vue.js?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To define CSS styles',
+            is_correct: false,
+          },
+          {
+            label: 'To handle DOM events and call methods',
+            is_correct: true,
+          },
+          {
+            label: 'To create Vue.js components',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you stop an event from propagating to parent components?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using $emit with the .stop modifier',
+            is_correct: false,
+          },
+          {
+            label: 'By using $emit with the .prevent modifier',
+            is_correct: false,
+          },
+          {
+            label: 'By using $emit with the .stop modifier',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'How can you capture a specific event emitted from a child component?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the v-bind directive used for in Vue.js?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To emit custom events',
+            is_correct: false,
+          },
+          {
+            label: 'To handle DOM events',
+            is_correct: false,
+          },
+          {
+            label: 'To bind an element’s attribute to a Vue.js data value',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the argument of the v-on directive when listening to a custom event?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'The event name',
+            is_correct: true,
+          },
+          {
+            label: 'The method to call',
+            is_correct: false,
+          },
+          {
+            label: 'The event data',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/020_vue_fallThroughAttribute.ts b/src/lib/mocks/vue/020_vue_fallThroughAttribute.ts
new file mode 100644
index 00000000..5fd37b9e
--- /dev/null
+++ b/src/lib/mocks/vue/020_vue_fallThroughAttribute.ts
@@ -0,0 +1,185 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'Practical Vue.js Emitting Events Quiz',
+  description: 'Test your knowledge of Vue.js event handling and emitting events.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of emitting events in Vue.js?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To pass data from child to parent components',
+            is_correct: true,
+          },
+          {
+            label: 'To create Vue.js components',
+            is_correct: false,
+          },
+          {
+            label: 'To style the user interface',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How is an event emitted from a child component?',
+        name: 'q2',
+        points: 3,
+        order: 1,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the $emit method in Vue.js?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To emit an event from a parent component',
+            is_correct: false,
+          },
+          {
+            label: 'To emit an event from a child component',
+            is_correct: true,
+          },
+          {
+            label: 'To define CSS styles',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you pass data when emitting an event?',
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using the $on method',
+            is_correct: false,
+          },
+          {
+            label: 'By including data as a parameter in $emit',
+            is_correct: true,
+          },
+          {
+            label: 'By defining a new event handler',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'What is the key modifier for emitting events with the Enter key?',
+        name: 'q5',
+        points: 3,
+        order: 4,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the v-on directive used for in Vue.js?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To define CSS styles',
+            is_correct: false,
+          },
+          {
+            label: 'To handle DOM events and call methods',
+            is_correct: true,
+          },
+          {
+            label: 'To create Vue.js components',
+            is_correct: false,
+          },
+        ],
+      },
+      {
+        title: 'How can you stop an event from propagating to parent components?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'By using $emit with the .stop modifier',
+            is_correct: false,
+          },
+          {
+            label: 'By using $emit with the .prevent modifier',
+            is_correct: false,
+          },
+          {
+            label: 'By using $emit with the .stop modifier',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'How can you capture a specific event emitted from a child component?',
+        name: 'q8',
+        points: 3,
+        order: 7,
+        question_type: QuestionTypes[3], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the v-bind directive used for in Vue.js?',
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To emit custom events',
+            is_correct: false,
+          },
+          {
+            label: 'To handle DOM events',
+            is_correct: false,
+          },
+          {
+            label: 'To bind an element’s attribute to a Vue.js data value',
+            is_correct: true,
+          },
+        ],
+      },
+      {
+        title: 'What is the argument of the v-on directive when listening to a custom event?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'The event name',
+            is_correct: true,
+          },
+          {
+            label: 'The method to call',
+            is_correct: false,
+          },
+          {
+            label: 'The event data',
+            is_correct: false,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/vue/index.ts b/src/lib/mocks/vue/index.ts
new file mode 100644
index 00000000..4fdc898a
--- /dev/null
+++ b/src/lib/mocks/vue/index.ts
@@ -0,0 +1,66 @@
+import vueDirectives from './001_vue_directives';
+import vueVBind from './002_vue_vBind';
+import vueVIf from './003_vue_vIf';
+import vueVShow from './004_vue_vShow';
+import vueVFor from './005_vue_vFor';
+import vueEvents from './006_vue-vEvents';
+import vueVOn from './007_vue_vOn';
+import vueMethods from './008_vue_methods';
+import vueEventModifiers from './009_vue_eventModifiers';
+import vueForms from './010_vue_forms';
+import vueVModel from './011_vue_vModel';
+import vueCssBinding from './012_vue_cssBinding';
+import vueComputedProperties from './013_vue_computedProperties';
+import vueWatchers from './014_vue_watchers';
+import vueTemplates from './015_vue_templates';
+import vueComponents from './016_vue_components';
+import vueProps from './017_vue_props';
+import vueVForComp from './018_vue_vForComp';
+import vueEmit from './019_vue_emit';
+import vueFallThroughAttribute from './020_vue_fallThroughAttribute';
+
+export const VUE_IDS: { [key: string]: string } = {
+  VUE_DIRECTIVES: 'VUE_DIRECTIVES',
+  VUE_VBIND: 'VUE_VBIND',
+  VUE_VIF: 'VUE_VIF',
+  VUE_VSHOW: 'VUE_VSHOW',
+  VUE_VFOR: 'VUE_VFOR',
+  VUE_VEVENTS: 'VUE_VEVENTS',
+  VUE_VON: 'VUE_VON',
+  VUE_METHODS: 'VUE_METHODS',
+  VUE_EVENTMODIFIERS: 'VUE_EVENTMODIFIERS',
+  VUE_FORMS: 'VUE_FORMS',
+  VUE_VMODEL: 'VUE_VMODEL',
+  VUE_CSSBINDING: 'VUE_CSSBINDING',
+  VUE_COMPUTEDPROPERTIES: 'VUE_COMPUTEDPROPERTIES',
+  VUE_WATCHERS: 'VUE_WATCHERS',
+  VUE_TEMPLATES: 'VUE_TEMPLATES',
+  VUE_COMPONENTS: 'VUE_COMPONENTS',
+  VUE_PROPS: 'VUE_PROPS',
+  VUE_VFORCOMP: 'VUE_VFORCOMP',
+  VUE_EMIT: 'VUE_EMIT',
+  VUE_FALLTHROUGHATTRIBUTE: 'VUE_FALLTHROUGHATTRIBUTE'
+};
+
+export const VUE_TEMPLATES = {
+  [VUE_IDS.VUE_DIRECTIVES]: vueDirectives,
+  [VUE_IDS.VUE_VBIND]: vueVBind,
+  [VUE_IDS.VUE_VIF]: vueVIf,
+  [VUE_IDS.VUE_VSHOW]: vueVShow,
+  [VUE_IDS.VUE_VFOR]: vueVFor,
+  [VUE_IDS.VUE_VEVENTS]: vueEvents,
+  [VUE_IDS.VUE_VON]: vueVOn,
+  [VUE_IDS.VUE_METHODS]: vueMethods,
+  [VUE_IDS.VUE_EVENTMODIFIERS]: vueEventModifiers,
+  [VUE_IDS.VUE_FORMS]: vueForms,
+  [VUE_IDS.VUE_VMODEL]: vueVModel,
+  [VUE_IDS.VUE_CSSBINDING]: vueCssBinding,
+  [VUE_IDS.VUE_COMPUTEDPROPERTIES]: vueComputedProperties,
+  [VUE_IDS.VUE_WATCHERS]: vueWatchers,
+  [VUE_IDS.VUE_TEMPLATES]: vueTemplates,
+  [VUE_IDS.VUE_COMPONENTS]: vueComponents,
+  [VUE_IDS.VUE_PROPS]: vueProps,
+  [VUE_IDS.VUE_VFORCOMP]: vueVForComp,
+  [VUE_IDS.VUE_EMIT]: vueEmit,
+  [VUE_IDS.VUE_FALLTHROUGHATTRIBUTE]: vueFallThroughAttribute,
+};