gothinkster/vue-realworld-example-app

Vue 3 codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the 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. 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, the option officially endorsed by the Vue team.

Stack

• Vue 3 (Composition API / <script setup>) with Pinia and Vue Router 5
• Vite (via @vitejs/plugin-vue) for dev server and builds
• Bun as package manager / script runner
• Playwright running the official RealWorld e2e test suite, vendored as the realworld git submodule
• marked + DOMPurify for safe markdown rendering, date-fns for dates
• A thin fetch wrapper instead of axios (src/common/api.service.js)

The visual theme is the shared Conduit Minimal 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:

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):

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:

# first time only: install Playwright browsers
bunx playwright install --with-deps chromium

bun run test

Playwright boots the Vite dev server itself (see playwright.config.ts).

Linting & formatting

bun run lint     # ESLint + eslint-plugin-vue (catches Vue-specific errors, incl. in templates)
bun run format   # Prettier (code style)

These are complementary, not alternatives: Prettier only formats, while eslint-plugin-vue is currently the only linter that understands Vue SFC templates. eslint-config-prettier disables the stylistic ESLint rules so the two don't fight.

Credits

Originally created by Emmanuel Vilsbol and the gothinkster/vue-realworld-example-app contributors. See the RealWorld project for the spec, and CodebaseShow for the same app built with other stacks.