Vue.js

A progressive framework with reactive templates.

Vue.js is taught here in 13 lessons, running from Reactivity and template syntax through to Production builds, environments and deployment. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Reactivity and template syntaxref versus reactive, computed versus watch, and the template directives you will use in every component.
2. Components, props and eventsSingle-file components, typed props, emitted events, slots and provide/inject — the seams between one component and the next.
3. Routing and state with the Composition APIVue Router routes, guards and lazy loading, plus a Pinia store you can read from any component without prop drilling.
4. Setting up a Vue project with ViteScaffold a Vue 3 app with create-vue, understand every generated folder, and wire aliases, the dev proxy and environment files.
5. Directives, lists and conditional renderingv-if versus v-show, v-for with stable keys, binding classes and styles, and the raw-HTML directive that causes most Vue security bugs.
6. Forms and user inputBind every input type with v-model, use modifiers, implement v-model on your own component, and keep validation and request volume under control.
7. Lifecycle hooks, watchers and cleanupMount and unmount hooks, watch versus watchEffect with flush timing, and the cleanup that keeps timers, listeners and stale requests from leaking.
8. Composables and reusable logicWrite, name and share composables, decide when state should be per-component or shared, and test one without mounting anything.
9. Slots, dynamic and async componentsNamed and scoped slots, switching components at runtime with keep-alive, and code-splitting with defineAsyncComponent and Suspense.
10. Pinia in depth and data fetching patternsSetup versus options stores, getters, actions and plugins, then the loading, error and optimistic-update patterns around a real request.
11. Performance, rendering and SSR basicsWhere render cost actually comes from, the escape hatches that avoid deep reactivity, and what server rendering and hydration change.
12. Testing Vue componentsVitest and Vue Test Utils for components, router and store mocking, testing a composable in isolation, and a small end-to-end suite.
13. Production builds, environments and deploymentRead the build output, split code by route, handle environment values and a base path, then host the bundle with the right caching headers.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation React Next.js Angular jQuery ECharts Chart.js SVG Font Awesome

FAQ