# How to Set Up the Vue.js Quiz Application for Local Development

> Set up the Vue.js quiz application for local development. Clone the repo, install dependencies, and run the dev server with simple npm commands. Get started quickly.

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

---

**To set up the Vue.js quiz application for local development, clone the microsoft/AI-For-Beginners repository, navigate to `etc/quiz-app`, install dependencies with `npm install`, and launch the dev server using `npm run serve`.**

The quiz application is a Vue 2.x single-page app located in the `etc/quiz-app` directory of the **microsoft/AI-For-Beginners** curriculum. It delivers pre- and post-lecture quizzes using Vue Router for navigation and Vue I18n for multilingual support. To customize quiz content or modify the UI, you must first set up the Vue.js quiz application for local development on your machine.

## Step-by-Step Local Development Setup

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

First, clone the repository and change into the quiz application directory:

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

```

The `etc/quiz-app` folder contains the complete Vue project scaffolding, including [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) and the `src/` directory.

### Install Dependencies

Run `npm install` to install the runtime and development dependencies defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json):

```bash
npm install

```

This command installs **Vue 2.6.11**, `vue-router`, `vue-i18n`, and the Vue CLI service (`@vue/cli-service`) along with ESLint and Babel configurations. The [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) defines three primary scripts: `serve` for development, `build` for production, and `lint` for code quality.

### Start the Development Server

Launch the hot-reload development server with:

```bash
npm run serve

```

By default, the Vue CLI dev server starts at `http://localhost:8080`. This command compiles the application and watches for file changes, automatically reloading the browser when you modify components.

## Application Architecture Overview

Understanding the key files helps troubleshoot issues during local development.

### Entry Point and Vue Instance Configuration

In [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js), the application creates a Vue instance, installs the router and internationalization plugins, and mounts to the DOM element `<div id="app">` defined in [`public/index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/public/index.html):

```javascript
// src/main.js - Bootstrapping logic
new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

```

This file initializes the app's core dependencies before rendering the root [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) component.

### Routing and Layout

The [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) file configures Vue Router with declarative routes:

- `/` maps to [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue)
- `*` (catch-all) maps to [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue)

The [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) component provides the root layout, including a language selector driven by `vue-i18n` and a `<router-view>` placeholder where page components render based on the current route.

### Quiz Logic and Localization

The [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) file implements the core quiz functionality, including question rendering, answer validation, and progress tracking. It pulls localized content from JSON files stored in `src/assets/translations/<lang>/lesson-<n>.json`. The [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) aggregates these files for consumption by `vue-i18n`, enabling the app to switch languages dynamically without reloading.

## Production Build Process

When ready to deploy, generate optimized static files using:

```bash
npm run build

```

This command invokes the Vue CLI webpack configuration to bundle the application into the `dist/` directory, producing minified HTML, CSS, and JavaScript assets ready for hosting on platforms like Azure Static Web Apps.

## Summary

- **Clone** the microsoft/AI-For-Beginners repository and navigate to `etc/quiz-app`.
- **Install** dependencies via `npm install` to fetch Vue 2.x, Vue Router, and Vue I18n.
- **Develop** locally using `npm run serve`, which starts a hot-reload server at `localhost:8080`.
- **Modify** quiz content in `src/assets/translations/` or UI logic in [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue).
- **Build** for production with `npm run build`, outputting static files to `dist/`.

## Frequently Asked Questions

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

The application uses Vue CLI 4.x and requires Node.js version 10.x or higher. The [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) specifies dependencies compatible with Vue 2.6.11, which runs on most modern Node LTS versions.

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

Create a new folder under `src/assets/translations/` using the language code (e.g., `es` for Spanish), then add [`lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json) files following the existing structure. Update [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) to import and register the new locale with `vue-i18n`.

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

While the quiz app is self-contained within `etc/quiz-app`, it relies on relative paths and the repository structure for asset resolution. You must clone the full repository to ensure all dependencies and build configurations resolve correctly.

### How do I debug the Quiz.vue component in isolation?

Start the dev server with `npm run serve`, then navigate to `http://localhost:8080/#/` to load the Home route. Select a lesson from the UI to render the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component with live data. You can use Vue DevTools browser extension to inspect the component state and props in real-time.