German-GM/vue-3-playground

Vue 3 Playground packed with all the new features

Vue 3 Playground

Vue 3 Playground stands as a learning project for those who want to get familiar with the new features of Vue 3.

The project aims to include all the new features. If you find something missing please create an issue/PR.

The application is a shopping cart where you can alter the name, price and quantity of the products and recalculates the total price based on the items and used coupon.

The playground is available also in online version.

New APIs covered

• createApp
• use
• ref
• reactive
• computed
• toRefs
• watchEffect
• watch
• onMount
• onUnmount
• onUpdate
• onErrorCaptured
• useStore
• useRoute
• emit
• provide
• inject
• createStore
• createRouter
• defineComponent
• defineAsyncComponent
• h
• JSX
• Suspense
• Async Component
• Teleport
• Fragments
• Multiple v-models
• Scoped slot
• Custom directive

Further articles/videos

• Composition API docs
• RFCs describing new features
• Reactivity: Vue 2 vs Vue 3
• Global Vue Meetup featuring Evan You
• State of Vuenion
• The process: Making Vue 3
• Vue 3 Async Components and Bundle Splitting
• Reactivity in Vue 2, 3, and the Composition API
• React Hooks vs. Vue 3 Composition API

Contributing

This project is under development. If you have any idea how to include more and more new features of Vue 3 in this application feel free to share your ideas in an issue/PR.