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 official documentation is now available!

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.

If you want to switch to the Typescript folder uncomment the link to the Typescript main file in index.html and comment out the Javascript main file.

The Typescript equivalents can be found in the src-typescript folder (file names are the same).

createApp - API docs

mount - API docs

use - API docs

ref - API docs

reactive - API docs

computed - API docs

toRefs - Composition API docs

watchEffect - API docs

watch - API docs

onMount - API docs

onUnmount - API docs

onUpdate - API docs

onErrorCaptured - API docs

useStore - Vuex 4 docs

useRoute - Vue 3 router docs

emit

provide - API docs

inject - API docs

createStore - Vuex 4 docs

createRouter - Vue 3 router docs

defineComponent - API docs

defineAsyncComponent - API docs

h - API docs

JSX

Suspense

Async Component

Teleport - API docs

Fragments

Multiple v-models - RFC docs

Scoped slot - RFC docs

Custom directive

Official documentation

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

Vue 3 Composition API TodoMVC implementation with Vuex and testing

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.