vue-realworld-example-app

# ![RealWorld Example App](./static/rwv-logo.png)

> **Vue 3** codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/realworld-apps/realworld) spec and API.

Project demo is available at https://vue-vuex-realworld.netlify.app/

This codebase demonstrates a fully fledged frontend application built with **Vue 3**, including CRUD operations, authentication, routing, pagination, and more — backed by the shared RealWorld end-to-end test suite.

## Looking for the Vue 2 version?

The original Vue 2 implementation lives on as a frozen reference at [realworld-apps/vue-2-realworld-example-app](https://github.com/realworld-apps/vue-2-realworld-example-app). Vue 2 reached end of life on December 31, 2023, so that repo is kept for studying patterns and comparing frameworks — not as a base for new projects. If your company maintains a Vue 2 application that cannot migrate yet, see the notes there about [HeroDevs Never-Ending Support](https://www.herodevs.com/support/nes-vue), the option [officially endorsed by the Vue team](https://v2.vuejs.org/lts/).

## Stack

- [Vue 3](https://vuejs.org/) (Composition API / `<script setup>`) with [Pinia](https://pinia.vuejs.org/) and [Vue Router 5](https://router.vuejs.org/)
- [Vite](https://vitejs.dev/) (via `@vitejs/plugin-vue`) for dev server and builds
- [Bun](https://bun.sh/) as package manager / script runner
- [Playwright](https://playwright.dev/) running the official [RealWorld e2e test suite](https://github.com/realworld-apps/realworld), vendored as the `realworld` git submodule
- [marked](https://marked.js.org/) + [DOMPurify](https://github.com/cure53/DOMPurify) for safe markdown rendering, [date-fns](https://date-fns.org/) for dates
- A thin `fetch` wrapper instead of axios (`src/common/api.service.js`)

The visual theme is the shared [Conduit Minimal CSS](https://github.com/realworld-apps/realworld/blob/main/assets/theme/styles.css) from the RealWorld spec, imported directly from the submodule (`realworld/assets/theme/styles.css`) in `src/main.js` so it stays in sync with the templates and the e2e selectors contract.

## Getting started

The spec and test suite live in a git submodule, and the app imports its theme from there, so clone with submodules:

```bash
git clone --recurse-submodules https://github.com/realworld-apps/vue-realworld-example-app
# or, in an existing clone:
git submodule update --init

bun install

# serve with hot reload at http://localhost:8080
bun run serve

# production build / preview
bun run build
bun run preview
```

## Configuration

The backend API defaults to `https://api.realworld.show/api`. Point the app at any other spec-compliant RealWorld backend with the `VITE_API_URL` env var (in the shell, or an `.env.local` file):

```bash
VITE_API_URL=http://localhost:8000/api bun run serve
```

## Testing

The app is tested with the official RealWorld Playwright e2e suite, which exercises it against the spec:

```