# What Framework is Used for RomM Frontend: Vue 3, Vuetify, and Vite Explained

> Discover the RomM frontend framework. Learn how Vue 3, Vuetify, and Vite work together to create a modern and efficient user interface for the RomM app.

- Repository: [The RomM Project/romm](https://github.com/rommapp/romm)
- Tags: deep-dive
- Published: 2026-07-07

---

**RomM's modern frontend is built with Vue 3.4.27 using the Composition API, paired with Vuetify 3 for Material Design components and bundled with Vite.**

RomM is a self-hosted ROM management application that provides a clean web interface for organizing game collections. Understanding what framework is used for RomM frontend is essential for developers contributing to the project or building similar Vue-based applications. The stack is explicitly documented in the project's architecture files and dependency manifests.

## Vue 3 and the Composition API

The core of RomM's user interface relies on **Vue 3** (specifically version 3.4.27), implemented using the Composition API with `<script setup>` syntax. This approach provides better TypeScript integration and cleaner code organization compared to the Options API.

In [`frontend/src/main.ts`](https://github.com/rommapp/romm/blob/main/frontend/src/main.ts), the application bootstrap follows standard Vue 3 patterns:

```typescript
import { createApp } from 'vue'
import RomM from './RomM.vue'
import { registerPlugins } from '@/plugins'

const app = createApp(RomM)
registerPlugins(app)
app.mount('#app')

```

This entry point initializes the root component [`RomM.vue`](https://github.com/rommapp/romm/blob/main/RomM.vue) and registers essential plugins including Vuetify, Pinia for state management, vue-i18n for internationalization, and mitt for event handling.

## Vuetify 3 for Material Design Components

RomM utilizes **Vuetify 3** as its component library, providing Material Design components that ensure a consistent, responsive interface across devices. The integration is configured in [`frontend/src/plugins/vuetify.ts`](https://github.com/rommapp/romm/blob/main/frontend/src/plugins/vuetify.ts).

Components throughout `frontend/src/components/` (such as [`GameCard.vue`](https://github.com/rommapp/romm/blob/main/GameCard.vue)) follow this pattern:

```vue
<template>
  <v-card>
    <v-card-title>{{ title }}</v-card-title>
    <v-card-text>{{ message }}</v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('Hello from RomM')
const message = ref('Powered by Vue 3 + Vuetify')
</script>

```

The root application structure in [`frontend/src/RomM.vue`](https://github.com/rommapp/romm/blob/main/frontend/src/RomM.vue) demonstrates the Vuetify layout components:

```vue
<template>
  <v-app>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { useTheme } from '@/composables/useUISettings'
</script>

```

## Key Frontend Files and Architecture

The RomM frontend architecture is organized under the `frontend/` directory with several critical files:

- **[`frontend/package.json`](https://github.com/rommapp/romm/blob/main/frontend/package.json)** – Declares Vue 3.4.27, Vuetify 3, and Vite as core dependencies
- **[`frontend/src/main.ts`](https://github.com/rommapp/romm/blob/main/frontend/src/main.ts)** – Application entry point that creates the Vue app and registers plugins
- **[`frontend/src/RomM.vue`](https://github.com/rommapp/romm/blob/main/frontend/src/RomM.vue)** – Root component that mounts the entire application
- **[`frontend/src/plugins/vuetify.ts`](https://github.com/rommapp/romm/blob/main/frontend/src/plugins/vuetify.ts)** – Configures Vuetify themes and component defaults
- **[`docs/FRONTEND_ARCHITECTURE.md`](https://github.com/rommapp/romm/blob/main/docs/FRONTEND_ARCHITECTURE.md)** – Documents the framework version and architectural decisions

According to the frontend architecture documentation, the version is explicitly listed as "Framework | Vue 3.4.27", confirming the current implementation target.

## Build Tooling and Supporting Libraries

Beyond the core framework, RomM's frontend toolchain includes several essential technologies:

- **Vite** – Handles module bundling and development server functionality
- **Pinia** – Manages application state with full TypeScript support
- **vue-i18n** – Provides internationalization capabilities for multi-language support
- **mitt** – Serves as a lightweight event bus for component communication

These tools are initialized through the `registerPlugins()` function in [`main.ts`](https://github.com/rommapp/romm/blob/main/main.ts), creating a fully-featured single-page application architecture.

## Summary

- RomM uses **Vue 3.4.27** with the Composition API and `<script setup>` syntax as its core framework
- **Vuetify 3** provides the Material Design component library for the user interface
- The application is bundled with **Vite** and managed through the [`frontend/package.json`](https://github.com/rommapp/romm/blob/main/frontend/package.json) dependency tree
- Key entry points include [`frontend/src/main.ts`](https://github.com/rommapp/romm/blob/main/frontend/src/main.ts) for bootstrapping and [`frontend/src/RomM.vue`](https://github.com/rommapp/romm/blob/main/frontend/src/RomM.vue) as the root component
- Supporting libraries like Pinia, vue-i18n, and mitt extend the core functionality

## Frequently Asked Questions

### What version of Vue does RomM use?

RomM currently uses **Vue 3.4.27**, as declared in both [`frontend/package.json`](https://github.com/rommapp/romm/blob/main/frontend/package.json) and documented in [`docs/FRONTEND_ARCHITECTURE.md`](https://github.com/rommapp/romm/blob/main/docs/FRONTEND_ARCHITECTURE.md). This version specifically utilizes the Composition API with `<script setup>` syntax rather than the legacy Options API.

### Does RomM use TypeScript for its frontend?

Yes, RomM's frontend is built with TypeScript. The source files use `.ts` extensions (such as [`main.ts`](https://github.com/rommapp/romm/blob/main/main.ts)) and `.vue` single-file components with `lang="ts"` attributes. This provides type safety across the application, particularly when working with Vuetify components and Pinia stores.

### What UI component library does RomM use?

RomM uses **Vuetify 3**, a Material Design component framework for Vue.js. The library is configured in [`frontend/src/plugins/vuetify.ts`](https://github.com/rommapp/romm/blob/main/frontend/src/plugins/vuetify.ts) and provides components like `v-card`, `v-app`, `v-main`, and `v-btn` that appear throughout the interface in files like [`frontend/src/components/GameCard.vue`](https://github.com/rommapp/romm/blob/main/frontend/src/components/GameCard.vue).

### How is the RomM frontend bundled and served?

The RomM frontend is bundled using **Vite**, a modern build tool that provides fast development server startup and optimized production builds. Vite handles the compilation of Vue single-file components, TypeScript transpilation, and asset optimization, as configured in the `frontend/` directory's build pipeline.