Production Vue in Vue.js

Production Vue is the twelfth chapter of the free Vue.js tutorial. It gets an app ready for real users: tested, fast, safe and deployed.

What each lesson covers:

  • Testing Vue Apps: Vitest basics, Vue Test Utils (mount, find, trigger, setValue, emitted), testing composables and Pinia stores, and mocking fetch.
  • Performance: Measuring first, stable props, computed stability, v-once and v-memo, virtual lists, shallow reactivity, lazy loading and bundle reports.
  • Errors, Security and Deployment: Error boundaries and errorHandler, friendly error states, XSS and data validation, public env variables, project structure, .env modes, the base path and SPA fallback.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. Testing Vue Apps

    Why and what to test, Vitest basics with describe, it and expect, Vue Test Utils: mount, find, trigger, setValue, text, props and emitted events, awaiting updates, testing composables and Pinia stores, and mocking fetch with vi.fn() and flushPromises().

    • Write and read Vitest tests with describe, it and expect
    • Mount components and use them like a user with Vue Test Utils
    • Await DOM updates and check emitted events
    • Test composables and Pinia stores, and mock fetch
  2. Performance

    Measuring before optimising, stable props, computed stability, v-once and v-memo, virtual lists for huge data, shallow reactivity and markRaw, lazy loading and bundle size, tree shaking, and checking a production build with DevTools, Lighthouse and a bundle report, and accessibility: keyboard, labels, live regions and focus.

    • Measure performance before changing code
    • Reduce re-renders with stable props, v-once and v-memo
    • Render huge lists with a virtual list and shallow reactivity
    • Shrink the first download with lazy loading and check the build
  3. Errors, Security and Deployment

    onErrorCaptured and error boundaries, error propagation, app.config.errorHandler and warnHandler, friendly states for network, HTTP and validation errors, untrusted templates and v-html, validating external data, public env variables and secrets, folder structure and naming, .env files, modes and typed env, and building and deploying with a base path and SPA fallback, ESLint and Prettier, and a CI pipeline.

    • Catch component errors with onErrorCaptured and app.config.errorHandler
    • Show friendly error states and validate data from outside the app
    • Keep the app safe from XSS and keep secrets out of the browser
    • Organise a project, use .env files and deploy a Vite build