Page 7 - Vue.js

Mocking composables is more complicated in Vue tests than it first appears, because composables often combine global state, network access, and reactive side effects. With vi.mock, targeted dependency injection, and provide/inject as a testing seam, components can still be tested reliably in isolation, without dragging along real composable implementations.

Passkeys replace the classic password with a cryptographic key pair that the browser manages through the WebAuthn API. This article shows how a Nuxt application implements passkey registration and login, what role Nitro server routes play in generating the challenge, and why a fallback for older browsers is still necessary.

A scoped slot carries data from a child component back into a parent's template, yet without explicit typing TypeScript long treated that data as plain any. A typo like item.naem instead of item.name would only surface in the browser, never at compile time. defineSlots() closes exactly that gap: every slot gets a real TypeScript type for its scoped slot props, complete with full autocompletion right in the template of the consuming component, with no additional runtime validation involved.

A file upload without a progress indicator, without a preview and without understandable error messages frustrates users. Vue 3 provides all the building blocks for a professional file upload with the Composition API, the FileReader API and Axios upload progress, once you know how they fit together.

Vue 3 breaking changes rarely hide in obvious code, but in v-model syntax, removed filters, the reworked global API and the retired event bus. This checklist works through the most important changes systematically, each with a concrete before-and-after example, so nothing gets overlooked during migration.

Data visualizations in Vue 3 are often wired in as a black box: the chart library takes over the canvas DOM and Vue loses track of what's happening. With the right composable pattern, charts stay reactive, get destroyed correctly, support screen readers through ARIA text alternatives, and load via defineAsyncComponent only once they are actually visible.

Touch gestures in Vue apps rarely fail on the core idea, but on details such as scroll conflicts, missing passive event configuration, and janky animations under load. With pointer events, VueUse composables, and a clean separation between recognition and reaction, swipe to delete, drag and drop, and pinch to zoom can be built robustly and performantly.

Replacing REST endpoints is not the goal of GraphQL, the goal is to load exactly the data a component needs and cache it at the right moment. Anyone running Vue GraphQL without a cache strategy loads the same data over and over and loses the biggest advantage of the approach.

Choosing the right Vue 3 component library decides accessibility, bundle size and how much design control the team keeps. Headless UI, Radix Vue, shadcn/vue, PrimeVue and Naive UI follow fundamentally different philosophies, and this article shows which one is right for which context.

Incremental Static Regeneration combines the delivery speed of statically generated pages with the freshness of server-rendered content, by regenerating individual pages in the background once a defined cache window expires, without needing a full rebuild of the project. This article shows how to configure ISR in Nuxt through routeRules, where the difference to SWR lies, and what a practical use case with product pages looks like.