PavelZX / vue3-realworld

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 (master branch)
• Demo (script-setup branch)
• 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
• Suspense (Experimental)
• TypeScript
• ESLint
• Vue router
• Harlem (await Vuex v5)
• Unit test (Vue Test Utils)
• Unit test (Vue Testing Library)
• E2E test (Cypress)
• Vue tsc

What works in script-setup branch (based on the master branch)

• SFC script setup
• Script ref sugar (take 2)
• [x] Unit test (Vue Testing Library)
• Cypress component test

Why we have the second branch?

Getting started

yarn install

# Development
yarn dev

# Build dist
yarn build

# Run unit tests
yarn test:unit

# Run E2E tests
yarn cypress open # with GUI
yarn test:e2e # headless

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!