Vuejs.amsterdam day 1

Evan You

  • Vue 3.6
  • Vue dev tools
  • Vite
  • Vue language tools 3.0
  • rolldown
  • vite plus
  • petite surprise

Evan You

Vue 3.6

Evan You

Vue 3.6

  • uses alien-signals
  • defineComponent refactors (for libs)
  • rolldown + oxc in build infra
  • vapor mode: opt-in, experimental
  • same API (only script setup)
  • same behaviour
  • reach Solid.js level performance

Evan You

Vue-dev-tools v7

  • written in vue 3
  • better performance

Evan You

Vite

  • rolldown-vite in a separate package
  • OXC well advanced

Evan You

Rolldown

  • feature parity with rollup (and more)
  • for now, it replaces esbuild and rollup
  • in the future: full bundle mode (with new HMR format)

Evan You

Vite plus

  • dev & build (vite / rolldown)
  • test & bench (vitest)
  • lint & format (oxc)
  • documentation (vitepress)
  • run typescript directly in node (vite-node)
  • project scaffolding & code generation
  • monorepo task orchestration / caching (turborepo / NX)

"cargo for JavaScript"

Eduardo San Martin (esm)

Eduardo San Martin

Pinia-colada

Rijk & Guillaume Chau

  • caching
  • normalising
  • mixing sources
  • real-time updates
  • form handling

rstore

Alex Lichter

better composables

Alex Lichter

better composables

Why use CAPI

  • future-proof (vapor-mode)
  • better TS support
  • better SoC & colocation
  • closer to JS

Louëlla Creemers

EAA

  • EAA in june 2025
  • 1/8 men is color blind
  • 1/6 person will have hearing-loss at one point of ther life

Louëlla Creemers

EAA

  • perceivable: by sight, hearing and/or touch
  • operable: keyboard-accessible, navigable and compatible with other input methods
  • understandable: readable, predictable, clear labels and instructions
  • robust: should work with different assistive technologies, browsers and devices

4 principles of a11y: POUR

Louëlla Creemers

EAA

  • A: must have
  • AA: should have
  • AAA: great to have

Levels

50 success criteria

Louëlla Creemers

EAA

facts

56.8 errors per page

in the 1 million most seen pages

  • low contrast text
  • missing alt text
  • missing form input labels
  • empty links
  • empty buttons
  • missing document language

96.4% of all errors in this 6 categories

Louëlla Creemers

EAA

  • use semantic HTML
  • use screen readers
    • VoiceOver (macOs)
    • NVDA (Windows)
  • use extensions
    • wave
    • axe
    • lighthouse
  • vitest axe plugin

Adam Berecz

VueForm

Vuejs Amsterdam

Replay (free)