Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 months 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 (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T19:45:38.000Z (5 months ago)
- Last Synced: 2024-05-02T13:38:57.066Z (5 months 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.49 MB
- Stars: 899
- Watchers: 10
- Forks: 299
- Open Issues: 4
-
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
# 
[](https://app.codecov.io/gh/mutoe/vue3-realworld-example-app/branch/master)
[](https://github.com/mutoe/vue3-realworld-example-app/actions?query=branch%3Amaster)
[](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!