# Architecture of the Vue.js Quiz Application in AI for Beginners

> Explore the Vue.js quiz application architecture in AI for Beginners. Learn about its single-page design, Vue Router, Vue-I18n, and component-driven approach using JSON for content.

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

---

**The Vue.js quiz application in Microsoft's AI for Beginners repository is a single-page Vue 2.x application using Vue Router for navigation and Vue-I18n for multilingual support, with a component-driven architecture where all quiz content is stored in JSON translation files.**

The quiz application serves as an interactive learning tool within the Microsoft AI-For-Beginners educational repository. Built with Vue 2.x, it demonstrates a clean separation of concerns between presentation logic and content management. Understanding the architecture of the Vue.js quiz application in AI for Beginners reveals how lightweight educational tools can leverage JSON-driven content and Vue's reactivity system to deliver multilingual quiz experiences without backend dependencies.

## High-Level Application Structure

The application follows a classic Vue single-page application (SPA) pattern with three core architectural layers: the root instance, routing layer, and view components.

### Root Instance and Entry Point

[`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) bootstraps the entire application. It creates the Vue instance, installs the Vue Router and Vue-I18n plugins, and mounts the application to the DOM element with id `app`. This file serves as the composition root, wiring together all external dependencies before the `App` component takes over rendering.

### Top-Level Layout Component

[`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) provides the shell layout for the entire application. It contains a navigation bar with a locale selector dropdown, a dynamic title derived from translation files, and the `<router-view>` outlet where page components render. The locale selector uses a `v-model` binding to a `locale` data property, which syncs to the root i18n instance via `this.$root.$i18n.locale`.

### Routing Layer

[`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) defines the navigation structure using Vue Router. It configures three routes:

1. The home path (`/`) rendering [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue)
2. A dynamic quiz path (`/quiz/:id`) rendering the `Quiz` component
3. A catch-all wildcard (`*`) rendering [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue) for 404 handling

## Component Hierarchy and Data Flow

The architecture implements a unidirectional data flow where JSON translation files serve as the single source of truth for all quiz content.

### Home View and Quiz Listing

[`src/views/Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/views/Home.vue) acts as the landing page. It accesses the translation messages through the i18n instance and iterates over `questions[currLocale]` to generate a list of available quizzes. Each quiz renders as a `<router-link>` element navigating to the specific quiz ID:

```vue
<!-- Home.vue creates router links -->
<router-link :to="`quiz/${quiz.id}`">{{ quiz.title }}</router-link>

```

### Quiz Component Logic

[`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) handles the interactive quiz experience. It extracts the quiz identifier from `$route.params.id`, retrieves the corresponding question data from the translation JSON, and manages the quiz state. The component tracks `currentQuestion` index, `complete` status, and `error` states through Vue's reactive data system.

The `handleAnswerClick` method implements the core quiz logic:

```javascript
handleAnswerClick(isCorrect) {
  this.error = false
  const next = this.currentQuestion + 1
  if (isCorrect) {
    if (next < 3) this.currentQuestion = next
    else this.complete = true
  } else {
    this.error = true
  }
}

```

### Error Handling

[`src/views/NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/views/NotFound.vue) provides a simple 404 page for unmatched routes, ensuring graceful degradation when users access invalid quiz IDs or non-existent paths.

## Internationalization Architecture

The application implements a data-first architecture where all UI content, including quiz questions and answers, lives outside the component code.

### Translation File Structure

Content resides in `src/assets/translations/` as JSON files organized by lesson and language. The [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) file aggregates these messages and exposes them to Vue-I18n. Each language pack contains quiz titles, questions, answer options, and completion messages.

### Runtime Locale Switching

The locale selector in [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) binds to a local `locale` data property. When changed, the component updates `this.$root.$i18n.locale`, triggering reactive updates across all components. This architecture allows switching between English (`en`) and Spanish (`es`) without page reloads:

```html
<select v-model="locale">
  <option>en</option>
  <option>es</option>
</select>

```

## Static Assets and Build Configuration

The `public/` directory contains [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html), which provides the mounting point for the Vue application, and [`routes.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/routes.json), which mirrors the router configuration for compatibility with static-site generators.

## Summary

- The application uses **Vue 2.x** with **Vue Router** and **Vue-I18n** plugins for a single-page architecture
- **Component-driven design** separates layout ([`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue)), views ([`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue), [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue)), and interactive components ([`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue))
- **JSON translation files** in `src/assets/translations/` serve as the single source of truth for all quiz content and questions
- **Dynamic routing** via `/quiz/:id` enables direct linking to specific lessons while the catch-all route handles 404s
- **Reactive locale switching** updates the entire UI without page reloads by modifying `this.$root.$i18n.locale`

## Frequently Asked Questions

### What version of Vue does the AI for Beginners quiz application use?

The application is built as a **Vue 2.x** single-page application according to the source code in [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js). It utilizes the Vue Router for client-side navigation and Vue-I18n for internationalization support, following the Vue 2 Options API patterns evident in the component structure.

### Where is the quiz content stored in the repository?

All quiz content resides in **JSON translation files** located under `src/assets/translations/`. These files contain lesson-specific questions, answer options, and titles for each supported language. The [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component dynamically loads this content based on the route parameter `id` and current locale, making the application entirely data-driven.

### How does the application handle navigation between different quizzes?

Vue Router manages navigation through the configuration in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js). The [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue) view generates `<router-link>` elements that navigate to `/quiz/:id` routes. The [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component then extracts the `id` from `$route.params.id` to display the appropriate quiz content from the translation data.

### Can the quiz application support additional languages beyond English and Spanish?

Yes, the architecture supports adding new languages by extending the JSON files in `src/assets/translations/` with new language keys and updating the locale selector in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to include the new language options. Vue-I18n automatically makes the new translations available throughout the application via the reactive locale system.