# How to Run the Vue.js Quiz App Locally for Development

> Easily run the Vue.js quiz app locally for development. Clone the ML-For-Beginners repo, install dependencies, and start the dev server with npm run serve.

- Repository: [Microsoft/ML-For-Beginners](https://github.com/microsoft/ML-For-Beginners)
- Tags: tutorial
- Published: 2026-02-28

---

**To run the Vue.js quiz app locally, clone the microsoft/ML-For-Beginners repository, navigate to the `quiz-app` directory, install dependencies with `npm install`, and start the development server with `npm run serve`.**

The ML-For-Beginners curriculum includes an interactive Vue.js quiz application for pre- and post-lecture assessments. This Vue 3 single-page application (SPA) supports multiple languages and hot-reloading for rapid development. Whether you are modifying quiz content or contributing to the UI, running the app locally requires only Node.js and a few simple commands.

## Prerequisites for Local Development

Before running the Vue.js quiz app, ensure you have **Node.js** (version 14 or higher recommended) and **npm** installed. The project uses standard Vue CLI tooling defined in [`package.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/package.json).

## Step-by-Step Guide to Running the Quiz App Locally

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

First, clone the microsoft/ML-For-Beginners repository and change into the quiz-app directory:

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

```

### Install Dependencies

Install the Node.js dependencies defined in [`package.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/package.json), which include Vue 3, Vue Router, and Vue I18n:

```bash
npm install

```

### Start the Development Server

Launch the hot-reloading development server using the Vue CLI `serve` script:

```bash
npm run serve

```

By default, the server starts on `http://localhost:8080`. Open this URL in your browser to view the quiz app home page. To view a specific quiz, navigate to `/quiz/:id`, for example:

```

http://localhost:8080/quiz/1

```

## Understanding the Vue.js Quiz App Architecture

The quiz app follows standard Vue 3 project conventions. Key source files include:

- **[`src/main.js`](https://github.com/microsoft/ML-For-Beginners/blob/main/src/main.js)** – Bootstraps the Vue application, registers the router from [`src/router/index.js`](https://github.com/microsoft/ML-For-Beginners/blob/main/src/router/index.js), and mounts the app to the DOM element `#app`.
- **[`src/router/index.js`](https://github.com/microsoft/ML-For-Beginners/blob/main/src/router/index.js)** – Configures Vue Router with HTML5 history mode, defining routes for the home page (`/`), dynamic quiz pages (`/quiz/:id`), and a 404 catch-all.
- **[`src/App.vue`](https://github.com/microsoft/ML-For-Beginners/blob/main/src/App.vue)** – Root component providing the navigation bar, locale selector, and `<router-view>` outlet. It supplies translation messages via the `i18n` option.
- **[`src/components/Quiz.vue`](https://github.com/microsoft/ML-For-Beginners/blob/main/src/components/Quiz.vue)** – Core quiz component that renders questions based on the route parameter `id`. It handles answer selection, progress tracking, and success/error messaging using data from `src/assets/translations/`.
- **`src/assets/translations/`** – Contains JSON files (e.g., [`en.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/en.json), [`fr.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/fr.json)) with localized quiz content and UI strings consumed by `vue-i18n`.

## Customizing the Development Environment

### Changing the Default Port

If port 8080 is occupied, specify an alternative port using the `--port` flag:

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

```

### Hot Module Replacement

The development server enables **hot-module replacement** (HMR) by default. When you modify components in `src/components/`, routes in `src/router/`, or translations in `src/assets/translations/`, the browser updates instantly without losing application state.

## Building for Production

When ready to deploy, create an optimized production build:

```bash
npm run build

```

This compiles and minifies the Vue 3 application into the `dist/` directory, ready for static hosting.

## Summary

- Clone the `microsoft/ML-For-Beginners` repository and navigate to the `quiz-app` directory.
- Install dependencies with `npm install` to set up Vue 3, Vue Router, and Vue I18n.
- Run `npm run serve` to start the local development server on `http://localhost:8080`.
- Access specific quizzes at `/quiz/:id` routes (e.g., `/quiz/1`).
- Modify [`src/components/Quiz.vue`](https://github.com/microsoft/ML-For-Beginners/blob/main/src/components/Quiz.vue) or translation files in `src/assets/translations/` to customize quiz content with hot-reloading.

## Frequently Asked Questions

### What Node.js version is required to run the Vue.js quiz app?

The quiz app requires Node.js version 14 or higher. This ensures compatibility with the Vue CLI tooling and Vue 3 dependencies defined in [`package.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/package.json).

### How do I change the default port when running the quiz app locally?

Use the `--port` flag when starting the development server: `npm run serve -- --port 8081`. This is useful when port 8080 is already occupied by another service.

### Where are the quiz questions stored in the ML-For-Beginners quiz app?

Quiz content is stored in JSON translation files located in `src/assets/translations/`. Files like [`en.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/en.json) and [`fr.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/fr.json) contain localized questions, answers, and UI strings consumed by the [`Quiz.vue`](https://github.com/microsoft/ML-For-Beginners/blob/main/Quiz.vue) component via `vue-i18n`.

### Can I run the quiz app without cloning the entire ML-For-Beginners repository?

While the recommended approach is cloning the full repository, you can manually download only the `quiz-app` folder from GitHub. However, you will miss the curriculum context and relative path references used in documentation. Cloning ensures you have all dependencies and can contribute changes back to the project.