• Project 1 - Self Service Machine
  • Vue installation via CDN;
  • Declarative Rendering;
  • Directives:
    • v-for;
    • v-if;
    • v-bind or :;
    • v-on or @.
  • Event Handling;
  • Event Modifiers:
    • .stop (stop propagation)
  • Style Binding;
  • Methods.
• Project 2 - Working with Forms
  • Two-way Data Binding Concept;
  • Directive: v-model.
• Project 3 - Todo List
  • This project is an exercise which uses the concepts and methods from previous projects; and
  • Lifecycle Hooks:
    • beforeCreate();
    • created();
    • beforeUpdate();
    • updated().
• Project 4 - Quiz Game
  • Vue installation via vue/cli;
  • Install and config axios and vue-axios;
  • HTTP Requests with axios and data rendering on screen;
  • Computed properties;
  • Directive: v-else;
  • Components and Props
• Project 5 - Shopping Bag
  • vue-router;
  • vuex;
  • Define actions and mutations on Vuex store;
  • Helper: mapState to avoid code repetition for state getters;
• Project 6 - From Vuex to Pinia
  • Pinia installation via yarn;
  • Initialization with createPinia;
  • Modular stores:
    • Creation with defineStore()
    • State declaration and usage;
    • Lifecycle method: setup();
    • Getters declarations and usage;
    • State change with actions.