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

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.

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:

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, which include Vue 3, Vue Router, and Vue I18n:

npm install

Start the Development Server

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

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 – Bootstraps the Vue application, registers the router from src/router/index.js, and mounts the app to the DOM element #app.
• 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 – Root component providing the navigation bar, locale selector, and <router-view> outlet. It supplies translation messages via the i18n option.
• 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, 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:

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:

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 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.

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 and fr.json contain localized questions, answers, and UI strings consumed by the 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}