mutoe / vue3-realworld-example-app

Explore the charm of Vue composition API! Vite?

Vue3 codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

• Demo
• 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 repo.

What works?

• Vite
• Composition API
• SFC <script setup> sugar
• Suspense (Experimental)
• Vue router
• Pinia for state management
• TypeScript and Vue tsc for static analysis
• swagger-typescript-api for auto generate interface from swagger
• ESLint and @mutoe/eslint-config for linting and styling (based on @anthony/eslint-config)
• Vitest for unit testing
• Testing Library for component testing
• Cypress for E2E testing
• GitHub 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

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

Made with contributors-img.

Vue related implementations of the Realworld app

• gothinkster/vue-realworld-example-app - vue2, js
• AlexBrohshtut/vue-ts-realworld-app - vue2, ts, class-component
• devJang/nuxt-realworld - nuxt, ts, composition api
• levchak0910/vue3-ssr-realworld-example-app - vue3, ssr

Sponsor

Thanks JetBrains for providing IDE support!