Examples
This section turns real Resux Lab regression pages into focused recipes you can copy into an application. The examples are intentionally tied to code that runs in resux-lab, rather than inventing APIs only for documentation.
Framework fundamentals
| Example | What it demonstrates | Lab source |
|---|---|---|
| Counter | Minimal resumable interaction | Framework example |
| State and Resumable Handlers | useState(), multiple handler actions, lazy interaction | pages/state.vue |
Forms and v-model | Inputs, select, checkbox, submit and reset state | pages/forms.vue |
| API and Fetch | Server API calls and async data | Existing example |
| Blog Routes | File routes and dynamic pages | Existing example |
| Auth Middleware | Route middleware | Existing example |
| Error Handling | useError() and createError() | pages/features/errors.vue |
| Device Detection | useDevice() and parseUserAgent() | pages/features/device.vue |
Runtime boundaries and performance
| Example | What it demonstrates | Lab source |
|---|---|---|
| Vue Island | Keep Vue runtime ownership inside a nested widget | pages/vue-island.vue, islands/vue/IslandCounter.vue |
| Performance Measurements | Measure a state patch and repeated API requests in the browser | pages/performance.vue |
| Progressive Package | Progressive client enhancement | Existing example |
| Package Integrations | Visible, idle, interaction, immediate, page-load, manual and SSR package patterns | pages/package-tests/ |
Media and deployment
| Example | What it demonstrates | Lab source |
|---|---|---|
| Media Optimization | Image transformation and delivery | Existing example |
| Media Placeholders and Picture | Blur, skeleton, spinner, custom placeholders, picture formats and fallback images | pages/media-test/images.vue |
| Docker Deployment | Container deployment | Existing example |
Use the lab as executable documentation
The compatibility lab is useful for more than screenshots. Its pages are exercised by end-to-end regression tests covering framework features, media, package integrations and layout behavior. When a docs example is marked Lab-backed, use the linked lab file as the executable reference and the documentation page as the explanation of why the pattern works.