Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mutoe/vue3-realworld-example-app

Explore the charm of Vue composition API! Vite?
https://github.com/mutoe/vue3-realworld-example-app

composition-api cypress realworld testing-library-vue typescript vite vue-test-utils vue3

Last synced: 24 days ago
JSON representation

Explore the charm of Vue composition API! Vite?

Host: GitHub
URL: https://github.com/mutoe/vue3-realworld-example-app
Owner: mutoe
License: mit
Created: 2020-09-27T14:45:16.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2024-10-01T19:05:47.000Z (about 1 month ago)
Last Synced: 2024-10-02T04:41:11.596Z (about 1 month ago)
Topics: composition-api, cypress, realworld, testing-library-vue, typescript, vite, vue-test-utils, vue3
Language: TypeScript
Homepage: https://vue3-realworld-example-app-mutoe.vercel.app
Size: 3.91 MB
Stars: 944
Watchers: 10
Forks: 340
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

fucking-awesome-vite - vue3-realworld-example-app - Realworld app implementation using Vue 3 + TypeScript + Composition API. (Projects Using Vite.js / Apps/Websites)
awesome-vue-3 - vue3-realworld-example-app - [Realworld](https://github.com/gothinkster/realworld) app implementation using Vue 3 + TypeScript + Composition Api (Examples)
awesome-vite - vue3-realworld-example-app - Realworld app implementation using Vue 3 + TypeScript + Composition API. (Projects Using Vite.js / Apps/Websites)

README

        # ![RealWorld Example App](logo.png)

[![Codecov branch](https://img.shields.io/codecov/c/github/mutoe/vue3-realworld-example-app/master?logo=codecov&style=for-the-badge)](https://app.codecov.io/gh/mutoe/vue3-realworld-example-app/branch/master)

[![GitHub Workflow Status (branch)](https://img.shields.io/github/actions/workflow/status/mutoe/vue3-realworld-example-app/test.yml?logo=github&style=for-the-badge)](https://github.com/mutoe/vue3-realworld-example-app/actions?query=branch%3Amaster)

[![code style](https://img.shields.io/badge/Code_Style-Anthony_Fu-333?style=for-the-badge&logo=eslint)](https://github.com/anthony/eslint-config)

> ### [Vue3](https://v3.vuejs.org/) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.

- [Demo](https://vue3-realworld-example-app-mutoe.vercel.app)

- [RealWorld](https://github.com/gothinkster/realworld)

This codebase was created to demonstrate a fully fledged fullstack application built with **Vue3** including CRUD operations, authentication, routing, pagination, and more.

We've gone to great lengths to adhere to the **Vue3** community styleguides & best practices.

For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.

# What works?

- [x] [Vite](https://github.com/vitejs/vite)

- [x] [Composition API](https://composition-api.vuejs.org/)

- [x] [SFC \ sugar](https://v3.vuejs.org/api/sfc-script-setup.html)

- [x] [Suspense](https://v3.vuejs.org/guide/component-dynamic-async.html#using-with-suspense) (Experimental)

- [x] [Vue router](https://next.router.vuejs.org/)

- [x] [Pinia](https://pinia.vuejs.org/) for state management

- [x] [TypeScript](https://www.typescriptlang.org/) and [Vue tsc](https://github.com/johnsoncodehk/volar/tree/master/vue-language-tools/vue-tsc) for static analysis

- [x] [swagger-typescript-api](https://github.com/acacode/swagger-typescript-api) for auto generate interface from swagger

- [x] [ESLint](https://eslint.vuejs.org/) and [@mutoe/eslint-config](https://github.com/mutoe/eslint-config) for linting and styling (based on [@anthony/eslint-config](https://github.com/anthony/eslint-config))

- [x] [Vitest](https://vitest.dev/) for unit testing

- [x] [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/) for component testing

- [x] [Cypress](https://docs.cypress.io) for E2E testing

- [x] [GitHub Actions](https://docs.github.com/en/actions) CI/CD

> Basically, some of they are necessary features for the development of medium to large projects, and you can also use this repository as a starter.

>

> Enjoy it! 😄

# Getting started

```shell script

pnpm install

# Development

pnpm dev

# Build dist

pnpm build

# Run unit tests

pnpm test:unit

pnpm test:unit:ci

# Run E2E tests

pnpm test:e2e

pnpm test:e2e:ci

```

# Contributors

<a href="https://github.com/mutoe/vue3-realworld-example-app/graphs/contributors">

  <img src="https://contributors-img.web.app/image?repo=mutoe/vue3-realworld-example-app" />

</a>

Made with [contributors-img](https://contributors-img.web.app).

## Vue related implementations of the Realworld app

- [gothinkster/vue-realworld-example-app](https://github.com/gothinkster/vue-realworld-example-app) - vue2, js

- [AlexBrohshtut/vue-ts-realworld-app](https://github.com/AlexBrohshtut/vue-ts-realworld-app) - vue2, ts, class-component

- [devJang/nuxt-realworld](https://github.com/devJang/nuxt-realworld) - nuxt, ts, composition api

- [levchak0910/vue3-ssr-realworld-example-app](https://github.com/levchak0910/vue3-ssr-realworld-example-app) - vue3, ssr

## Sponsor

Thanks **JetBrains** for providing IDE support!