Proven Patterns Workshop

Learn fundamental concepts and principles you need to know to build the foundations for world-class Vue applications. Topics will include component design patterns, workflows to enhance productivity, testing methodologies, best practices for organizing (and reorganizing) increasingly complex applications, and more.

🧰 Recommended Tooling

• VS Code + Vue (Official) (and disable Vetur).
• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

💻 Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

Unit tests use the .unit.ts suffix.

pnpm test:unit

Run End-to-End Tests with Playwright

End-to-end tests use the .e2e.ts suffix.

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
pnpm build

# Runs the end-to-end tests
pnpm test:e2e
# Runs the tests only on Chromium
pnpm test:e2e --project=chromium
# Runs the tests of a specific file
pnpm test:e2e e2e/vue.e2e.ts
# Runs the tests in debug mode
pnpm test:e2e --debug

Lint with ESLint

pnpm lint