Tutorials / Vue Tutorial

Vue Tutorial

From reactivity fundamentals to Pinia, routing and Laravel integration.

Level 1

Foundation

How it all works under the hood.

  1. Modern JavaScript for VueModules, arrow functions, destructuring, spread, promises and async/await.
  2. How Vue WorksReactivity, the virtual DOM and the render cycle.
  3. Components & SFCsSingle-file components, the component tree and Vite tooling.
  4. Composition vs Options APITwo ways to write components and when to use each.
Level 2

Basic

First working examples.

  1. Template Syntax & DirectivesInterpolation, v-bind, v-if, v-for and class bindings.
  2. Events & Formsv-on, modifiers and two-way binding with v-model.
  3. Props & EmitsPassing data down and events up between components.
  4. Computed, Watchers & LifecycleDerived state, side effects and lifecycle hooks.
  5. Build a To-Do AppA complete small app: add, edit, complete, filter and persist items.
  6. Fetching Data from an APIfetch, async/await, loading and error states against a real Laravel API.
Level 3

Medium

Real-world patterns.

  1. ComposablesExtracting and reusing stateful logic.
  2. Vue Router & Data FetchingClient-side routing, params, guards and loading states.
  3. Form ValidationClient-side rules, showing errors, and mapping Laravel 422 responses onto fields.
  4. Search, Filter & PaginateDebounced search, filters in the URL and paginating server-side results.
  5. Reusable UI ComponentsBuilding a modal, tabs, dropdown and toast you can drop into any app.
  6. Transitions & Animations<Transition>, <TransitionGroup>, enter/leave classes and list animations.
  7. Error Handling & DebuggingonErrorCaptured, app.config.errorHandler, error boundaries, Vue DevTools and common warnings.
Level 4

Advanced

Architecture, scale and testing.

  1. State Management with PiniaStores, getters, actions and when you need global state.
  2. Slots, Provide/Inject & Render FunctionsFlexible component APIs and dependency injection.
  3. Vue + Laravel in ProductionVite, Inertia vs API, testing and performance.
  4. Testing Vue ComponentsVitest and Vue Test Utils: mounting, interacting, mocking fetch and testing composables.
  5. Performance OptimisationLazy routes, async components, v-memo, shallowRef and avoiding needless re-renders.
  6. TypeScript with VueTyping props, emits, refs and composables with <script setup lang="ts">.
  7. Custom Directives & PluginsWriting v-focus-style directives and installable plugins with app.use().