The Nuxt RealWorld Example App is a full-stack boilerplate built with Nuxt and the Composition API that implements the RealWorld spec — a Medium.com clone called "Conduit" — with JWT authentication, CRUD articles, comments, pagination, favorites, and user follow features.
What is the Nuxt RealWorld Example App?
The Nuxt RealWorld Example App is a full-featured example application built with Nuxt and the Composition API, implementing the RealWorld spec (a Medium.com clone called "Conduit"). It takes the RealWorld API as a backend and produces a functional frontend with authentication, CRUD operations, routing, and pagination. The codebase runs on Nuxt, uses a custom API for all requests, and is demoed at https://nuxt-realworld.vercel.app. It was created by the community to adhere to Nuxt styleguides and best practices.
Key Features
- JWT authentication — Sign in and sign up pages authenticate users via JWT, storing the token in localStorage; a logout button appears on the settings page.
- Article CRUD — Create, read, update, and delete articles through the editor page at /editor and article detail pages at /article/article-slug-here.
- Comments — Create and delete comments on articles (no update support), with delete buttons only visible to the comment author.
- Pagination and feeds — Home page displays paginated lists of articles pulled from Feed, Global, or filtered by tag, with tag lists shown on the home page.
- Favorites and following — Users can favorite articles and follow other users, with favorite/author lists shown on profile pages at /profile/username and /profile/username/favorites.
- Markdown rendering — Article pages render markdown from the server client side.
- Composition API structure — The codebase organizes logic into api, components, compositions, pages, plugins, and types directories, with TypeScript declarations for Vue and the RealWorld model types.
Who is it for?
- Nuxt developers — They can study a production-like Nuxt app that demonstrates auth, CRUD, routing, and pagination while following Nuxt community styleguides.
- Composition API learners — The compositions folder shows how to extract and reuse logic using the @composition-api base logic in a Nuxt context.
- RealWorld spec implementers — Anyone building against the RealWorld API can use this codebase as a frontend reference, as it adheres to the RealWorld spec and API.
- Boilerplate seekers — Developers looking for a social blogging platform starter can copy the project, install dependencies with npm or yarn, and run dev, build, or generate commands.
What can you do with the Nuxt RealWorld Example App?
- Launch a blogging platform: Use the codebase as a starting point for a Medium-like site with user accounts, article publishing, comments, and following.
- Learn RealWorld patterns: Study how the app implements JWT auth, article CRUD, comment CRUD, and paginated feeds to apply the same patterns to your own Nuxt projects.
- Extend the demo: Fork the repository and modify the components, compositions, or pages to add features, since the project supports npm run dev, build, and generate workflows.
How does the Nuxt RealWorld Example App work?
The project is structured into directories that separate concerns: an api service for API calls, components for Vue single-file components, compositions for @composition-api base logic, pages for Nuxt page components, plugins to inject the api service, and types for Vue, Nuxt, and RealWorld model type declarations. After cloning, you install dependencies with npm or yarn, run npm run dev for hot reloading at localhost:3000, build for production, or generate a static project.
Alternatives
- gothinkster/vue-realworld-example-app — A Vue 2 and JavaScript implementation of the same RealWorld app.
- AlexBrohshtut/vue-ts-realworld-app — A Vue 2 and TypeScript version using class components.
- mutoe/vue3-realworld-example-app — A Vue 3 implementation built with Vite, TypeScript, and the Composition API.
FAQ
Is the Nuxt RealWorld Example App free to use?
The codebase is publicly available on GitHub and can be cloned and run locally with npm or yarn, so it is free to use for learning and as a starting point. No license or pricing information is stated in the repository.
How do I run the Nuxt RealWorld app locally?
Clone the repository, run npm install or yarn install to install dependencies, then run npm run dev or yarn dev for a hot-reload dev server at localhost:3000. For production, use npm run build; for a static site, use npm run generate.
What functionality does the Nuxt RealWorld app demonstrate?
It demonstrates a full blogging platform: JWT authentication (login, signup, logout), user settings, article CRUD, comment creation and deletion, paginated article feeds, favorites, following users, and profile pages. It also renders markdown in article pages.
What is the RealWorld spec?
RealWorld is a spec by Thinkster that defines a Medium.com clone called "Conduit" with a standard API. This Nuxt app implements the frontend of that spec, and links to the official RealWorld repository are included in the project README.
