/learning-vue3

Repo created and updated as a part of learning Vue 3

Primary LanguageVue

Learning Vue

What i like about Vue

  • Clean
  • Semantic
  • Declarative
  • Legible
  • Easy to maintain
  • Reactive

Exercies

Basic Shopping Cart using Vue 3

Everything hardcoded into the root. Used Vue directives, methods, computed properites and many more.

Screenshot of Basic Shopping Cart with Vue devtools opened showing the hardcoded app structure

🔍 Inspect | ✅ Preview

Shopping Cart ft. components using Vue 3

Refactored above application into components. Using props, $emits and also Provide and Inject to pass children from one grandparent component to its sibling.

Screenshot of Shopping Cart with Vue devtools opened showing the the app is refactored into sub components

🔍 Inspect | ✅ Preview

Shopping Cart ft. Vue SFC

  • Removed serving Vue from CDN

  • added vue@next

  • added plugin @vitejs/plugin-vue

  • added @vue/compiler-sfc

  • some component refactoring and style enhancements

    Screenshot of Shopping Cart with Vue devtools opened showing the Vue SFC app

🔍 Inspect | ✅ Preview

Shopping Cart ft. components using Vue 3

Refactored above application into components. Using props, $emits and also Provide and Inject to pass children from one grandparent component to its sibling.

Screenshot of Shopping Cart with Vue devtools opened showing the the app is refactored into sub components

🔍 Inspect | ✅ Preview

Shopping Cart ft. Vue 3 Composition API

Screenshot of Shopping Cart app using Composition API

🔍 Inspect | ✅ Preview