Training Program
Discover Vue.js and its progressive framework approach with our curriculum covering components, reactivity, and state management with Vuex.
Connect Vue templates to reactive data, computed values, watchers and user input. Component basics, lifecycle hooks and template refs explain how those pieces fit together, while the final practice section applies the essentials in a working component-based interface.
Design component interfaces with props, emitted events, v-model and slots, then understand attribute inheritance and dependency sharing. Registration and asynchronous components complete the chapter by connecting those interfaces to how components are discovered and loaded. Topics covered: Component Registration; Props; Component Events; Component v-model; Fallthrough Attributes; Slots; Provide / Inject; Async Components.
Compare three ways to share behaviour in Vue: composables, custom directives and plugins. Understand the responsibility of each mechanism so that stateful logic, DOM behaviour and application-wide extensions can be reused without placing every concern inside a component. Topics covered: Composables; Custom Directives; Plugins.
Use Vue's built-in components to control transitions, preserve component state, move rendered content and coordinate asynchronous dependencies. Transition, TransitionGroup, KeepAlive, Teleport and Suspense each address a different relationship between component lifecycle and the visible interface. Topics covered: Transition; TransitionGroup; KeepAlive; Teleport; Suspense.
Move from individual components to application-level organisation using single-file components and development tooling. Routing, shared state, testing and server-side rendering introduce the concerns that emerge as a Vue application grows beyond a single view. Topics covered: Single-File Components; Tooling; Routing; State Management; Testing; Server-Side Rendering (SSR).
Prepare a Vue application for use beyond the development environment by reviewing deployment, performance, accessibility and security. The chapter connects implementation choices to the experience of users and to the reliability of the published application. Topics covered: Production Deployment; Performance; Accessibility; Security.
Set up typed Vue development and compare typing patterns for the Composition API and Options API. Follow the sections to understand how component data and interfaces are represented in TypeScript and how editor support helps reveal mistakes while implementing them. Topics covered: Using Vue with TypeScript; TypeScript with Composition API; TypeScript with Options API.
Investigate Vue's reactivity and rendering mechanisms and how they relate to different ways of using the framework. Composition API questions, render functions, JSX, web components and animation techniques extend the picture beyond ordinary single-file component examples. Topics covered: Ways of Using Vue; Composition API FAQ; Reactivity in Depth; Rendering Mechanism; Render Functions & JSX; Vue and Web Components; Animation Techniques.
Connect URLs to Vue views using route records, parameters, nested routes and named views. Navigation methods, redirects, route props and history modes show how the route configuration becomes a usable application navigation system.
Coordinate navigation with guards, route metadata and data fetching, then refine the experience with transitions, scroll behaviour and lazy loading. Typed routes, dynamic routing and navigation results help handle cases where route structure or user flow requires additional control.
Define routes through file conventions and understand how configuration and route extensions modify the generated result. Hot-module replacement and ESLint integration connect the routing approach to the development workflow, so changes remain visible and conventions can be checked. Topics covered: Getting Started; File Conventions; Configuration; Extending Routes; Hot Module Replacement; ESLint.
Follow route data from loader definition through reloading, navigation, cancellation and error handling. Nested loaders, organisation and server-side rendering explain how related data requests fit together; Basic and Colada loaders provide the specific approaches covered in the chapter.
Define a Pinia store and connect state, getters and actions to the components that consume them. Plugins and use outside a component extend the basic model, showing where shared behaviour and application-level access belong in a Vue state-management design. Topics covered: Introduction; Getting Started; Defining a Store; State; Getters; Actions; Plugins; Using a store outside of a component.
Examine how a Pinia store participates in server-rendered applications and how its state reaches the client. The dedicated Nuxt section complements the general SSR guidance, helping you recognise the integration responsibilities that differ from a client-only application. Topics covered: Server Side Rendering (SSR); Nuxt.
Address store maintenance through testing, composition, hot-module replacement and use outside setup. Migration guides cover Vuex and older Pinia releases, while composable-related recipes help adapt reusable logic to the lifecycle and structure of a store.