├── public ├── .nojekyll ├── logo.png └── favicon.ico ├── images └── screenshot.png ├── src ├── typescript │ ├── sfc.d.ts │ ├── main.ts │ ├── version.ts │ ├── components │ │ ├── Spinner.ts │ │ ├── Username.test.ts │ │ ├── AsyncPayment.ts │ │ ├── Coupon.test.ts │ │ ├── Checkout.vue │ │ ├── Username.vue │ │ ├── Exchange.vue │ │ ├── Payment.tsx │ │ ├── Header.vue │ │ ├── Coupon.vue │ │ ├── Item.vue │ │ └── Cart.vue │ ├── router.ts │ ├── store.ts │ ├── at-sign.ts │ ├── App.vue │ └── hooks.ts └── javascript │ ├── custom-element.js │ ├── version.js │ ├── components │ ├── Spinner.js │ ├── Username.test.js │ ├── AsyncPayment.js │ ├── Coupon.test.js │ ├── Checkout.vue │ ├── Exchange.vue │ ├── Username.vue │ ├── Coupon.vue │ ├── Header.vue │ ├── Payment.jsx │ ├── Item.vue │ └── Cart.vue │ ├── store.js │ ├── main.js │ ├── router.js │ ├── at-sign.js │ ├── App.vue │ └── hooks.js ├── cypress-javascript.json ├── cypress-typescript.json ├── e2e ├── javascript │ └── index.test.js └── typescript │ └── index.test.ts ├── sandbox.config.json ├── .gitignore ├── .travis.yml ├── vite.config.js ├── vitest.config.js ├── .github └── FUNDING.yml ├── tsconfig.json ├── index.html ├── LICENSE ├── CONTRIBUTING.md ├── package.json ├── CODE_OF_CONDUCT.md └── README.md /public/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonicoder86/vue-3-playground/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonicoder86/vue-3-playground/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonicoder86/vue-3-playground/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /src/typescript/sfc.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | const component: DefineComponent<{}, {}, any>; 4 | export default component; 5 | } 6 | -------------------------------------------------------------------------------- /cypress-javascript.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:3000", 3 | "integrationFolder": "e2e/javascript", 4 | "pluginsFile": false, 5 | "supportFile": false, 6 | "video": false 7 | } 8 | -------------------------------------------------------------------------------- /cypress-typescript.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:3000", 3 | "integrationFolder": "e2e/typescript", 4 | "pluginsFile": false, 5 | "supportFile": false, 6 | "video": false 7 | } 8 | -------------------------------------------------------------------------------- /e2e/javascript/index.test.js: -------------------------------------------------------------------------------- 1 | describe('Vue 3 Playground', () => { 2 | it('should display playground text on page', () => { 3 | cy.visit('/'); 4 | cy.contains('h2', 'Vue 3.2.33 Playground'); 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /e2e/typescript/index.test.ts: -------------------------------------------------------------------------------- 1 | describe('Vue 3 Playground', () => { 2 | it('should display playground text on page', () => { 3 | cy.visit('/'); 4 | cy.contains('h2', 'Vue 3.2.33 Playground'); 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /src/javascript/custom-element.js: -------------------------------------------------------------------------------- 1 | export class XUsername extends HTMLElement { 2 | connectedCallback() { 3 | this.innerText = 'blacksonic'; 4 | } 5 | } 6 | 7 | customElements.define('x-username', XUsername); 8 | -------------------------------------------------------------------------------- /src/javascript/version.js: -------------------------------------------------------------------------------- 1 | import { version, provide, inject } from 'vue'; 2 | 3 | const versionSymbol = Symbol('version'); 4 | 5 | export const provideVersion = () => provide(versionSymbol, version); 6 | export const useVersion = () => inject(versionSymbol); 7 | -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": false, 4 | "view": "browser", 5 | "server": "true", 6 | "container": { 7 | "port": 3000, 8 | "node": "14" 9 | }, 10 | "template": "node", 11 | "node": "14" 12 | } 13 | -------------------------------------------------------------------------------- /src/typescript/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | import store from './store'; 4 | import router from './router'; 5 | import AtSign from './at-sign'; 6 | 7 | createApp(App).use(store).use(router).directive('AtSign', AtSign).mount('#app'); 8 | -------------------------------------------------------------------------------- /src/typescript/version.ts: -------------------------------------------------------------------------------- 1 | import { version, provide, inject } from 'vue'; 2 | 3 | const versionSymbol: unique symbol = Symbol('version'); 4 | 5 | export const provideVersion = (): void => provide(versionSymbol, version); 6 | export const useVersion = (): string | undefined => inject(versionSymbol); 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "14" 4 | script: npm test 5 | before_deploy: npm run build 6 | deploy: 7 | provider: pages 8 | local_dir: dist 9 | skip_cleanup: true 10 | github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable 11 | keep_history: true 12 | on: 13 | branch: master 14 | -------------------------------------------------------------------------------- /src/javascript/components/Spinner.js: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | export default defineComponent({ 4 | name: 'Spinner', 5 | 6 | render() { 7 | return h( 8 | 'div', { class: 'spinner-border', role: 'status' }, 9 | [ 10 | h('span', { class: 'sr-only' }, 'Loading...') 11 | ] 12 | ); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /src/typescript/components/Spinner.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | export default defineComponent({ 4 | name: 'Spinner', 5 | 6 | render() { 7 | return h( 8 | 'div', { class: 'spinner-border', role: 'status' }, 9 | [ 10 | h('span', { class: 'sr-only' }, 'Loading...') 11 | ] 12 | ); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import vueJsx from '@vitejs/plugin-vue-jsx'; 3 | 4 | export default { 5 | plugins: [ 6 | vue({ 7 | template: { 8 | compilerOptions: { 9 | isCustomElement: tag => /^x-/.test(tag) 10 | } 11 | } 12 | }), 13 | vueJsx() 14 | ], 15 | base: './', 16 | }; 17 | -------------------------------------------------------------------------------- /vitest.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import Vue from '@vitejs/plugin-vue'; 3 | import Jsx from '@vitejs/plugin-vue-jsx'; 4 | 5 | export default defineConfig({ 6 | plugins: [Vue(), Jsx()], 7 | test: { 8 | globals: true, 9 | environment: 'jsdom', 10 | transformMode: { 11 | web: [/.[tj]sx$/], 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /src/javascript/components/Username.test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils'; 2 | import Username from './Username.vue'; 3 | 4 | describe('Username', () => { 5 | it('should display required text', () => { 6 | const wrapper = mount(Username); 7 | 8 | expect(wrapper.find('.invalid-feedback').text()).toEqual('Your username is required.'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/javascript/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'vuex'; 2 | 3 | export default createStore({ 4 | state: { 5 | year: '1970' 6 | }, 7 | actions: { 8 | onSetYear: ({ commit }, year) => { 9 | commit('setYear', year); 10 | } 11 | }, 12 | mutations: { 13 | setYear: (state, year) => { 14 | state.year = year; 15 | } 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /src/typescript/components/Username.test.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils'; 2 | import Username from './Username.vue'; 3 | 4 | describe('Username', () => { 5 | it('should display required text', () => { 6 | const wrapper = mount(Username); 7 | 8 | expect(wrapper.find('.invalid-feedback').text()).toEqual('Your username is required.'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/javascript/components/AsyncPayment.js: -------------------------------------------------------------------------------- 1 | import { defineAsyncComponent } from 'vue'; 2 | import Spinner from './Spinner'; 3 | 4 | export default defineAsyncComponent({ 5 | loader: () => import('./Payment.jsx'), 6 | loadingComponent: Spinner, 7 | delay: 0, 8 | onError(error, retry, fail, attempts) { 9 | console.log('Retrying to load component', error); 10 | retry(); 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /src/javascript/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | import store from './store'; 4 | import router from './router'; 5 | import AtSign from './at-sign'; 6 | import './custom-element'; 7 | 8 | const app = createApp(App); 9 | app.config.isCustomElement = tag => /^x-/.test(tag); 10 | app.use(store).use(router); 11 | app.directive('AtSign', AtSign); 12 | app.mount('#app'); 13 | -------------------------------------------------------------------------------- /src/javascript/router.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from 'vue-router'; 2 | import Cart from './components/Cart.vue'; 3 | import Checkout from './components/Checkout.vue'; 4 | 5 | export default createRouter({ 6 | history: createWebHashHistory(), 7 | routes: [ 8 | { path: '/', name: 'cart', component: Cart }, 9 | { path: '/checkout', name: 'checkout', component: Checkout }, 10 | ], 11 | }); 12 | -------------------------------------------------------------------------------- /src/typescript/router.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from 'vue-router'; 2 | import Cart from './components/Cart.vue'; 3 | import Checkout from './components/Checkout.vue'; 4 | 5 | export default createRouter({ 6 | history: createWebHashHistory(), 7 | routes: [ 8 | { path: '/', name: 'cart', component: Cart }, 9 | { path: '/checkout', name: 'checkout', component: Checkout }, 10 | ], 11 | }); 12 | -------------------------------------------------------------------------------- /src/javascript/at-sign.js: -------------------------------------------------------------------------------- 1 | export default { 2 | beforeMount(el, binding, vnode, prevVnode) { 3 | console.log(`directive: value - ${binding.value}, argument - ${binding.arg}, modifiers - ${JSON.stringify(binding.modifiers)}`); 4 | 5 | el.innerHTML = '@'; 6 | }, 7 | mounted() {}, 8 | beforeUpdate() {}, 9 | updated() {}, 10 | beforeUnmount() {}, 11 | unmounted() {} 12 | }; 13 | -------------------------------------------------------------------------------- /src/typescript/components/AsyncPayment.ts: -------------------------------------------------------------------------------- 1 | import { defineAsyncComponent } from 'vue'; 2 | import Spinner from './Spinner'; 3 | 4 | export default defineAsyncComponent({ 5 | loader: () => import('./Payment.tsx'), 6 | loadingComponent: Spinner, 7 | delay: 0, 8 | onError(error: Error, retry: () => void, fail: () => void, attempts: number) { 9 | console.log('Retrying to load component', error); 10 | retry(); 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /src/javascript/components/Coupon.test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils'; 2 | import Coupon from './Coupon.vue'; 3 | 4 | describe('Coupon', () => { 5 | it('should trigger coupon percent on button click', () => { 6 | const wrapper = mount(Coupon, { props: { percent: 10 } }); 7 | 8 | wrapper.find('.btn').trigger('click'); 9 | 10 | expect(wrapper.emitted().redeem).toHaveLength(1); 11 | expect(wrapper.emitted().redeem[0]).toEqual([10]); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/typescript/components/Coupon.test.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils'; 2 | import Coupon from './Coupon.vue'; 3 | 4 | describe('Coupon', () => { 5 | it('should trigger coupon percent on button click', () => { 6 | const wrapper = mount(Coupon, { props: { percent: 10 } }); 7 | 8 | wrapper.find('.btn').trigger('click'); 9 | 10 | expect(wrapper.emitted().redeem).toHaveLength(1); 11 | expect(wrapper.emitted().redeem[0]).toEqual([10]); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/typescript/store.ts: -------------------------------------------------------------------------------- 1 | import { createStore, ActionContext } from 'vuex'; 2 | 3 | export interface State { 4 | year: string; 5 | } 6 | 7 | export default createStore({ 8 | state: { 9 | year: '1970' 10 | }, 11 | actions: { 12 | onSetYear: (context: ActionContext, year: string) => { 13 | context.commit('setYear', year); 14 | } 15 | }, 16 | mutations: { 17 | setYear(state: State, year: string) { 18 | state.year = year; 19 | } 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /src/typescript/at-sign.ts: -------------------------------------------------------------------------------- 1 | import { DirectiveBinding, VNode } from 'vue'; 2 | 3 | export default { 4 | beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode, prevVnode: VNode | null) { 5 | console.log(`directive: value - ${binding.value}, argument - ${binding.arg}, modifiers - ${JSON.stringify(binding.modifiers)}`); 6 | 7 | el.innerHTML = '@'; 8 | }, 9 | mounted() {}, 10 | beforeUpdate() {}, 11 | updated() {}, 12 | beforeUnmount() {}, 13 | unmounted() {} 14 | }; 15 | -------------------------------------------------------------------------------- /src/javascript/App.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 25 | -------------------------------------------------------------------------------- /src/javascript/components/Checkout.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 25 | -------------------------------------------------------------------------------- /src/typescript/components/Checkout.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 25 | -------------------------------------------------------------------------------- /src/typescript/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 26 | -------------------------------------------------------------------------------- /src/javascript/components/Exchange.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 26 | 27 | -------------------------------------------------------------------------------- /src/javascript/hooks.js: -------------------------------------------------------------------------------- 1 | import { reactive, ref, computed, readonly } from 'vue'; 2 | 3 | export const useCart = () => { 4 | const product = reactive({ firstName: 'First Product', firstPrice: 10, firstQuantity: 1 }); 5 | const secondName = ref('Second Product'); 6 | const secondPrice = ref(20); 7 | const secondQuantity = ref(2); 8 | const total = computed(() => (product.firstPrice * product.firstQuantity + secondPrice.value * secondQuantity.value) * (100 - coupon.value) / 100); 9 | const coupon = ref(10); 10 | const setCoupon = percent => coupon.value = percent; 11 | 12 | return { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon }; 13 | }; 14 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: blacksonic 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: blacksonic 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /src/javascript/components/Username.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 27 | -------------------------------------------------------------------------------- /src/typescript/components/Username.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 27 | -------------------------------------------------------------------------------- /src/javascript/components/Coupon.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /src/typescript/hooks.ts: -------------------------------------------------------------------------------- 1 | import { reactive, ref, computed } from 'vue'; 2 | 3 | export interface Product { 4 | firstName: string; 5 | firstPrice: number; 6 | firstQuantity: number; 7 | } 8 | 9 | export const useCart = () => { 10 | const product = reactive({ firstName: 'First Product', firstPrice: 10, firstQuantity: 1 }); 11 | const secondName = ref('Second Product'); 12 | const secondPrice = ref(20); 13 | const secondQuantity = ref(2); 14 | const total = computed(() => (product.firstPrice * product.firstQuantity + secondPrice.value * secondQuantity.value) * (100 - coupon.value) / 100); 15 | const coupon = ref(10); 16 | const setCoupon = (percent): void => coupon.value = percent; 17 | 18 | return { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon }; 19 | }; 20 | -------------------------------------------------------------------------------- /src/typescript/components/Exchange.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 34 | 35 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": true, 3 | "compilerOptions": { 4 | "allowSyntheticDefaultImports": false, 5 | "allowJs": true, 6 | "alwaysStrict": true, 7 | "declaration": false, 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": false, 11 | "lib": ["es2017", "dom"], 12 | "module": "commonjs", 13 | "moduleResolution": "node", 14 | "noEmitHelpers": false, 15 | "noEmitOnError": false, 16 | "noFallthroughCasesInSwitch": true, 17 | "noImplicitThis": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": false, 20 | "pretty": true, 21 | "removeComments": true, 22 | "rootDir": "./", 23 | "sourceMap": true, 24 | "strictNullChecks": true, 25 | "target": "ES2020" 26 | }, 27 | "exclude": ["./node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /src/javascript/components/Header.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 32 | -------------------------------------------------------------------------------- /src/javascript/components/Payment.jsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | 3 | export default defineComponent({ 4 | name: 'Payment', 5 | 6 | setup() { 7 | const payments = [ 8 | { id: 'credit', name: 'Credit card' }, 9 | { id: 'debit', name: 'Debit card' }, 10 | { id: 'paypal', name: 'Paypal' }, 11 | ]; 12 | 13 | return { payments }; 14 | }, 15 | 16 | render() { 17 | return ( 18 |
19 | {this.payments.map(payment => ( 20 |
21 | 22 | 23 |
24 | ))} 25 |
26 | ); 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /src/typescript/components/Payment.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | 3 | export default defineComponent({ 4 | name: 'Payment', 5 | 6 | setup() { 7 | const payments = [ 8 | { id: 'credit', name: 'Credit card' }, 9 | { id: 'debit', name: 'Debit card' }, 10 | { id: 'paypal', name: 'Paypal' }, 11 | ]; 12 | 13 | return { payments }; 14 | }, 15 | 16 | render() { 17 | return ( 18 |
19 | {this.payments.map(payment => ( 20 |
21 | 22 | 23 |
24 | ))} 25 |
26 | ); 27 | } 28 | }); 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/typescript/components/Header.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 33 | -------------------------------------------------------------------------------- /src/typescript/components/Coupon.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue 3 Playground 6 | 7 | 8 | 9 | 22 | 23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Gábor Soós 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/javascript/components/Item.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 35 | 36 | -------------------------------------------------------------------------------- /src/typescript/components/Item.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 37 | 38 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Issues 4 | 5 | Issues are very valuable to this project. 6 | 7 | * Ideas are a valuable source of contributions others can make 8 | * Problems show where this project is lacking 9 | * With a question you show where contributors can improve the user experience 10 | 11 | Thank you for creating them. 12 | 13 | ## Pull Requests 14 | 15 | Pull requests are, a great way to get your ideas into this repository. 16 | 17 | When deciding if I merge in a pull request I look at the following things: 18 | 19 | ### Does it state intent 20 | 21 | You should be clear which problem you're trying to solve with your contribution. 22 | 23 | For example: 24 | 25 | > Add link to code of conduct in README.md 26 | 27 | Doesn't tell me anything about why you're doing that 28 | 29 | > Add link to code of conduct in README.md because users don't always look in the CONTRIBUTING.md 30 | 31 | Tells me the problem that you have found, and the pull request shows me the action you have taken to solve it. 32 | 33 | 34 | ### Is it of good quality 35 | 36 | * There are no spelling mistakes 37 | * It reads well 38 | * For english language contributions: Has a good score on [Grammarly](grammarly.com) or [Hemingway App](http://www.hemingwayapp.com/) 39 | 40 | ### Does it move this repository closer to my vision for the repository 41 | 42 | The aim of this repository is: 43 | 44 | * To provide a README.md and assorted documents anyone can copy and paste, into their project 45 | * The content is usable by someone who hasn't written something like this before 46 | * Foster a culture of respect and gratitude in the open source community. 47 | 48 | ### Does it follow the contributor covenant 49 | 50 | This repository has a [code of conduct](CODE_OF_CONDUCT.md), This repository has a code of conduct, I will remove things that do not respect it. 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-3-playground", 3 | "license": "MIT", 4 | "repository": { 5 | "type": "git", 6 | "url": "git+https://github.com/blacksonic/vue-3-playground.git" 7 | }, 8 | "type": "module", 9 | "scripts": { 10 | "start": "vite --port 3000", 11 | "serve": "vite --port 3000", 12 | "build": "vite build", 13 | "test": "npm run test:unit:javascript && npm run test:unit:typescript && npm run test:e2e:javascript && npm run test:e2e:typescript", 14 | "test:unit:javascript": "vitest --dir src/javascript --run", 15 | "test:unit:typescript": "vitest --dir src/typescript --run", 16 | "test:e2e:javascript": "start-server-and-test start http-get://localhost:3000 e2e:javascript", 17 | "test:e2e:typescript": "start-server-and-test start http-get://localhost:3000 e2e:typescript", 18 | "e2e:javascript": "cypress run --config-file cypress-javascript.json", 19 | "e2e:typescript": "cypress run --config-file cypress-typescript.json" 20 | }, 21 | "dependencies": { 22 | "vue": "^3.4.19", 23 | "vue-router": "^4.3.0", 24 | "vuex": "^4.1.0" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "^7.23.9", 28 | "@babel/preset-env": "^7.23.9", 29 | "@vitejs/plugin-vue": "^5.0.4", 30 | "@vitejs/plugin-vue-jsx": "^3.1.0", 31 | "@vue/compiler-sfc": "^3.4.19", 32 | "@vue/test-utils": "^2.4.4", 33 | "cypress": "^13.6.6", 34 | "jsdom": "^24.0.0", 35 | "start-server-and-test": "^2.0.3", 36 | "typescript": "^5.3.3", 37 | "vite": "^5.1.4", 38 | "vitest": "^1.3.1" 39 | }, 40 | "babel": { 41 | "presets": [ 42 | [ 43 | "@babel/preset-env", 44 | { 45 | "targets": { 46 | "node": "current" 47 | } 48 | } 49 | ] 50 | ] 51 | }, 52 | "engines": { 53 | "node": "20" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at soos.gabor86@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /src/javascript/components/Cart.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 116 | 117 | 134 | -------------------------------------------------------------------------------- /src/typescript/components/Cart.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 116 | 117 | 134 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 Playground 2 | 3 | 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/). 4 | [The official documentation](https://v3.vuejs.org/) is now available! 5 | 6 | The project aims to include all the new features. If you find something missing please create an issue/PR. 7 | 8 | The application is a shopping cart where you can alter the name, price and quantity of the products and 9 | recalculates the total price based on the items and used coupon. 10 | 11 | The playground is available also [in online version](https://codesandbox.io/s/github/vuesomedev/vue-3-playground). 12 | 13 | If you want to switch to the Typescript folder uncomment the link to the Typescript main file in `index.html` 14 | and comment out the Javascript main file. 15 | 16 | ![Vue 3 Playground](./images/screenshot.png "Vue 3 Playground") 17 | 18 | ### New APIs covered 19 | 20 | The Typescript equivalents can be found in the `src-typescript` folder (file names are the same). 21 | 22 | - [createApp](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html) 23 | - [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) 24 | - [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) 25 | - [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) 26 | - [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) 27 | - [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) 28 | - [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) 29 | - [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) 30 | - [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) 31 | - [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) 32 | - [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) 33 | - [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) 34 | - [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) 35 | - [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) 36 | - [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) 37 | - [emit](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Coupon.vue) 38 | - [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) 39 | - [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) 40 | - [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) 41 | - [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) 42 | - [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) 43 | - [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) 44 | - [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) 45 | - [JSX](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Payment.jsx) 46 | - [Suspense](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) 47 | - [Async Component](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Exchange.vue) 48 | - [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) 49 | - [Fragments](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/App.vue) 50 | - [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) 51 | - [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) 52 | - [Custom directive](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/at-sign.js) 53 | 54 | ### Further articles/videos 55 | 56 | - [Official documentation](https://v3.vuejs.org/) 57 | - [Composition API docs](https://composition-api.vuejs.org/) 58 | - [RFCs describing new features](https://github.com/vuejs/rfcs) 59 | - [Reactivity: Vue 2 vs Vue 3](https://www.vuemastery.com/blog/Reactivity-Vue2-vs-Vue3/) 60 | - [Global Vue Meetup featuring Evan You](https://www.youtube.com/watch?v=Nk3cC7xNfkk) 61 | - [State of Vuenion](https://www.vuemastery.com/conferences/vueconf-us-2020/state-of-the-vuenion/) 62 | - [The process: Making Vue 3](https://increment.com/frontend/making-vue-3/) 63 | - [Vue 3 Async Components and Bundle Splitting](https://lmiller1990.github.io/electic/posts/20200503_vue_3_async_components_and_bundle_splitting.html) 64 | - [Reactivity in Vue 2, 3, and the Composition API](https://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/) 65 | - [React Hooks vs. Vue 3 Composition API](https://academy.esveo.com/en/blog/Yr) 66 | - [Vue 3 Composition API TodoMVC implementation with Vuex and testing](https://github.com/vuesomedev/todomvc-vue-composition-api) 67 | 68 | ### Contributing 69 | 70 | 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. 71 | 72 | --------------------------------------------------------------------------------