Blog
Short, accurate write-ups on the questions learners get stuck on, plus notes on how the school works.
Deep divePinia
Why storeToRefs drops your actions
You destructure a Pinia store through storeToRefs and the action comes back undefined. Here is what storeToRefs keeps, what it skips, and why.
vuejs.school team · 9 Apr 2026 · 5 min read
All posts
1–12 of 178 posts- Release notesVue 3.6 and Vapor Mode: where things standVue 3.6 is at its tenth release candidate and 3.5.43 is the stable release. What 3.6 brings, what the RCs changed, and what to do with your app now.8 Oct 2026 · 7 min read
- Release notesWhat's new in Nuxt 4.6: nuxt/server, typed $fetch, cookie sessions and VaporNuxt 4.6 adds a portable nuxt/server import, cookie sessions, a rebuilt typed $fetch, Vapor components and Nuxt CLI v4. Here is what changes for your app.6 Oct 2026 · 7 min read
- Deep diveVueUse 15's new composables: useWebMCP, useLiveAnnouncer and useTemporalNowWhat useWebMCP, useLiveAnnouncer and useTemporalNow wrap, how to use each one safely, and when a few lines of your own code are the better choice.1 Oct 2026 · 6 min read
- TutorialAccessible form errors: aria-describedby, live regions and focusBuild form errors that screen readers announce and everyone can fix. Link messages with aria-describedby, announce a summary, move focus, then test it.29 Sep 2026 · 6 min read
- Deep diveVapor Mode, explained without the hypeWhat Vapor Mode compiles your component to, what it skips, what you give up, and how to measure whether it would help your app before you switch.24 Sep 2026 · 7 min read
- TutorialuseFetch or $fetch? Picking the right one in NuxtOne question decides it. If the page needs the data to render, call useFetch in setup. If a click causes the request, call $fetch in the handler.22 Sep 2026 · 6 min read
- Release notesVueUse 15: the breaking changes in plain wordsVueUse 15.0 removes templateRef and the old timer options, drops Node 20 and changes three behaviours. Each change, what to search for, and the fix.17 Sep 2026 · 6 min read
- TutorialEditor and Vue DevTools setup in 2026Set up VS Code for Vue with Vue (Official), format on save, ESLint and snippets, then add Vue DevTools 8.2 and check that every piece works.15 Sep 2026 · 8 min read
- Learning tipsWhy your quiz brings old questions backOld questions return on purpose, timed for just before you would forget them. How the review schedule decides, and how to get the most from the daily mix.10 Sep 2026 · 6 min read
- Release notesVitest 5: what changed for Vue testsVitest 5.0 is faster, clears mocks before every test and fails unawaited assertions. What it changes for Vue tests, Browser Mode and Nuxt, and how to upgrade.8 Sep 2026 · 6 min read
- TutorialTypeScript strict mode in a Vue project: the errors you'll hit and the fixesStrict mode in a Vue project brings six kinds of error. Here is each as vue-tsc prints it, a fix without non-null assertions, and a gradual way in.3 Sep 2026 · 6 min read
- TutorialUpgrading a Pinia 3 project to Pinia 4, with the Nuxt and testing packagesA step-by-step upgrade from Pinia 3 to 4.0.3 for a Vite app and a Nuxt app, with the commands, the companion packages and the error each skipped step causes.1 Sep 2026 · 6 min read
- Deep diveWhat Nitro and h3 do under your Nuxt server routesA Nuxt server route passes through three layers. What Nuxt, Nitro and h3 each do, from defineEventHandler to storage, caching and deploy presets.27 Aug 2026 · 7 min read
- TutorialVue warnings decoded: the ten you will meet firstTen Vue 3.5 console warnings you will meet early, with the exact text, what causes each one and the few lines of code that make it go away.25 Aug 2026 · 7 min read
- Learning tipsFinished a track? Here is how to keep the knowledgeThe last lesson is where forgetting starts. A four-week plan to keep what you learned, with one small project, mixed practice and the reviews that follow.20 Aug 2026 · 7 min read
- TutorialRAG in a Nuxt app: embeddings, retrieval and a chatbot that knows your docsBuild a docs chatbot in Nuxt that answers from your own pages, embedding chunks at build time, ranking them per question and citing its sources.18 Aug 2026 · 7 min read
- Release notesVitest 5 release candidate: what's coming for Vue testsVitest 5.0.0-rc.1 clears mocks before every test and fails unawaited async assertions. Here is what breaks in Vue test files and how to try the RC safely.13 Aug 2026 · 6 min read
- TutorialAPI security for AI features: rate limits, prompt injection and error handlingHarden a Nuxt AI route step by step with rate limits, token caps, scoped tools, untrusted output, careful logging and safe errors, mapped to OWASP.11 Aug 2026 · 7 min read
- Deep diveAsync tests: nextTick, flushPromises and fake timersWhy a component test sees stale DOM, and which await fixes it, from nextTick and flushPromises to fake timers, vi.waitFor and async setup.6 Aug 2026 · 6 min read
- TutorialTools and structured output with the AI SDK 7Give a model real data with tools, cap its loop with stopWhen, get typed JSON back with Output.object, and show every tool call in a Vue chat with useChat.4 Aug 2026 · 6 min read
- TutorialPage transitions with the View Transitions API and motion-vAnimate route changes with the browser's View Transitions API in Vue Router and Nuxt, morph a photo from list to detail, and use motion-v inside the page.30 Jul 2026 · 7 min read
- Release notesNuxt 3 reaches end of life on 31 July: a checklistNuxt 3 stops getting fixes on Friday. Patch to 3.21.10 today, check your modules and Node version, then plan the move to Nuxt 4 in order.28 Jul 2026 · 7 min read
- Release notesVue 3.6 reaches release candidate: Vapor Mode is feature completeVue 3.6.0-rc.1 declares Vapor Mode feature complete, and rc.2 already changed event handling. What the RC supports, what it leaves out, and how to test it.23 Jul 2026 · 7 min read
- Release notesNuxt 4.5: Vite 8, SSR streaming, stable error codes and useLayout()Nuxt 4.5 moves to Vite 8, adds experimental SSR streaming, coded errors, useLayout, named views and an enabled option for useFetch. Here is the upgrade.21 Jul 2026 · 7 min read
- Release notesPinia 4: what changed and what to doPinia 4 is ESM only, needs @vue/devtools-api installed next to it and explains its errors better. Your stores stay the same. Here is the upgrade.16 Jul 2026 · 7 min read
- TutorialMulti-step forms with a Pinia storeA three-step checkout with one Pinia setup store, a Zod schema per step, a route per step, a guard against skipping ahead and a draft that survives reloads.14 Jul 2026 · 6 min read
- Release notesTypeScript 7.0: the Go compiler lands, and what it means for vue-tscTypeScript 7.0 is the Go port, 8 to 12 times faster on full builds. vue-tsc cannot use it yet, so a Vue project stays on 6.0 for now. Here is why.9 Jul 2026 · 7 min read
- Deep divePerformance: lazy hydration, v-memo and measuring firstFind out what is slow before you fix it, then work through the levers that pay off most in a Vue 3.5 or Nuxt 4.4 app, and the ones that only add risk.7 Jul 2026 · 6 min read
- TutorialTauri plugins, mobile builds and the updaterAdd official Tauri plugins, grant them per window, call them from Vue through typed wrappers, run on Android and iOS, and ship signed desktop updates.2 Jul 2026 · 7 min read
- Release notesAI SDK 7: what changes for Vue appsAI SDK 7 brings back useChat for Vue, renames system to instructions and changes the stream helpers. Here is the exact diff for a Nuxt chat, plus tools.30 Jun 2026 · 6 min read
- TutorialWrite a composable the VueUse wayBuild useOnline and a small clipboard composable with the conventions VueUse uses, compare them with the real thing, and publish them as a shared package.25 Jun 2026 · 6 min read
- TutorialSupply chain security: lockfiles, provenance and OWASP A03OWASP A03 is about the code you install. Lock it, delay it, block its install scripts and pin your CI, with the commands for pnpm 11 on Node 24.23 Jun 2026 · 8 min read
- Deep diveComposables: the rules that keep them reusableSix rules that make a composable safe to reuse, shown by refactoring one tangled search component into two small composables, with tests for both.18 Jun 2026 · 6 min read
- TutorialMobile UI with Ionic Vue 8Ionic gives a Capacitor app native-looking components, platform styles and a page stack. Build a small notes app with Ionic Vue 8 and run it on a phone.16 Jun 2026 · 7 min read
- Release notesMeet Nuxi: the Nuxt agent gets a nameThe AI agent on nuxt.com is now called Nuxi, after the old Nuxt CLI command. The CLI itself is unchanged, and the docs write every command as nuxt.11 Jun 2026 · 7 min read
- TutorialForms and inputs: v-model modifiers, checkboxes and selectsHow v-model behaves on text fields, checkboxes, radios and selects, what .lazy, .number and .trim do, and why your numbers sometimes arrive as strings.9 Jun 2026 · 5 min read
- TutorialWebMCP: let AI agents use your appWebMCP lets a page hand AI agents named tools instead of buttons to guess at. Here is the API in Chrome 149's origin trial and a Vue composable to use it.4 Jun 2026 · 6 min read
- TutorialRendering modes in Nuxt: SSR, SSG, ISR and routeRulesServer rendering, static generation, cached pages and client-only routes, what each needs from your host, and how routeRules mixes them in one Nuxt app.2 Jun 2026 · 7 min read
- TutorialTyped slots, defineExpose and component instancesType slot props with defineSlots, give a child a small typed API with defineExpose, and reach it from the parent with useTemplateRef, generics included.28 May 2026 · 5 min read
- TutorialComputed properties: cache, don't recalculateBuild a filtered, sorted list with computed, see why it runs once per change, and learn the two mistakes that leave a computed wrong or stale.26 May 2026 · 6 min read
- TutorialBroken access control: why hiding a button is not securityA v-if hides a button, not the endpoint behind it. Put role, ownership and URL checks on the server in Nuxt, and log every request you refuse.19 May 2026 · 6 min read
- TutorialComponent libraries in 2026: Nuxt UI, PrimeVue, Vuetify and when to use noneOne page with a data table, a dialog and a form, built in Nuxt UI, PrimeVue and Vuetify, then compared, plus when to build your own with Reka UI.14 May 2026 · 7 min read
- Release notesRolldown 1.0: the bundler under Vite 8 is stableRolldown 1.0 locks the API of the Rust bundler inside Vite 8. What the promise covers, what it means for a Vue project, and how to read its errors.12 May 2026 · 6 min read
- Deep diveStreaming AI responses: fetch, ReadableStream and the AI SDKHow a model's reply reaches the browser word by word, built by hand with fetch and a stream reader, then rebuilt with AI SDK 6 in a Nuxt app.7 May 2026 · 6 min read
- TutorialTesting Library and Vitest Browser Mode for VueWrite Vue component tests that find elements by role and label, type like a real user, and then move the same test into a real browser with Vitest.5 May 2026 · 5 min read
- Release notesThe Nuxt Agent and the Nuxt MCP server: AI help that reads the docsThe Nuxt team launched a beta AI agent on nuxt.com. Here is what it does, how it is built, and how to give your own editor the same docs server.30 Apr 2026 · 6 min read
- TutorialA spinning 3D scene with TresJS and useLoop()Build one Three.js scene in Vue with TresJS, step by step, from an empty canvas to a lit, spinning box with orbit controls, a speed slider and a 3D model.28 Apr 2026 · 6 min read
- Behind the scenesHow the AI instructor picks your questionsA set of rules picks every lesson quiz. The optional AI instructor may swap in its own choice from the same reviewed questions, and anything else is ignored.23 Apr 2026 · 6 min read
- TutorialRender functions and JSX: when templates are not enoughLearn what h() returns, build a heading with a dynamic level, handle props and slots in render functions, set up JSX with Vite, and know when a template wins.21 Apr 2026 · 6 min read
- Release notesNuxt Scripts 1.0: third-party scripts without the slowdownNuxt Scripts 1.0 is stable. It loads analytics, maps and video embeds when you choose, waits for consent, and can serve them from your own domain.16 Apr 2026 · 6 min read
- TutorialSecurity headers and CSP in Nuxt with nuxt-securityAdd nuxt-security to a Nuxt 4 app, read the headers and the Content Security Policy it sends, allow the origins you need and test every change with curl.14 Apr 2026 · 7 min read
- TutorialDesktop apps with Tauri 2 and VueTurn a Vue app into a desktop app with Tauri 2. Scaffold it, call Rust with invoke, open a native file dialog, grant permissions and build an installer.7 Apr 2026 · 6 min read
- TutorialDynamic routes, params and typed routesDeclare route params, pass them as props, keep a page in sync when only the param changes, read the query string and let Vue Router 5 type it all.2 Apr 2026 · 6 min read
- TutorialTransformers.js 4 in a Vue app: embeddings and classification in the browserRun a sentiment classifier and a small semantic search in a Vue app with Transformers.js 4, in a web worker, on WebGPU when the browser has it.31 Mar 2026 · 7 min read
- TutorialAsync state with useAsyncState and VueUse's useFetchStop writing loading, error and result refs by hand. Build a book search with VueUse's useAsyncState, useFetch, createFetch and until, and avoid two traps.26 Mar 2026 · 7 min read
- Release notesTypeScript 6.0: the bridge release before the Go compilerTypeScript 6.0 is the last release on the JavaScript codebase. It changes defaults and deprecates old options ahead of 7.0. Here is what a Vue project must fix.24 Mar 2026 · 7 min read
- Release notesNuxt 4.4: createUseFetch(), Vue Router 5 and useAnnouncer()Nuxt 4.4 lets you build your own preconfigured useFetch, moves to Vue Router 5 and adds an announcer for screen readers. Here is what to use first.19 Mar 2026 · 6 min read
- Release notesVite 8 is out: Rolldown, one bundler and what a Vue project noticesVite 8.0 builds with Rolldown instead of esbuild and Rollup. A create-vue project changes four version numbers and no config. Here is the upgrade.17 Mar 2026 · 7 min read
- TutorialAuthentication basics: tokens, cookies and where to keep themSession cookies or bearer tokens, HttpOnly and SameSite, why localStorage tokens leak, and a Vue login flow whose Pinia store holds only the profile.12 Mar 2026 · 8 min read
- Release notesPinia Colada 1.0: the data-fetching layer for Pinia is stablePinia Colada 1.0 removes one deprecated useQuery form, ships a codemod for it, and freezes the API. Here are the 1.0 patterns and the upgrade.10 Mar 2026 · 7 min read
- TutorialTesting Nuxt apps: mountSuspended, registerEndpoint and end-to-endSet up @nuxt/test-utils 4 with Vitest 4 projects, test a useFetch component with a fake endpoint, mock useRoute in a page test, and add end-to-end tests.5 Mar 2026 · 6 min read
- TutorialAccessible components: focus, keyboard and ARIAMake Vue components work for keyboard and screen reader users, with native elements, visible focus, arrow-key tabs, useId labels, a live region and a dialog.3 Mar 2026 · 7 min read
- Release notesMotion for Vue 2.0: what changedmotion-v 2.0 is ESM only, drops the old hover and press shorthand props, and adds a v-motion directive for animating any element without a wrapper.26 Feb 2026 · 6 min read
- TutorialAuthentication and sessions in Nuxt with nuxt-auth-utilsBuild an email and password login in Nuxt 4.3 with nuxt-auth-utils: scrypt hashes, a sealed session cookie, a protected API route and a logout.24 Feb 2026 · 6 min read
- TutorialSchema validation with Zod 4 and VeeValidateWrite one Zod 4 schema for a sign-up form, connect it to VeeValidate in the browser, and run the same schema again in a Nuxt server route.19 Feb 2026 · 6 min read
- Release notes@nuxt/test-utils 4: what changed for Nuxt tests@nuxt/test-utils 4 requires Vitest 4, starts Nuxt in beforeAll so mocks reach plugins and middleware, and breaks composables called in a describe body.17 Feb 2026 · 5 min read
- Release notesESLint 10 with eslint-plugin-vue: the upgradeESLint 10 removes eslintrc and old Node versions. Vue's lint plugins do not list it as supported yet, so here is what to fix now and when to upgrade.12 Feb 2026 · 7 min read
- Deep diveSSR and hydration: what the server sends and what the browser doesFollow one Nuxt request from server render to hydration, learn to read a hydration mismatch warning, and fix the usual causes, from dates to localStorage.10 Feb 2026 · 7 min read
- TutorialMigrating from unplugin-vue-router to Vue Router 5A step-by-step move from unplugin-vue-router to Vue Router 5, one diff per step, plus the error messages you may see afterwards and how to fix each one.5 Feb 2026 · 5 min read
- Release notesVue Router 5: file-based routing moves into coreVue Router 5 merges unplugin-vue-router into the main package. Apps with a routes array upgrade with one command; file-based apps change a few imports.3 Feb 2026 · 7 min read
- Tutorialv-if, v-show and v-for: the directives you use every dayv-if removes an element, v-show hides it and v-for repeats it. Here is when each is cheaper, why index keys cause bugs, and the two mistakes to avoid.29 Jan 2026 · 6 min read
- Release notesNuxt 4.3: appLayout in routeRules, the #server alias and ISR payloadsNuxt 4.3 sets layouts from routeRules, writes payload files for ISR and SWR routes, adds a #server alias and extends Nuxt 3 support to July.27 Jan 2026 · 8 min read
- TutorialInjection and XSS: where Vue protects you and where it does notVue escapes what you interpolate and bind, nothing else. Broken and fixed versions of v-html, javascript: URLs and SQL strings, plus a CSP as the safety net.22 Jan 2026 · 7 min read
- TutorialInternationalisation with vue-i18n 11Set up vue-i18n 11 in Composition mode, keep messages in JSON per language, handle plurals, dates and numbers, load locales lazily, and do the same in Nuxt.20 Jan 2026 · 6 min read
- TutorialCanvas and animation loops in a Vue componentOwn a canvas from Vue: a template ref, a context scaled for the screen, a frame loop that stops on unmount, and controls the loop reads without re-rendering.15 Jan 2026 · 6 min read
- TutorialData fetching with Pinia ColadaBuild a todo list on Pinia Colada 0.21: a cached query, status against asyncStatus, a mutation that invalidates the list, defineQuery and the Nuxt module.13 Jan 2026 · 6 min read
- TutorialError handling in Vue: onErrorCaptured, app.config.errorHandler and boundariesWhere Vue catches errors for you, how to report them from one place, and how to build an ErrorBoundary component that shows a fallback and a retry button.8 Jan 2026 · 6 min read
- Release notesVue 3.6 beta: a first look at Vapor ModeVue 3.6.0-beta.1 declares Vapor Mode feature-complete, with Suspense the one exception, and ships the alien-signals reactivity rewrite. Stable Vue stays 3.5.26.6 Jan 2026 · 7 min read
- Learning tipsA Vue learning plan for 2026A twelve-week plan from zero and a six-week plan for React and Angular developers, with a goal, a thing to build and a thing to skip for every week.1 Jan 2026 · 8 min read
- Behind the scenes2025 in review: what learners got stuck onFive Vue ideas the quiz questions keep coming back to, why each one is confusing, the one sentence that fixes it, and what changed around Vue in 2025.30 Dec 2025 · 6 min read
- TutorialDark mode and theming with CSS variablesName colours by role as CSS variables, swap them with one attribute, switch themes from a composable, and stop the flash of the wrong theme on load.18 Dec 2025 · 7 min read
- TutorialBuild an MCP server with Nuxt MCP ToolkitGive an AI assistant two tools from a Nuxt todo app with the three-week-old MCP Toolkit module, test them in DevTools and connect Cursor or VS Code.16 Dec 2025 · 7 min read
- TutorialEnd-to-end tests with Playwright for a Vue appInstall Playwright 1.57 next to a Vite and Vue app, point it at vite preview, write three tests with role locators, read a trace, run it in CI.11 Dec 2025 · 8 min read
- Release notesCapacitor 8: Swift Package Manager, Android 16 and the upgradeCapacitor 8 defaults to Swift Package Manager on iOS, adds a System Bars plugin for Android edge-to-edge and raises every minimum. Here is the upgrade.9 Dec 2025 · 8 min read
- Release notesVite 8 beta: Rolldown becomes the bundlerThe first Vite 8 beta swaps esbuild and Rollup for Rolldown. Here is what changes in a Vue project's config, what still breaks, and how to test it in a branch.4 Dec 2025 · 7 min read
- TutorialuseState, ref or Pinia? State in a Nuxt appA ref outside a component leaks between requests on the server. Here is why, what useState does about it, and when a Pinia store earns its place in a Nuxt 4 app.2 Dec 2025 · 7 min read
- Deep diveCustom directives and plugins: when a component is not the answerWrite v-focus and v-click-outside with typed hooks, register them locally and globally, ship them in a plugin, and learn when a composable is the better tool.27 Nov 2025 · 6 min read
- TutorialSensors and the viewport: useIntersectionObserver, useElementSize and useMediaQueryLazy-load images, size a component by its own box, respect reduced motion and add a back-to-top button with VueUse 14, with cleanup and server rendering handled.25 Nov 2025 · 6 min read
- Tutorialllms.txt: make your docs readable by AI modelsllms.txt is a small Markdown file that gives language models a map of your site. Write one by hand, then generate it in Nuxt with nuxt-llms and Nuxt Content.20 Nov 2025 · 6 min read
- TutorialThe OWASP Top 10 for 2025, read as a Vue developerThe OWASP Top 10 release candidate for 2025 has two new categories and a new order. Here is what each one means in a Vue or Nuxt app, with one action for each.18 Nov 2025 · 7 min read
- TutorialTanStack Query or Pinia Colada: caching your server dataBuild the same todo list with TanStack Query and with Pinia Colada, see what a query cache does for you, and get a clear rule for which one to install.13 Nov 2025 · 6 min read
- TutorialEnvironment variables and deployment: dev, preview, productionHow Vite and Nuxt read environment variables, which ones end up in the browser, and how to ship a static or server build with a build step in CI.11 Nov 2025 · 7 min read
- TutorialSEO meta, Open Graph and error pages in Nuxt 4Set titles, descriptions, Open Graph tags and canonical links with useSeoMeta and useHead, build an app/error.vue, and return a real 404 from a page.6 Nov 2025 · 6 min read
- TutorialLifecycle hooks and template refs, with useTemplateRef()Learn when onMounted, onUpdated and onUnmounted fire, why DOM work waits for mount, and how useTemplateRef() reaches a real element or a child component.4 Nov 2025 · 5 min read
- Release notesNuxt 4.2: abort signals in useAsyncData and a new error overlayNuxt 4.2 hands every useAsyncData handler an AbortSignal that cancels replaced requests for real, and shows a technical error overlay with your own error page.30 Oct 2025 · 6 min read
- Release notesVueUse 14: Vue 3.5 minimum, deprecated aliases and a sync computedAsyncVueUse 14.0 requires Vue 3.5, marks the old alias names deprecated, changes computedAsync and useThrottleFn timing, and moves its build to tsdown.28 Oct 2025 · 7 min read
- Release notesVitest 4: Browser Mode is stable, visual regression and Playwright tracesVitest 4.0 makes Browser Mode stable, adds screenshot assertions and Playwright traces, and drops Node 18 and Vite 5. Here is what changes for Vue tests.23 Oct 2025 · 8 min read
- Release notesVue Router 4.6: what's newVue Router 4.6 rebuilds the package, fixes RouterLink under strictTemplates and iOS scroll restoration, and previews a smaller, faster route matcher.21 Oct 2025 · 6 min read
- TutorialRun a language model in the browser with WebLLMWebLLM runs a chat model on the visitor's own GPU through WebGPU. Build a Vue chat that downloads a small model on click, streams replies and knows its limits.16 Oct 2025 · 8 min read
- TutorialVeeValidate or FormKit? Two form libraries comparedThe same sign-up form built twice, once with VeeValidate 4 and once with FormKit 1, then compared on control, typed schemas, styling and size.14 Oct 2025 · 8 min read
- Deep diveTeleport: modals and tooltips that escape their parentWhy a modal gets clipped by its parent, how Teleport moves the DOM without moving the component, and how defer, disabled and the native dialog element fit in.9 Oct 2025 · 7 min read
- TutorialPersist Pinia state with a pluginWrite a Pinia plugin that saves a store to localStorage, restores it on load, stays off the server and versions its data. Then compare it with the popular package.7 Oct 2025 · 6 min read
- TutorialNested routes and layouts with Vue RouterChildren routes let one layout wrap many pages. Here is how nested RouterView, relative paths, named views and route.matched fit together.2 Oct 2025 · 6 min read
- Release notesNuxt UI v4: UI Pro is free, and one package for everythingNuxt UI 4.0 folds the paid Pro components into one free MIT package: over 110 components, the templates and the Figma kit. The upgrade, and the renames.30 Sep 2025 · 6 min read
- Release notesTresJS 5: Three.js scenes as Vue componentsTresJS 5.0 is ESM only, rebuilds pointer events, replaces useRenderLoop with useLoop and makes useLoader reactive. The scene, the loop and the upgrade.25 Sep 2025 · 7 min read
- TutorialTurn a Vue app into a mobile app with Capacitor 7Wrap a Vite-built Vue app in Capacitor 7, run it on an iPhone and an Android device, use the camera with a web fallback, and get live reload working.23 Sep 2025 · 7 min read
- TutorialType checking a Vue project: vue-tsc, the editor and CIVite never checks your types. Here is the script that does, the three tsconfig files create-vue gives you, a matching editor setup, and a CI job with a cache.18 Sep 2025 · 8 min read
- Deep diveWhat to test in a Vue app (and what to skip)Unit tests for pure logic, component tests for what users see, a few end-to-end runs for the paths that pay. With a coupled test and its rewrite.16 Sep 2025 · 7 min read
- TutorialReal-time UI with WebSockets and server-sent eventsA live counter in Nuxt 4 two ways: a server-sent event stream read with useEventSource, and a Nitro WebSocket handler driven by useWebSocket, with reconnection.11 Sep 2025 · 7 min read
- TutorialDebounce and throttle with VueUseDebounce waits for quiet, throttle keeps a steady pace, and VueUse 13 has a composable for each, built into a search box, a scroll handler and a toast.9 Sep 2025 · 6 min read
- Release notesNuxt 4.1: lazy hydration components and entry import mapsNuxt 4.1 keeps chunk hashes stable with an import map, makes defineLazyHydrationComponent work without auto-imports, and gives module authors dependencies and hooks.4 Sep 2025 · 7 min read
- TutorialA debugging checklist for Vue appsRead the warning, open DevTools, set a breakpoint and shrink it in the playground: a fixed order for finding Vue bugs, with the warnings you will meet most.2 Sep 2025 · 7 min read
- TutorialSecurity basics for Vue apps: XSS, v-html and secretsWhat Vue escapes for you, what v-html does not, how to check links from visitors, why a key in client code is public, and the habits that cover the rest.28 Aug 2025 · 7 min read
- TutorialReactive SVG charts with nothing but VueBuild a bar chart and a line chart as plain SVG in a Vue template, with computed scales, CSS transitions, hover state and proper names for screen readers.26 Aug 2025 · 6 min read
- TutorialRoute middleware in Nuxt 4: three kinds, one jobAnonymous, named and global route middleware in Nuxt 4, the order they run, what to return, where they run, and why a server route still has to check the cookie.21 Aug 2025 · 6 min read
- TutorialStores that use other storesA cart store that reads the user's plan for a discount, a checkout action that touches both stores, the circular read that crashes them, and how to test the pair.19 Aug 2025 · 6 min read
- Deep diveReactivity in depth: proxies, effects and why Vue knows what changedHow a reactive object records who read it, how an effect re-runs, why computed caches, and why two writes give one render. With a forty-line reactive().14 Aug 2025 · 8 min read
- TutorialGeneric components with <script setup generic>A list component that keeps the type of its items from prop to slot to event: the generic attribute, typed v-model, constraints, and where it stops.12 Aug 2025 · 5 min read
- Release notesAI SDK 5 with Vue: the Chat class, streamText and typed messagesAI SDK 5 splits UI messages from model messages, replaces Vue's useChat with a Chat class and types every tool part. Build a Nuxt 4 chat page with it.7 Aug 2025 · 6 min read
- TutorialMocking fetch, modules and timers in VitestFake a network call, swap a module, control the clock for a debounce, and clean up after each test so a mock from one test never leaks into the next.5 Aug 2025 · 6 min read
- Release notesVue 3.6 alpha: Vapor Mode arrives, with caveatsThe first Vue 3.6 alphas ship Vapor Mode, a compile mode with no virtual DOM, and a rewritten reactivity core, so here is what works and what does not.31 Jul 2025 · 8 min read
- TutorialAnimate lists with <TransitionGroup>Fade items in and out, slide neighbours into place when the order changes, and stagger a search result list, with the one key mistake that breaks all of it.29 Jul 2025 · 6 min read
- TutorialScoped styles, CSS modules and v-bind() in single-file componentsThree ways to keep CSS inside a Vue component, what the compiler turns each one into, and the one rule that explains why a parent's style misses a child.24 Jul 2025 · 6 min read
- TutorialUpgrading a Nuxt 3 app to Nuxt 4, step by stepWalk a small Nuxt 3 app through the Nuxt 4 upgrade: check modules, run the upgrade and codemod, move folders, fix data fetching, types and tests.22 Jul 2025 · 7 min read
- Release notesNuxt 4.0 is here: the app/ directory, data fetching changes and the upgradeNuxt 4.0.0 was published on 15 July. A new app/ folder, saner data fetching defaults, split TypeScript projects and a faster CLI, with few surprises.17 Jul 2025 · 6 min read
- Release notesZod 4 is stable: faster parsing and what changes in your schemasZod 4.0.0 is on npm. Parsing is several times faster, the bundle is half the size, and error messages, objects and string formats change. Here is the upgrade.15 Jul 2025 · 7 min read
- Release notesNuxtLabs joins Vercel: what changes for Nuxt and what does notOn 8 July Vercel announced it is acquiring NuxtLabs. Here is what the three announcements promise, what moves, and why your code and deployment do not.10 Jul 2025 · 5 min read
- TutorialLayouts and definePageMeta in NuxtGive every page a shared frame with layouts, pick a different one for login pages, switch at runtime, and use definePageMeta for middleware and transitions.8 Jul 2025 · 6 min read
- Release notesVue Language Tools 3.0: vue-tsc 3 and the always-on hybrid modeVue Language Tools 3.0 makes hybrid mode the only mode, renames three settings, adds four tsconfig options and ships vue-tsc 3. Here is what to change.3 Jul 2025 · 7 min read
- TutorialSummarise text in the browser with Chrome's Summarizer APIChrome 138 ships a Summarizer API backed by a model that runs on the device. Build a Vue component that uses it, with a download bar and a fallback.1 Jul 2025 · 8 min read
- Release notesVite 7: Node 20.19+, Baseline targets and the Rolldown previewVite 7.0 needs Node 20.19 or 22.12, ships as ESM only and targets Baseline browsers by default. Most Vue projects upgrade with one install command.26 Jun 2025 · 7 min read
- Learning tipsHow to read the Vue docs (and when not to)A map of vuejs.org, a method for reading an API page, and a worked example that turns the watch flush option from jargon into a decision.24 Jun 2025 · 7 min read
- Deep diveAsync components, Suspense and lazy loadingSplit a heavy component into its own chunk with defineAsyncComponent, show loading and error states, and learn when Suspense helps and when to leave it alone.19 Jun 2025 · 8 min read
- TutorialFetch data in a component: loading, error and the empty stateEvery list that comes from an API has four states, not one. Build a Vue component that shows all of them, cancels on unmount and retries cleanly.17 Jun 2025 · 6 min read
- Release notesOxlint 1.0: a 50x faster linter, and how it fits next to ESLintOxlint 1.0 lints a Vue project in under a second, but it only sees script blocks. Here is what it covers, what it misses, and how to run it before ESLint.12 Jun 2025 · 7 min read
- TutorialProvide and inject, explained with a theme examplePass a theme from the root of your app to a button deep inside the layout without threading a prop through every component in between.10 Jun 2025 · 5 min read
- Release notesNuxt 4 alpha: the app/ directory and how to try it todayThe first Nuxt 4 alpha is on npm and the roadmap is published. What the alpha contains, what the plan says about timing, and how to opt in from Nuxt 3.17.5 Jun 2025 · 7 min read
- Release notesVitest 3.2: projects, test annotations and scoped fixturesVitest 3.2 renames workspace to projects, gives every test an annotate function and an abort signal, and lets a fixture live for a whole file. Nothing breaks.3 Jun 2025 · 6 min read
- TutorialTesting props, emits and slotsMount with props, change them with setProps, read emitted payloads, pass slots as strings or render functions, and know when attachTo is needed.29 May 2025 · 6 min read
- TutorialTyping refs, computed and injectGive ref, computed, template refs and inject the right types in Vue 3.5, and fix the possibly null errors without a single exclamation mark.27 May 2025 · 5 min read
- TutorialClass and style bindings, without the messObject and array syntax for class bindings, a computed once conditions pile up, styles with units and CSS variables, and where a class lands on a component.22 May 2025 · 5 min read
- TutorialMake your Vue app installable: PWA basicsA manifest, a service worker and HTTPS make a Vue app installable. Set up vite-plugin-pwa 1.0, add an update prompt and check the result in Chrome.20 May 2025 · 7 min read
- TutorialYour first API route in Nuxt's server/ folderWrite GET and POST handlers in Nuxt's server folder with defineEventHandler, read bodies, queries and params, return typed data, and call it all from a page.15 May 2025 · 6 min read
- Deep divePinia from the inside: state, getters and actionsWhat a Pinia store is, why useStore returns one object everywhere, how getters cache, what $patch and $subscribe do, and what devtools shows for each part.13 May 2025 · 7 min read
- Release notesNode.js 24 is here: what a Vue project needs to knowNode 24.0.0 shipped on 6 May with V8 13.6, npm 11 and a stable permission flag. What it changes for a Vite and Vue project, and when to move production.8 May 2025 · 6 min read
- TutorialNavigation guards: protecting routes the right wayVue Router guards that send visitors to login and back, warn about unsaved changes and set page titles, without redirect loops or a false sense of security.6 May 2025 · 6 min read
- TutorialForm state and validation by hand, no libraryA sign-up form with reactive state, computed errors, touched tracking on blur, server errors on submit, and messages a screen reader announces.1 May 2025 · 6 min read
- Release notesNuxt 3.17: the async data layer, reworkedNuxt 3.17 makes every useAsyncData call with the same key share one set of refs, accepts reactive keys and adds NuxtTime. What changed, and how to upgrade.29 Apr 2025 · 8 min read
- TutorialEnter and leave animations with <Transition>Vue's Transition component adds six classes while an element appears or disappears. Build a fade, a slide and an out-in swap, and learn the one-root rule.24 Apr 2025 · 7 min read
- Learning tipsWhy we schedule your reviews with spaced repetitionMemory fades on a curve, and reviewing just before you forget flattens it. Here is how the school turns each quiz question into a scheduled review.22 Apr 2025 · 7 min read
- TutorialA reusable useFetch composable, written by handBuild useFetch(url) in plain Vue step by step: loading and error refs, a reactive url, request cancellation, a refresh function and a generic type parameter.17 Apr 2025 · 6 min read
- Deep diveWatchers in depth: immediate, deep, flush and cleanupWhat watch and watchEffect accept, when they fire, the deep and flush options, cleanup for stale requests, and the pause and resume handle from Vue 3.5.15 Apr 2025 · 6 min read
- TutorialTesting Pinia stores with createTestingPiniaTest a Pinia store on its own with a fresh pinia, then test a component with createTestingPinia, stubbed actions, initial state and the getter gotcha.10 Apr 2025 · 6 min read
- TutorialSetup stores or option stores? Pick one and stay consistentThe same cart store written as an option store and as a setup store, how the parts map, the one rule setup stores add, and why new code should use them.8 Apr 2025 · 6 min read
- Release notesTailwind CSS 4.1: text shadows, masks and safer utilitiesTailwind CSS 4.1 adds text shadows, mask utilities, input device variants and fallbacks for older browsers. Here is what shipped and three uses in a Vue component.3 Apr 2025 · 7 min read
- TutorialTyping props and emits in script setupType a component's props, defaults, events and v-model once in script setup, and let vue-tsc catch the mistakes the browser never sees.1 Apr 2025 · 8 min read
- Deep diveSlots explained: default, named and scopedProps pass data into a component, slots pass markup. Default, named and scoped slots with a Card and a List, and where v-slot is allowed to go.27 Mar 2025 · 5 min read
- TutorialAdd Vue Router to a Vite app in ten minutesInstall vue-router, write a routes array, drop in RouterView and RouterLink, add a 404, and set one server rule so refreshing a deep link works.25 Mar 2025 · 6 min read
- Behind the scenesWhy every lesson ends with a quizRecalling an idea strengthens memory more than rereading it. Here is why each lesson ends with three questions, how they are picked, and what a wrong answer does.20 Mar 2025 · 7 min read
- Release notesNuxt UI v3: Reka UI, Tailwind v4 and a Vue-only modeNuxt UI 3 is rebuilt on Reka UI and Tailwind CSS v4 and now runs in a plain Vite app. Here is the setup for both, plus a form and a colour change.18 Mar 2025 · 6 min read
- Release notesVueUse 13: ESM only, and what that means for youVueUse 13 has one breaking change, the CommonJS build is gone. For a Vite app that changes nothing. For Jest and old Node scripts it needs a fix.13 Mar 2025 · 5 min read
- Release notesNuxt 3.16: create nuxt, Unhead 2 and lazy hydrationNuxt 3.16 adds a tiny project creator, moves to Unhead 2, and lets a lazy component wait to hydrate until it is visible, idle or touched.11 Mar 2025 · 7 min read
- Release noteseslint-plugin-vue 10 and flat config: a clean lint setup for Vueeslint-plugin-vue 10 drops the rules deprecated in version 9 and adds five to its presets. Here is a full flat config for a Vue 3 TypeScript project.6 Mar 2025 · 7 min read
- TutorialKeep state across reloads with useStorage()useStorage() from VueUse gives you a ref that saves itself to localStorage. Build a settings panel that survives a reload, and avoid the one default-value trap.4 Mar 2025 · 6 min read
- TutorialFile-based routing in Nuxt 3, from pages/ to paramsHow Nuxt 3 turns the pages/ folder into routes: static pages, dynamic params, catch-all routes, nested pages with NuxtPage, links and param validation.27 Feb 2025 · 6 min read
- Deep diveReactive props destructure in Vue 3.5, explainedVue 3.5 lets you destructure defineProps() without losing reactivity. Here is what the compiler rewrites, how defaults work, and where it still bites.25 Feb 2025 · 6 min read
- TutorialYour first component test with Vitest and Vue Test UtilsSet up Vitest 3 with happy-dom in a create-vue project, mount a Counter, click its button and assert the text, then test a prop and an emitted event.20 Feb 2025 · 6 min read
- Tutorialv-model on your own components with defineModel()Build a Stepper that works with v-model, first the long way with a prop and an emit, then in one line with defineModel(), plus named models and modifiers.18 Feb 2025 · 6 min read
- Release notesPinia 3 is out: what it means for your storesPinia 3.0.0 drops Vue 2 and two deprecated APIs and adds nothing new. Most stores need no change. Here is the upgrade for Vue and Nuxt apps.13 Feb 2025 · 5 min read
- Learning tipsLearning Vue in 20 minutes a dayA daily routine for people with little time: one lesson, run its code, change one thing, take the quiz, then clear the reviews that are due.11 Feb 2025 · 6 min read
- TutorialProps down, events up: how components talkA parent passes data to a child through props. A child asks for a change through an event. Build a task list that follows the rule, and see what breaks.6 Feb 2025 · 5 min read
- Deep divecomputed or watch? A decision guidecomputed is for values worked out from other values. watch is for side effects. The guide shows the two classic mix-ups and how Vue 3.5 cancels stale requests.4 Feb 2025 · 6 min read
- TutorialNuxt Content v3: a Markdown blog in an afternoonNuxt Content 3 turns a folder of Markdown files into a typed, queryable collection. Build a blog with a list page and a post page in a Nuxt 3 app.30 Jan 2025 · 6 min read
- Release notesTailwind CSS v4 with Vue and Vite: the new setupTailwind CSS 4.0 replaces the config file with CSS, the three directives with one import, and PostCSS with a Vite plugin. The full setup for a Vue project.28 Jan 2025 · 6 min read
- Tutorialref() or reactive()? How Vue tracks your dataVue updates the page when your data changes, but only if it can see the change. Here is how ref() and reactive() make that possible, and which to use.23 Jan 2025 · 6 min read
- Release notesVitest 3 is out: what changes for your Vue testsVitest 3.0 brings a rewritten reporter, inline workspaces and line-number filtering. Most Vue tests pass unchanged; a few spy and timer habits do not.21 Jan 2025 · 6 min read
- TutorialYour first Vue component, line by lineCreate a Vue project with one command, read App.vue top to bottom, and build a counter that updates the page. Every line explained.16 Jan 2025 · 6 min read
- Behind the scenesWelcome to vuejs.schoolvuejs.school is a free school for Vue.js. Short lessons with runnable code, a quiz after each one, and reviews that come back before you forget.14 Jan 2025 · 5 min read