{"id":13683784,"url":"https://github.com/sonicoder86/vue-3-playground","last_synced_at":"2025-04-04T22:07:58.266Z","repository":{"id":39158192,"uuid":"266300665","full_name":"sonicoder86/vue-3-playground","owner":"sonicoder86","description":"Vue 3 Playground packed with all the new features","archived":false,"fork":false,"pushed_at":"2024-02-25T13:43:16.000Z","size":1397,"stargazers_count":514,"open_issues_count":4,"forks_count":69,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-28T21:06:55.870Z","etag":null,"topics":["composition-api","vite","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vuesomedev.github.io/vue-3-playground/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonicoder86.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"blacksonic","open_collective":null,"ko_fi":"blacksonic","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-05-23T09:07:02.000Z","updated_at":"2025-03-26T23:59:18.000Z","dependencies_parsed_at":"2024-01-15T17:39:26.810Z","dependency_job_id":"da17b73c-ad07-46ad-a15c-0266a386a00a","html_url":"https://github.com/sonicoder86/vue-3-playground","commit_stats":null,"previous_names":["sonicoder86/vue-3-playground","vuesomedev/vue-3-playground","blacksonic/vue-3-playground"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fvue-3-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fvue-3-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fvue-3-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fvue-3-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonicoder86","download_url":"https://codeload.github.com/sonicoder86/vue-3-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256112,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","vite","vue","vue3","vuejs"],"created_at":"2024-08-02T13:02:33.413Z","updated_at":"2025-04-04T22:07:58.243Z","avatar_url":"https://github.com/sonicoder86.png","language":"Vue","funding_links":["https://patreon.com/blacksonic","https://ko-fi.com/blacksonic"],"categories":["Vue"],"sub_categories":[],"readme":"# Vue 3 Playground\n\nVue 3 Playground stands as a learning project for those who want to get familiar with [the new features of Vue 3](https://composition-api.vuejs.org/).\n[The official documentation](https://v3.vuejs.org/) is now available!\n\nThe project aims to include all the new features. If you find something missing please create an issue/PR.\n\nThe application is a shopping cart where you can alter the name, price and quantity of the products and\nrecalculates the total price based on the items and used coupon.\n\nThe playground is available also [in online version](https://codesandbox.io/s/github/vuesomedev/vue-3-playground).\n\nIf you want to switch to the Typescript folder uncomment the link to the Typescript main file in `index.html`\nand comment out the Javascript main file.\n\n![Vue 3 Playground](./images/screenshot.png \"Vue 3 Playground\")\n\n### New APIs covered\n\nThe Typescript equivalents can be found in the `src-typescript` folder (file names are the same).\n\n- [createApp](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html)\n- [mount](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html#mount)\n- [use](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html#use)\n- [ref](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/refs-api.html#ref)\n- [reactive](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/basic-reactivity.html#reactive)\n- [computed](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#computed)\n- [toRefs](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [Composition API docs](https://composition-api.vuejs.org/#code-organization)\n- [watchEffect](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#watcheffect)\n- [watch](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#watch)\n- [onMount](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks)\n- [onUnmount](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks)\n- [onUpdate](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks)\n- [onErrorCaptured](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks)\n- [useStore](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/App.vue) - [Vuex 4 docs](https://github.com/vuejs/vuex/tree/4.0)\n- [useRoute](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Checkout.vue) - [Vue 3 router docs](https://github.com/vuejs/vue-router-next)\n- [emit](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Coupon.vue)\n- [provide](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/version.js) - [API docs](https://v3.vuejs.org/api/composition-api.html#provide-inject)\n- [inject](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/version.js) - [API docs](https://v3.vuejs.org/api/composition-api.html#provide-inject)\n- [createStore](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/store.js) - [Vuex 4 docs](https://github.com/vuejs/vuex/tree/4.0)\n- [createRouter](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/router.js) - [Vue 3 router docs](https://github.com/vuejs/vue-router-next)\n- [defineComponent](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Payment.jsx) - [API docs](https://v3.vuejs.org/api/global-api.html#definecomponent)\n- [defineAsyncComponent](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/AsyncPayment.js) - [API docs](https://v3.vuejs.org/api/global-api.html#defineasynccomponent)\n- [h](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Spinner.js) - [API docs](https://v3.vuejs.org/guide/render-function.html)\n- [JSX](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Payment.jsx)\n- [Suspense](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue)\n- [Async Component](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Exchange.vue)\n- [Teleport](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Header.vue) - [API docs](https://v3.vuejs.org/guide/teleport.html#using-with-vue-components)\n- [Fragments](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/App.vue)\n- [Multiple v-models](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [RFC docs](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md)\n- [Scoped slot](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [RFC docs](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)\n- [Custom directive](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/at-sign.js)\n\n### Further articles/videos\n\n- [Official documentation](https://v3.vuejs.org/)\n- [Composition API docs](https://composition-api.vuejs.org/)\n- [RFCs describing new features](https://github.com/vuejs/rfcs)\n- [Reactivity: Vue 2 vs Vue 3](https://www.vuemastery.com/blog/Reactivity-Vue2-vs-Vue3/)\n- [Global Vue Meetup featuring Evan You](https://www.youtube.com/watch?v=Nk3cC7xNfkk)\n- [State of Vuenion](https://www.vuemastery.com/conferences/vueconf-us-2020/state-of-the-vuenion/)\n- [The process: Making Vue 3](https://increment.com/frontend/making-vue-3/)\n- [Vue 3 Async Components and Bundle Splitting](https://lmiller1990.github.io/electic/posts/20200503_vue_3_async_components_and_bundle_splitting.html)\n- [Reactivity in Vue 2, 3, and the Composition API](https://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/)\n- [React Hooks vs. Vue 3 Composition API](https://academy.esveo.com/en/blog/Yr)\n- [Vue 3 Composition API TodoMVC implementation with Vuex and testing](https://github.com/vuesomedev/todomvc-vue-composition-api)\n\n### Contributing\n\nIf 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.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonicoder86%2Fvue-3-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonicoder86%2Fvue-3-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonicoder86%2Fvue-3-playground/lists"}