diff --git a/.travis.yml b/.travis.yml index 75ca0e9..d013e64 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: - - "12" + - "14" script: npm test before_deploy: npm run build deploy: diff --git a/README.md b/README.md index c5868c5..b310c19 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,5 @@ # Vue 3 Playground -[](https://travis-ci.com/blacksonic/vue-3-playground) -[](https://david-dm.org/blacksonic/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](https://composition-api.vuejs.org/). [The official documentation](https://v3.vuejs.org/) is now available! @@ -11,7 +8,7 @@ The project aims to include all the new features. If you find something missing 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](https://codesandbox.io/s/github/blacksonic/vue-3-playground). +The playground is available also [in online version](https://codesandbox.io/s/github/vuesomedev/vue-3-playground). 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. @@ -22,37 +19,37 @@ and comment out the Javascript main file. The Typescript equivalents can be found in the `src-typescript` folder (file names are the same). -- [createApp](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html) -- [mount](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html#mount) -- [use](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html#use) -- [ref](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/refs-api.html#ref) -- [reactive](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/basic-reactivity.html#reactive) -- [computed](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#computed) -- [toRefs](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) - [Composition API docs](https://composition-api.vuejs.org/#code-organization) -- [watchEffect](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#watcheffect) -- [watch](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#watch) -- [onMount](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) -- [onUnmount](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) -- [onUpdate](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) -- [onErrorCaptured](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) -- [useStore](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/App.vue) - [Vuex 4 docs](https://github.com/vuejs/vuex/tree/4.0) -- [useRoute](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Checkout.vue) - [Vue 3 router docs](https://github.com/vuejs/vue-router-next) -- [emit](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Coupon.vue) -- [provide](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/version.js) - [API docs](https://v3.vuejs.org/api/composition-api.html#provide-inject) -- [inject](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/version.js) - [API docs](https://v3.vuejs.org/api/composition-api.html#provide-inject) -- [createStore](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/store.js) - [Vuex 4 docs](https://github.com/vuejs/vuex/tree/4.0) -- [createRouter](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/router.js) - [Vue 3 router docs](https://github.com/vuejs/vue-router-next) -- [defineComponent](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Payment.jsx) - [API docs](https://v3.vuejs.org/api/global-api.html#definecomponent) -- [defineAsyncComponent](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/AsyncPayment.js) - [API docs](https://v3.vuejs.org/api/global-api.html#defineasynccomponent) -- [h](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Spinner.js) - [API docs](https://v3.vuejs.org/guide/render-function.html) -- [JSX](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Payment.jsx) -- [Suspense](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Cart.vue) -- [Async Component](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Exchange.vue) -- [Teleport](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/components/Header.vue) - [API docs](https://v3.vuejs.org/guide/teleport.html#using-with-vue-components) -- [Fragments](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/App.vue) -- [Multiple v-models](https://github.com/blacksonic/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) -- [Scoped slot](https://github.com/blacksonic/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) -- [Custom directive](https://github.com/blacksonic/vue-3-playground/blob/master/src-javascript/at-sign.js) +- [createApp](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [emit](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Coupon.vue) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [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) +- [JSX](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Payment.jsx) +- [Suspense](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) +- [Async Component](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Exchange.vue) +- [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) +- [Fragments](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/App.vue) +- [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) +- [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) +- [Custom directive](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/at-sign.js) ### Further articles/videos @@ -66,7 +63,7 @@ The Typescript equivalents can be found in the `src-typescript` folder (file nam - [Vue 3 Async Components and Bundle Splitting](https://lmiller1990.github.io/electic/posts/20200503_vue_3_async_components_and_bundle_splitting.html) - [Reactivity in Vue 2, 3, and the Composition API](https://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/) - [React Hooks vs. Vue 3 Composition API](https://academy.esveo.com/en/blog/Yr) -- [Vue 3 Composition API TodoMVC implementation with Vuex and testing](https://github.com/blacksonic/todomvc-vue-composition-api) +- [Vue 3 Composition API TodoMVC implementation with Vuex and testing](https://github.com/vuesomedev/todomvc-vue-composition-api) ### Contributing diff --git a/cypress-javascript.json b/cypress-javascript.json new file mode 100644 index 0000000..9fdd8e9 --- /dev/null +++ b/cypress-javascript.json @@ -0,0 +1,7 @@ +{ + "baseUrl": "http://localhost:3000/", + "integrationFolder": "e2e/javascript", + "pluginsFile": false, + "supportFile": false, + "video": false +} diff --git a/cypress-typescript.json b/cypress-typescript.json new file mode 100644 index 0000000..ae16c0d --- /dev/null +++ b/cypress-typescript.json @@ -0,0 +1,7 @@ +{ + "baseUrl": "http://localhost:3000/", + "integrationFolder": "e2e/typescript", + "pluginsFile": false, + "supportFile": false, + "video": false +} diff --git a/e2e/javascript/index.test.js b/e2e/javascript/index.test.js new file mode 100644 index 0000000..b3b706e --- /dev/null +++ b/e2e/javascript/index.test.js @@ -0,0 +1,6 @@ +describe('Vue 3 Playground', () => { + it('should display playground text on page', () => { + cy.visit('/'); + cy.contains('h2', 'Vue 3.2.33 Playground'); + }); +}); diff --git a/e2e/typescript/index.test.ts b/e2e/typescript/index.test.ts new file mode 100644 index 0000000..b3b706e --- /dev/null +++ b/e2e/typescript/index.test.ts @@ -0,0 +1,6 @@ +describe('Vue 3 Playground', () => { + it('should display playground text on page', () => { + cy.visit('/'); + cy.contains('h2', 'Vue 3.2.33 Playground'); + }); +}); diff --git a/index.html b/index.html index 3bc6921..fd9380e 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@