# How to Set Up the Vue.js Quiz Application: Complete Local Development Guide

> Learn how to set up the Vue.js quiz application locally. Clone the repo, install dependencies, and run the dev server to start building your quiz app today.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: how-to-guide
- Published: 2026-08-21

---

**Clone the repository, run `npm install` in `etc/quiz-app/`, then `npm run serve` to start the Vue 2 dev server at `localhost:8080`.**

The **AI For Beginners** curriculum includes a Vue.js quiz application for pre- and post-lecture assessments. This lightweight Vue 2.x single-page application (SPA) delivers interactive quizzes while supporting multiple languages through `vue-i18n`. Learning how to set up the Vue.js quiz application locally enables you to contribute translations, modify quiz logic, or integrate the app into custom deployments.

## Prerequisites and System Requirements

Before setting up the Vue.js quiz application, ensure you have:

- **Node.js** (version compatible with Vue CLI 4.x, typically 12.x or higher)
- **npm** or **yarn** package manager
- **Git** for cloning the repository

The project is explicitly pinned to **Vue 2.6.11** as specified in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json), so you do not need Vue 3 compatibility.

## Step-by-Step Setup Instructions

### 1. Clone the Repository and Navigate to the Quiz App

```bash
git clone https://github.com/microsoft/AI-For-Beginners.git
cd AI-For-Beginners/etc/quiz-app

```

The quiz application resides in the `etc/quiz-app/` subdirectory, separate from the main curriculum content.

### 2. Install Dependencies

```bash
npm install

```

This command reads [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) and installs:

- **Runtime**: `vue@^2.6.11`, `vue-router`, `vue-i18n@^8.21.1`
- **Build tooling**: `@vue/cli-service`, webpack, Babel
- **Code quality**: ESLint with Vue essential preset

The dependency tree is locked to maintain reproducible builds across environments.

### 3. Start the Development Server

```bash
npm run serve

```

The Vue CLI dev server launches at `http://localhost:8080` with **hot-reload** enabled. Changes to `.vue` files in `src/` automatically refresh the browser.

In [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json), this script maps to:

```json
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

```

### 4. Build for Production (Optional)

```bash
npm run build

```

This triggers webpack bundling and outputs static files to `dist/`:

- Minified JavaScript bundles with hash fingerprints
- Extracted CSS
- [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) with injected asset references

The `dist/` folder is deployment-ready for platforms like Azure Static Web Apps or GitHub Pages.

### 5. Lint and Auto-Fix Code

```bash
npm run lint

```

ESLint runs with the Vue essential preset, automatically fixing trivial style violations where possible.

## Application Architecture Overview

Understanding the file structure helps you navigate when you set up the Vue.js quiz application for development or customization:

| Layer | Purpose | Key File Path |
|-------|---------|---------------|
| **Bootstrapping** | Vue instance creation with i18n and router | [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) |
| **Routing** | SPA navigation mapping | [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) |
| **Layout** | Root component with language selector | [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) |
| **Quiz Logic** | Question rendering, validation, progress | [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) |
| **Localization** | Per-lesson quiz content in JSON | `src/assets/translations/<lang>/lesson-<n>.json` |

### Entry Point: [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js)

```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './assets/translations'

Vue.config.productionTip = false

new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

```

This file initializes the Vue 2 instance, mounting to `<div id="app">` in [`public/index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/public/index.html).

### Routing Configuration: [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js)

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '*', component: () => import('../views/NotFound.vue') }
]

export default new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

```

The router uses **hash mode** (`#/` URLs) for compatibility with static hosting. Routes map `/` to [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue) and catch-all `*` to [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue).

### Quiz Component: [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue)

This component implements the core quiz experience:

1. Loads localized question data from `vue-i18n` messages
2. Renders questions with radio button answers
3. Validates selections and tracks completion progress
4. Emits results for parent components to consume

Quiz content is **not hardcoded**—it resolves dynamically based on the selected language and lesson number.

### Localization System

Translation files follow this structure:

```

src/assets/translations/
├── index.js          # i18n configuration

├── en/
│   ├── lesson-1.json
│   ├── lesson-2.json
│   └── ...
├── es/
├── pt-br/
└── ...

```

Each `lesson-<n>.json` contains an array of question objects with `question`, `choices`, `answer`, and `explanation` fields. Adding a new language requires:

1. Creating a language subfolder
2. Copying and translating lesson JSON files
3. Registering the locale in [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js)

## Verifying Your Setup

After running `npm run serve`, verify functionality by checking:

1. **Homepage loads** at `http://localhost:8080/#/`
2. **Language selector** in the header switches between available locales
3. **Quiz renders** when selecting any lesson—questions appear in the chosen language
4. **Answer validation** works—submitting answers shows correct/incorrect feedback

## Troubleshooting Common Issues

**Port 8080 already in use**

```bash
npm run serve -- --port 8081

```

Or set `PORT=8081` as an environment variable before the command.

**Missing quiz content**

Ensure translation files exist in `src/assets/translations/` for your selected language. The app gracefully falls back but may show empty quizzes if JSON files are malformed.

**Build failures**

Delete `node_modules/` and [`package-lock.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package-lock.json), then re-run `npm install` to resolve dependency conflicts.

## Summary

- Navigate to `etc/quiz-app/` within the cloned **AI For Beginners** repository
- Run `npm install` to install Vue 2.6.11 and supporting dependencies
- Execute `npm run serve` for local development with hot-reload at `localhost:8080`
- Use `npm run build` to generate production-ready static files in `dist/`
- Modify quiz content in `src/assets/translations/` or logic in [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue)

## Frequently Asked Questions

### What Vue version does the quiz application use?

The quiz application uses **Vue 2.6.11** as specified in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json). This is a deliberate choice for stability and compatibility with the existing `vue-i18n@^8.x` and `vue-router@^3.x` ecosystem used throughout the application.

### Can I deploy the quiz app to static hosting?

Yes. Running `npm run build` generates a `dist/` folder containing HTML, CSS, and JavaScript bundles. These static assets deploy to any static host including Azure Static Web Apps, GitHub Pages, Netlify, or Vercel without requiring a Node.js server runtime.

### How do I add a new language to the quiz?

Create a new folder under `src/assets/translations/` with your language code (e.g., `de/` for German). Copy the JSON structure from an existing language, translate the content, then import and register the locale in [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js). The language selector in [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) will automatically include your new option.

### Where is the quiz answer data stored?

Answer data resides in `src/assets/translations/<lang>/lesson-<n>.json` files alongside the question text. Each JSON object includes an `answer` field indicating the correct choice index. This colocation simplifies content management but means answers are visible to determined users inspecting network requests or source files.