# How to Configure the Vue.js Quiz App for Local Development > Easily configure the Vue.js quiz app for local development by cloning the AI-For-Beginners repo, installing dependencies, and running the serve command. - Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners) - Tags: getting-started - Published: 2026-08-25 --- **To configure the Vue.js quiz app for local development, clone the microsoft/AI-For-Beginners repository, navigate to the `etc/quiz-app/` directory, run `npm install` to install Vue 2.x dependencies, and execute `npm run serve` to start the development server at `http://localhost:8080` with hot-reload enabled.** The quiz application serves as the interactive assessment layer for Microsoft's **AI For Beginners** curriculum, delivering pre- and post-lecture quizzes through a lightweight Vue 2.x single-page application. Located in the `etc/quiz-app/` directory of the repository, this project leverages Vue Router for client-side navigation and Vue i18n for multi-language support. This guide walks through the exact steps to configure the Vue.js quiz app for local development, including dependency management, architecture overview, and production build preparation. ## Step-by-Step Local Development Setup ### Clone the Repository and Navigate Begin by cloning the repository and changing 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.js project scaffolding, including [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json), the `src/` source directory, and the `public/` assets folder. ### Install Dependencies Execute the following command to install all required packages as defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json): ```bash npm install ``` This installs **Vue 2.6.11** along with **Vue Router**, **Vue i18n**, and the `@vue/cli-service` development server. The [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) file defines three primary scripts—`serve`, `build`, and `lint`—that manage the development lifecycle using webpack and ESLint. ### Launch the Development Server Start the local development environment with hot-reload: ```bash npm run serve ``` This command invokes the Vue CLI service, which processes [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) to bootstrap the application. The entry script creates the Vue instance, installs the router and i18n plugins, and mounts the app to the `
` element in [`public/index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/public/index.html). The dev server runs at `http://localhost:8080` by default, automatically reloading the browser when you modify source files. ## Core Application Architecture Understanding the project structure is essential for modifying quiz content or debugging localization issues. ### Entry Point and Bootstrapping The file [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) serves as the application entry point. It imports Vue, Vue Router, and Vue i18n, then creates the root Vue instance with the router and i18n configurations passed as options. Finally, it mounts the application to the DOM element with id `app`, making the entire component tree reactive. ### Routing Configuration The [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) file configures Vue-Router with declarative SPA routes: the root path `/` renders [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue), while the catch-all wildcard `*` renders [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue) for undefined URLs. This setup enables navigation between lessons without page refreshes. ### Localization and Quiz Data Localized quiz content resides in `src/assets/translations//lesson-.json` files, where each JSON contains the questions, options, and correct answers for a specific lesson. The [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) file aggregates these JSON files into a format consumable by `vue-i18n` during initialization. The [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) component implements the core quiz logic, dynamically loading the appropriate translation file based on the current route and selected language. It handles question rendering, answer validation, and progress tracking. The root component [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) provides the global layout, including a language selector that updates the `vue-i18n` locale and a `` placeholder where routed components render. ## Production Build Process When preparing the application for deployment, generate optimized static assets: ```bash npm run build ``` This command bundles the application with webpack, outputting minified HTML, CSS, and JavaScript files to the `dist/` directory. These files are ready for deployment on static hosting platforms such as Azure Static Web Apps. To check code quality and auto-fix trivial style issues before committing, run: ```bash npm run lint ``` This executes ESLint with the Vue-essential preset as configured in the project settings. ## Summary - The quiz application is located in `etc/quiz-app/` and requires **Vue 2.x**, Vue Router, and Vue i18n. - Run `npm install` to install dependencies specified in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json), including Vue `^2.6.11`. - Execute `npm run serve` to start the dev server at `localhost:8080`, bootstrapping from [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js). - Quiz content is stored as JSON files in `src/assets/translations/` and rendered by [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue). - Use `npm run build` to create production-ready static files in the `dist/` folder. ## Frequently Asked Questions ### What Node.js version is required to run the quiz app? The Vue 2.x ecosystem used in this project typically requires Node.js 10.x or higher, though modern LTS versions (14.x and above) are recommended. The [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) does not explicitly pin a Node version in the provided source analysis, but the Vue CLI tooling requires a compatible Node environment to execute the `serve` and `build` scripts. ### How do I modify quiz questions or add new lessons? Edit the JSON files located in `src/assets/translations//lesson-.json` to update question text, answer options, or correct indices. Each lesson corresponds to a numbered JSON file. Save your changes and refresh the browser; the development server will hot-reload and display the updated content in the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component without requiring a restart. ### Can I change the default development server port from 8080? Yes. You can specify an alternative port using the `--port` flag. For example, run `npm run serve -- --port 3000` to start the server on port 3000. This configuration only affects the local development environment and does not impact the production build output in `dist/`. ### How does the application handle multiple languages? The [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) file aggregates all language-specific JSON files and registers them with `vue-i18n` during initialization in [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js). The [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) component includes a language selector that updates `$i18n.locale`, causing [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) to dynamically load the corresponding translation files without reloading the page. To add support for a new language, create a folder under `src/assets/translations/` using the ISO language code and populate it with translated lesson JSON files.