# How to Set Up the Vue.js Quiz Application Locally: Complete Setup Guide

> Easily set up the Vue.js quiz application locally with our step-by-step guide. Clone the repo, install dependencies, and run the app to start learning today.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: getting-started
- Published: 2026-08-03

---

**Clone the repository, run `npm install` and `npm run serve` to start the Vue.js quiz application on localhost:8080.**

The **Vue.js quiz application** in Microsoft's [AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners) repository delivers interactive pre- and post-lecture quizzes for the curriculum. Setting up this Vue 2.x single-page application locally requires only a few steps, whether you want to contribute, customize quizzes, or test localization changes.

## Prerequisites and Repository Structure

Before you begin, ensure you have **Node.js** (version compatible with Vue CLI 4.x) and **npm** installed. The quiz application lives in the `etc/quiz-app/` directory, separate from the main lesson content.

Key architectural layers include:

- **[`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json)** – Defines build scripts (`serve`, `build`, `lint`) and pins Vue 2.6.11 with **vue-router** and **vue-i18n**
- **[`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js)** – Bootstraps the Vue instance, installs routing and internationalization plugins
- **[`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js)** – Configures SPA routes (`/` → Home, `*` → 404)
- **[`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue)** – Root component with language selector and `<router-view>`
- **[`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue)** – Core quiz logic with question rendering and progress tracking
- **`src/assets/translations/`** – JSON files for localized quiz content per lesson

## Step-by-Step Local Setup

Follow these commands to get the **Vue.js quiz application running locally**:

### 1. Clone and Navigate to the Project

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

```

### 2. Install Dependencies

```bash
npm install

```

This reads [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) and installs Vue 2.6.11, **vue-router**, **vue-i18n**, **@vue/cli-service**, and development tooling including ESLint and Babel. The exact versions are locked for reproducible builds.

### 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 any Vue component or translation file refresh instantly in the browser.

### 4. Access the Quiz Interface

Navigate to `http://localhost:8080/#/` to load [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue). Select any lesson from the UI to render the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component, which dynamically loads the appropriate translation JSON from `src/assets/translations/<lang>/lesson-<n>.json`.

### 5. Build for Production (Optional)

```bash
npm run build

```

Webpack bundles the application into static files in `dist/`, ready for deployment to Azure Static Web Apps or any static hosting platform.

### 6. Lint and Fix Code Style

```bash
npm run lint

```

Executes ESLint with the Vue-essential preset, auto-fixing trivial formatting issues.

## Customizing Quizzes and Localization

The **Vue.js quiz application** supports multiple languages through **vue-i18n**. To modify quiz content:

- Edit JSON files in `src/assets/translations/<lang>/lesson-<n>.json`
- Add new languages by creating translation folders and registering them in [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js)
- Update [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to include new language options in the selector dropdown

The [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component automatically re-renders when translation data changes, making localization testing straightforward during development.

## Troubleshooting Common Issues

| Issue | Solution |
|-------|----------|
| Port 8080 already in use | Run `npm run serve -- --port 8081` to specify an alternative port |
| Dependencies fail to install | Delete `node_modules/` and [`package-lock.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package-lock.json), then run `npm install` again |
| Translation files not loading | Verify JSON syntax in `src/assets/translations/` and check browser console for 404 errors |
| Hot-reload not working | Ensure you're editing files within `src/` and not the built `dist/` folder |

## Summary

- **Clone** the Microsoft/AI-For-Beginners repository and enter `etc/quiz-app/`
- **Install** dependencies with `npm install` to get Vue 2, router, and i18n
- **Develop** using `npm run serve` for hot-reload at localhost:8080
- **Build** production assets with `npm run build` for deployment
- **Customize** quizzes by editing translation JSON files in `src/assets/translations/`

## Frequently Asked Questions

### What version of Vue 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 pinned alongside **vue-router** for SPA navigation and **vue-i18n** for localization. The project uses **@vue/cli-service** 4.x for build tooling rather than Vite or Vue 3.

### Can I run the quiz application without cloning the entire repository?

No—you need the full repository clone because the quiz application references lesson metadata and translation files from the broader AI-For-Beginners curriculum structure. However, you can perform a shallow clone with `git clone --depth 1` to reduce download size if you only need the latest version.

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

Create a new folder under `src/assets/translations/` with your language code (e.g., `es/` for Spanish), add translated [`lesson-0.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-0.json) through [`lesson-24.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-24.json) files mirroring the existing structure, 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). Finally, add the language option to the dropdown in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue).