[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"articles-feed-\u002Fnews-1--":3,"$f2v3tzw7dti6zg":-1,"newsletter-stats":417,"public-site-stats":419},{"items":4,"page":414,"pageSize":415,"totalCount":416},[5,32,57,79,107,123,146,163,182,202,221,241,263,280,300,318,340,360,380,398],{"content":6,"createdAt":7,"id":8,"image":9,"isAffiliate":10,"isPublished":10,"publishedAt":11,"slug":12,"sourceId":13,"sourceName":14,"sourceType":15,"summary":16,"title":17,"updatedAt":18,"url":19,"urlHash":20,"tags":21},"A catalog of practical patterns for writing composables that are flexible, predictable, and easy to reuse.","2026-09-23T16:00:18.380Z","01a0ceff-13cc-703b-b10f-63116dac1123","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FyvoLFz3sOw861nLgUKDIB6MumG2kxEigJjmxwxAy.png",true,"2026-09-23T08:00:00.000Z","a-reference-to-composable-patterns-in-vue","019d9eed-d835-729a-a029-7e6320cb67ed","Certificates.dev","certificatesdev","This article provides a catalog of practical patterns for creating composables in Vue, focusing on flexibility, predictability, and reusability. It serves as a reference for developers looking to enhance their composable architecture in Vue applications.","A Reference to Composable Patterns in Vue","2026-09-23T16:00:37.558Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fa-reference-to-composable-patterns-in-vue?friend=MOKKAPPS","7caccfe7f4e1c2ded97fe3e7d4f2cc60327135c70eeae81d753d7aab0ab71f6f",[22,26,29],{"color":23,"id":24,"name":25,"slug":25},"#10b981","019d6bd8-ca21-71c5-a236-37d94fe57d24","composition-api",{"color":23,"id":27,"name":28,"slug":28},"019d6bd8-c9a8-7783-bd22-03145b355427","vue",{"color":23,"id":30,"name":31,"slug":31},"019d9cf0-ca04-75bb-ad86-ce8da1c0be23","architecture",{"content":33,"createdAt":34,"id":35,"image":36,"isAffiliate":37,"isPublished":10,"publishedAt":38,"slug":39,"sourceId":40,"sourceName":41,"sourceType":42,"summary":43,"title":44,"updatedAt":45,"url":46,"urlHash":47,"tags":48},"One of the first things you learn with Vue is that changing reactive state automatically updates the DOM. But there is an important detail that can sometimes cause unexpected behavior: 👉 The DOM doesn't update synchronously after every state change. Vue batches DOM updates and applies them asynchronously. This is an important optimization because multiple state changes can be processed together instead of triggering a separate DOM update for every mutation. Most of the time, you don't need to think about this. But sometimes you need to change some state and then immediately work with the resulting DOM. That's where nextTick() comes in. In this article, we'll explore: What nextTick() is Why Vue doesn't update the DOM synchronously How to use nextTick() Real-world examples When nextTick() is useful Common mistakes and best practices Let's dive in. 🤔 What Is nextTick()? nextTick() is a Vue utility that lets you wait until Vue has finished flushing pending DOM updates. The basic API looks like this: import { nextTick } from 'vue' await nextTick() You typically use it after changing reactive state: count.value++ await nextTick() \u002F\u002F DOM has now been updated Vue's documentation describes nextTick() as a utility for waiting for the next DOM update flush. The important part is understanding why you need to wait in the first place. 🟢 Why Doesn't Vue Update the DOM Immediately? Imagine you have: <script setup lang=\"ts\"> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } <\u002Fscript> <template> <button @click=\"increment\"> {{ count }} <\u002Fbutton> <\u002Ftemplate> When you execute: count.value++ Vue knows that the template needs to be updated. But the DOM isn't necessarily changed immediately. Instead, Vue buffers the update and processes it during the next update cycle. This allows Vue to combine multiple state changes: count.value++ count.value++ count.value++ into a single DOM update instead of unnecessarily updating the DOM three times. This batching behavior is part of how Vue keeps rendering efficient. 🟢 The Problem nextTick() Solves The difference becomes important when you want to access the DOM immediately after changing reactive state. Consider: <script setup lang=\"ts\"> import { ref } from 'vue' const message = ref('Hello') function updateMessage() { message.value = 'Hello Vue' console.log( document.querySelector('#message')?.textContent ) } <\u002Fscript> <template> <p id=\"message\"> {{ message }} <\u002Fp> <\u002Ftemplate> You might expect the console to contain: Hello Vue But it can still contain: Hello Why? Because Vue has updated the reactive state, but the DOM update hasn't been flushed yet. That's exactly the situation nextTick() is designed for. 🟢 A Practical Example: Focusing an Input One of the most useful real-world examples is dynamically rendering an element and then interacting with it. Imagine a form where clicking a button displays an input: <script setup lang=\"ts\"> import { ref, nextTick } from 'vue' const showInput = ref(false) const input = ref<HTMLInputElement | null>(null) async function showAndFocus() { showInput.value = true await nextTick() input.value?.focus() } <\u002Fscript> <template> <button @click=\"showAndFocus\"> Add item <\u002Fbutton> <input v-if=\"showInput\" ref=\"input\" placeholder=\"Enter item\" \u002F> <\u002Ftemplate> Without nextTick(), this can fail: showInput.value = true input.value?.focus() At this point, the <input> may not exist in the DOM yet because Vue hasn't processed the v-if update. With: showInput.value = true await nextTick() input.value?.focus() you wait until Vue has rendered the input. This pattern is extremely useful for: search fields dialogs inline editing dynamic forms keyboard interactions 🟢 nextTick() Is Not a General Delay One common misunderstanding is thinking: await nextTick() is equivalent to: await new Promise(resolve => setTimeout(resolve, 0) ) They're not the same thing. nextTick() is specifically connected to Vue's DOM update cycle. You're not saying: \"Wait some arbitrary amount of time.\" You're saying: \"Wait until Vue has flushed the pending DOM updates.\" That's a much more precise operation. 🟢 Don't Use nextTick() Everywhere It's important not to start adding nextTick() after every reactive state change. For example, this usually doesn't make sense: count.value++ await nextTick() console.log(count.value) You don't need to wait for the DOM just to read the reactive state. The value has already changed: count.value++ console.log(count.value) The reason to use nextTick() is when you specifically need to interact with the updated DOM. Think about the distinction: Reactive state ↓ Already updated DOM ↓ Updated asynchronously If you only care about the reactive state, you don't need nextTick(). If you need the DOM to reflect that state, nextTick() can be the right tool. 📖 Learn more If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below: It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉 🧪 Advance skills A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success. Check out Certificates.dev by clicking this link or by clicking the image below: Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more! ✅ Summary Vue's nextTick() is a small utility, but it solves an important problem: knowing when the DOM has caught up with your reactive state. The most important thing to remember is: 👉 Use nextTick() when you need to work with the DOM after changing reactive state. You usually don't need it for normal Vue development. Vue handles reactive updates for you. But whenever your code needs to say: \"Change this state, wait for Vue to render it, and then do something with the DOM.\" that's exactly where nextTick() shines. Take care! And happy coding as always 🖥️","2026-09-21T08:00:22.162Z","01a0c2fa-f691-745b-9ecb-5f94e880557c","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Faduwj73it3whgflj2swa.png",false,"2026-09-21T05:42:53.000Z","vue-nexttick-wait-for-the-dom-to-update-before-you-touch-it","019d6bd6-7fe0-7244-80dc-9a4e8751886a","Jakub Andrzejewski","rss","This article explains the purpose and usage of Vue's `nextTick()` utility, which allows developers to wait for the DOM to update after changing reactive state. It covers why Vue does not update the DOM synchronously, practical examples of using `nextTick()`, and common mistakes to avoid. Understanding `nextTick()` is crucial for scenarios where immediate DOM interaction is necessary after state changes.","Vue `nextTick`: Wait for the DOM to Update Before You Touch It","2026-09-22T05:19:19.698Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fvue-nexttick-wait-for-the-dom-to-update-before-you-touch-it-56ic","8268a30db0f808e4469a077163250f2e21a658ab9a70bd147c9fbc2da76ce1de",[49,50,51,54],{"color":23,"id":27,"name":28,"slug":28},{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":52,"name":53,"slug":53},"019da076-78fb-706b-9a4c-cee0c989cfff","state-management",{"color":23,"id":55,"name":56,"slug":56},"019d6bd8-fba5-743f-8f9f-4e23c0b31581","tutorial",{"content":58,"createdAt":59,"id":60,"image":61,"isAffiliate":10,"isPublished":10,"publishedAt":62,"slug":63,"sourceId":13,"sourceName":14,"sourceType":15,"summary":64,"title":65,"updatedAt":66,"url":67,"urlHash":68,"tags":69},"Type-Safe Server Routes: End-to-End Types from server\u002Fapi to Your Components How Nuxt infers response types from your server routes so useFetch and $fetch calls are fully typed without manual interfaces.","2026-09-16T16:00:16.819Z","01a0aaf2-89b2-7488-9b6f-7f07e924a0fd","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FsP2jQ87kVYVRGzRaT35TrMTnuSxyu5HyZ4YYbIiu.png","2026-09-16T08:00:00.000Z","type-safe-server-routes","This article discusses how Nuxt provides type safety for server routes, allowing for end-to-end types from server\u002Fapi to components. It highlights the benefits of using useFetch and $fetch with automatically inferred response types, eliminating the need for manual interfaces.","Type-Safe Server Routes","2026-09-22T05:19:19.297Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Ftype-safe-server-routes?friend=MOKKAPPS","5663298787222fe1af014d758da8cd17d327180dbf9a78efee7ee8c20180de82",[70,73,76],{"color":23,"id":71,"name":72,"slug":72},"019d6bd8-fad3-70a9-a74d-ab96e3a2f45d","nuxt",{"color":23,"id":74,"name":75,"slug":75},"019d6bd9-0049-72ba-8cfa-139b1c1b249d","typescript",{"color":23,"id":77,"name":78,"slug":78},"019d6bd8-fb46-77ef-a3b6-bd2d30ab8919","api",{"content":80,"createdAt":81,"id":82,"image":83,"isAffiliate":37,"isPublished":10,"publishedAt":84,"slug":85,"sourceId":86,"sourceName":87,"sourceType":42,"summary":88,"title":89,"updatedAt":90,"url":91,"urlHash":92,"tags":93},"[[toc]] Over the years, I have built quite a few DevTools: {UnoCSS Inspector}, {Vite Plugin Inspect}, {Vitest UI}, {Nuxt DevTools}, {ESLint Config Inspector}, and {Node Modules Inspector}, among others. They look quite different, but fundamentally they all try to do the same thing: make implicit state visible. Instead of guessing why a CSS utility was generated, how a module was transformed, or which configuration applies to a file, we can see the process directly and interact with it. Despite their different purposes, these tools share a surprising amount of infrastructure: client-server communication, state synchronization, serialization, static asset hosting, and a web interface. Each one also needs to decide how it is packaged, distributed, mounted to a server, and connected to its host. In practice, every tool ends up rebuilding many of the same pieces in isolation. The same pattern appears across the ecosystem. Frameworks and build tools are building their own DevTools, often with overlapping capabilities such as data inspectors, asset viewers, build analyzers, terminals, and editor integrations. Yet most of them are tied to a specific framework and to the details of its development server: how it serves assets, handles requests, and upgrades connections. As a result, similar features are rebuilt and improved separately. What if we could free DevTools from those boundaries? If each capability were reusable and modular, it could benefit every supported host. Instead of spreading the work across several versions of the same idea, communities could join forces on one tool and make it much better together. This is the vision of a Universal DevTools Ecosystem I started sharing back in 2023, in Now, and the Future of Nuxt DevTools and Anthony's Roads to Open Source - The Set Theory: The diagram was aspirational. The direction felt right, but finding the boundary that could make it work was much harder. The idea stayed with me as the work moved from Nuxt DevTools to Vite DevTools. When I joined Vercel and started working on Vite DevTools, I finally had the opportunity to explore it on a broader scale. Vite gave us a concrete home to prove the experience, but the goal was always to open it to other build toolchains. Each iteration taught us something new, while LLMs made it much faster to explore and validate the design. Gradually, the right boundary started to emerge. Today, the vision is finally becoming something not far away. Let me introduce you to Devframe. Devframe Devframe is a framework-neutral foundation for defining a DevTool once, then bringing it to different hosts, standalone surfaces, and agents. You can think of Devframe as a framework for building DevTools, in the same way Nuxt or Next.js provides a framework for building web applications. At the integration layer, it plays a role similar to unplugin: while unplugin gives plugins a common interface across bundlers, Devframe gives DevTools a common definition across hosts. A Devframe definition describes one tool: its capabilities, RPC functions, shared state, web interface, diagnostics, and agent-facing surface. From that definition, Devframe creates a Web Standard request handler that can be mounted almost anywhere. One Definition, One Standard Handler, Many Adapters Every Devframe starts with defineDevframe(). At its core, it associates a tool's identity with the capabilities it provides: \u002F\u002F my-tool.ts import { defineDevframe } from 'devframe' import { inspectProject } from '.\u002Frpc' export default defineDevframe({ id: 'my-tool', name: 'My Tool', \u002F\u002F Package metadata and client entry omitted... setup(ctx) { ctx.scope('my-tool').rpc.register(inspectProject) }, }) The definition is independent of its presentation. initDevframe() turns it into a live instance: \u002F\u002F server.ts import { initDevframe } from 'devframe\u002Finitiate' import myDevframe from '.\u002Fmy-tool' const myTool = initDevframe(myDevframe, { base: '\u002F__my-tool\u002F', }) myTool.handler \u002F\u002F Web Standard Request -> Response handler \u002F\u002F (request: Request) => Promise<Response) myTool.nodeMiddleware \u002F\u002F Traditional connect-style middleware \u002F\u002F (req: IncomingMessage, res: ServerResponse, next: () => void) => void The handler becomes the tool's boundary. Behind it, Devframe serves the web interface, connection metadata, live RPC, authentication, and optional MCP endpoint under one namespace. The tool is no longer tied to a particular development server API; all the host needs to understand is the Web Standard Request and Response. This handler-first model is greatly inspired by Comark Content. Modern frameworks, runtimes, and build tools already converge around this boundary. Hono and Nitro work with Web Standard requests directly. Next.js and SvelteKit expose route handlers. Vite and Rsbuild accept Connect-style middleware, for which the same instance provides nodeMiddleware: That is almost the entire portability trick. Any framework or build tool that supports Web Standard handlers or Connect-style middleware can mount the same Devframe and gain access to the same ecosystem. Adapters as Conveniences The handler is the smallest common denominator. For common entry points, higher-level adapters package it into familiar forms. The same definition can become a standalone CLI, a dedicated dev server, a Vite DevTools plugin, an MCP server, or a static report: import { createPluginFromDevframe } from '@vitejs\u002Fdevtools-kit\u002Fnode' import { createBuild } from 'devframe\u002Fadapters\u002Fbuild' import { createCac } from 'devframe\u002Fadapters\u002Fcac' import { createDevServer } from 'devframe\u002Fadapters\u002Fdev' import { createMcpServer } from 'devframe\u002Fadapters\u002Fmcp' import myDevframe from '.\u002Fmy-tool' \u002F\u002F Pick the entry points your package needs: export const runCli = () => createCac(myDevframe).parse() export const startServer = () => createDevServer(myDevframe) export const vitePlugin = createPluginFromDevframe(myDevframe) export const startMcp = () => createMcpServer(myDevframe, { transport: 'stdio' }) export const buildReport = () => createBuild(myDevframe, { outDir: 'dist-static' }) A package can ship several of these entry points at once. For example, a build inspector could offer a standalone CLI for any project, generate static reports in CI, appear as a dock inside Vite DevTools, and let an agent query the active build—all backed by the same definition. We are already using this model in {Node Modules Inspector}, {ESLint Config Inspector}, and {Vite Plugin Inspect}. They remain focused tools with their own interfaces, while sharing Devframe underneath. You can find more examples on the Built with Devframe page. The frontend is up to each tool as well. Devframe handles the protocol and runtime, while the tool can choose whichever UI framework and design system suits it. To dogfood that promise, the built-in plugins span Vue, Svelte, Solid, React, and Next.js. Visual and Agentic As agents become part of our development workflows, a DevTool no longer has to be only a panel for humans. Our goal is for it to also offer a structured interface to its internal state and capabilities—something agents and other tools can access programmatically. The two interfaces play to different strengths rather than replacing each other. Visualizations are effective for exploration, overview, and comparison. Agents can retrieve focused context, correlate it with the codebase, and carry out multi-step actions. The presentation changes, but the source of truth stays the same. In Devframe, RPC functions stay private by default and must be explicitly exposed to agents. The MCP adapter translates those functions, readable resources, and selected shared state into an agent-consumable surface. Descriptions, schemas, and safety metadata help agents understand when and how each capability should be used. There is another interesting piece here. Devframe integrates with Vercel's json-render, allowing a UI to be described as serializable data from a constrained component catalog. This makes it easier for agents to generate dashboards and interactive tools while keeping the output predictable. The same mechanism also enables server-provided UI: a Devframe publishes the view and its state, while the host provides the renderer. With the prebuilt reference UI, a tool can get started without authoring or building a custom client at all. The protocol remains renderer-agnostic, so each host can render the same view with its own framework, components, and design system. We are still exploring the APIs and practices around discoverability, permissions, context usage, and the relationship between visual and agentic workflows. We would love to hear ideas and advice from the community as these patterns evolve through real integrations. Built-in Plugins Of course, an abstraction only becomes convincing when real tools can live on it. To test Devframe's capabilities and framework-agnostic design, we ship a few official plugins as reusable working examples. They are intentionally built with different frontend frameworks, and each can run standalone or be mounted into a supported host. Here are a few examples: Data Inspector @devframes\u002Fplugin-data-inspector is built with Vue and provides an interactive workbench for live server-side objects. A tool can register an object as a data source, then explore and query it with Jora inside the process that owns it. Standalone, it can inspect JSON or JSONL files, build a self-contained report, or attach to a running Node.js process. This is useful for inspecting stores, caches, framework contexts, build metadata, or other states that would otherwise require custom logging. You can try it standalone with: pnpx @devframes\u002Fplugin-data-inspector Data Inspector exploring a live data source When integrated, other tools only need to contribute data sources. A Vite plugin could expose its plugin container, a framework could expose runtime state, and a test runner could expose its test graph. All of them can reuse the same query workbench and data viewer instead of building another inspector for every host. Terminals @devframes\u002Fplugin-terminals is built with Svelte and provides a browser-based terminal panel supporting read-only process output and interactive PTY sessions. This separates the process-running capability from the tool that renders it. A host can give multiple tools a consistent place for subprocess output and interactive commands, without mixing every task into the user's main terminal. Terminals plugin running in Vite DevTools It can also run standalone: pnpx @devframes\u002Fplugin-terminals Terminals plugin running as a standalone page This opens the interactive terminal directly in your browser. You can use it to manage processes, run commands, or even run agents like Claude Code without leaving the browser. Accessibility Inspector @devframes\u002Fplugin-a11y is built with Solid. It scans the host application with axe-core, lists WCAG violations, and highlights the corresponding elements on the page. It can also turn the findings into fix prompts for agents, connecting visual inspection with an agentic workflow. Standalone, its panel and injected scanner can inspect any page. Inside a DevTools host, the same findings can also be mirrored into the shared message feed. It is heavily inspired by @nuxt\u002Fa11y, which brought real-time accessibility feedback into Nuxt DevTools. Extracting the idea into a Devframe plugin makes the same capability available beyond Nuxt. Accessibility Inspector highlighting violations in the host application More Plugins Other official plugins cover a VS Code editor on the web, asset management, a Git panel, Open Graph previews, and Devframe's own RPC and state inspector. What they share is the Devframe definition and protocol, not a frontend stack. These plugins are not meant to be a complete set of tools. They show what Devframe can support and offer starting points for communities to build their own. I believe many more interesting DevTools will emerge over time. You can follow the growing list on Built with Devframe. From One Devframe to a DevTools Host So far, we have one portable DevTool. But once several Devframes are active together, another problem appears: discovery. How do users find and move between them? Many DevTools log their own URL to the console: \u001b[2m~\u001b[0m \u001b[34mpnpm dev\u001b[0m \u001b[1;36mVITE\u001b[0m \u001b[2mv8.2.1\u001b[0m \u001b[32mready in\u001b[0m \u001b[2m32 ms\u001b[0m \u001b[32m➜\u001b[0m \u001b[1mLocal:\u001b[0m \u001b[1;4;36mhttp:\u002F\u002Flocalhost:3333\u002F\u001b[0m \u001b[1;35mUnoCSS Inspector:\u001b[0m \u001b[3;32mhttp:\u002F\u002Flocalhost:3333\u002F__unocss\u002F\u001b[0m \u001b[2m>\u001b[0m \u001b[33mVisualized ESLint Config:\u001b[0m \u001b[4;34mhttp:\u002F\u002F127.0.0.1:3333\u002F.eslint-config\u002F\u001b[0m \u001b[32m➜\u001b[0m \u001b[1mVite Inspect:\u001b[0m \u001b[1;3;36mhttp:\u002F\u002Flocalhost:3333\u002F__inspect\u002F\u001b[0m Sometimes DevTools also inject floating buttons into the host application: Floating buttons from multiple DevTools injected into the host application.(this is a made-up example to demonstrate the problem) As more tools join the project, the console becomes a directory of URLs and the page gains a collection of unrelated floating buttons. While that each DevTool also has to build and maintain its own discovery mechanism. To improve this, Devframe also provides a composition layer: the Hub. @devframes\u002Fhub is headless and framework-neutral. Multiple Devframes can register with it and contribute docks, commands, messages, terminals, and shared state. To users, they appear through one consistent entry point. To the tools, the Hub provides a shared context in which they can discover and collaborate with one another. The same mounting model scales from one Devframe to the whole collection. initHub() puts the Hub and all of its Devframes behind one Web Standard handler: import { initHub } from '@devframes\u002Fhub\u002Finitiate' import { createTerminalsDevframe } from '@devframes\u002Fplugin-terminals' import { createXxxDevframe } from '...' const hub = initHub({ \u002F\u002F The common base path for all mounted Devframes. \u002F\u002F `\u002F__my-tool\u002F` becomes `\u002F__devframes\u002F__my-tool\u002F`. base: '\u002F__devframes\u002F', \u002F\u002F Devframes become composable plugins of the Hub. devframes: [ createTerminalsDevframe(), createXxxDevframe(), \u002F\u002F ... ], \u002F\u002F We ship a reference UI to make it easy to get started, \u002F\u002F but you can provide your own layer to match \u002F\u002F your product's design system and interaction model. ui: await import('@devframes\u002Fhub-ui').then(m => m.createUi()), }) \u002F\u002F The same handler\u002Fmiddleware API as a standalone Devframe. hub.handler hub.nodeMiddleware With the Hub, DevTools can register themselves under one consistent entry.(this is a made-up example for demonstration) Mounted Devframes share one RPC registry, state store, connection, authentication gate, and optional aggregate MCP endpoint. The Hub itself remains headless: @devframes\u002Fhub-ui provides the reference interface, while a product can bring its own UI without changing the underlying tools. Like a single Devframe, with the standard handler, the Hub can also be mounted to almost any framework. The repository includes working reference hosts for Vite, Next.js, Hono, Nitro, and Rsbuild. Each host only connects the same handler and UI entry to its native server API. While the examples are minimal to demonstrate the possibilities, a more complete host that matches the product's design system and interaction model can also be shipped on top of the Hub's foundation. Vite DevTools Vite DevTools is the first flagship host built on this foundation. It brings a Vite-focused interface and its own integrations while using initHub() for composition and serving. Alongside Vite and Rolldown analysis, Vitest UI, and Oxc tooling, it gives independent DevTools a common place to work together. Vite Plus dock entry in Vite DevTools Rolldown DevTools in Vite DevTools A Devframe can join Vite DevTools through an adapter. A regular Vite plugin can also contribute directly through the new devtools.setup entry: \u002F\u002F vite.config.ts import { createPluginFromDevframe } from '@vitejs\u002Fdevtools-kit\u002Fnode' import { createMyDevframe } from 'my-devframe-tool' import { defineConfig } from 'vite' const myDevframe = createMyDevframe() export default defineConfig({ devtools: true, plugins: [ \u002F\u002F Helper to turn a Devframe into a Vite plugin. createPluginFromDevframe(myDevframe), \u002F\u002F A regular Vite plugin can also contribute directly. { name: 'vite-plugin-my-tool', devtools: { setup(ctx) { \u002F\u002F Devframe context with Vite-specific augmentations. }, }, }, ], }) The adapter turns an existing Devframe into a Vite plugin. The devtools.setup entry lets Vite plugins use the same context without creating another integration layer. This makes adoption incremental: tools can start where they are and still participate in the shared ecosystem. Nuxt DevTools The new Nuxt DevTools v4 builds on top of both. It inherits Vite DevTools and Vue DevTools, then adds Nuxt-specific knowledge: pages, modules, auto-imports, server APIs, runtime state, and contributions from the Nuxt module ecosystem. Nuxt DevTools v4 Here are the stacking layers to demonstrate this better: Vue DevTools is migrating to the Vite DevTools foundation. Vue capabilities such as component and reactivity inspection can then coexist with Vite integrations and general Devframes in the same host. In a way, the story has come full circle: the wish that started with Nuxt DevTools now returns with a concrete foundation underneath. Nuxt DevTools v4 is expected to ship with Nuxt v5 and will also be available as a manual opt-in for Nuxt 4. Next.js DevTools (Prototype) I am also experimenting with bringing Devframes to Next.js DevTools. Internally, I already have a working prototype of the Devframes Hub running inside Next.js DevTools, without any modifications to the installed Devframe plugins. Next.js DevTools with Devframes prototype(this is an internal prototype, it's not yet available and does not represent the final state) Inheriting the Ecosystem Sharing the foundation does not mean every DevTools experience should look the same. Framework-specific layers can be much richer because they understand their framework's conventions and runtime. The infrastructure can be shared while the final experience remains specific. Devframe itself remains independent of Vite and any framework. A future framework-specific DevTools host can mount the same Hub and plugins, then add its own knowledge and presentation. It will not get the full experience for free, but it no longer needs to rebuild the foundation before it can begin. Build Your Own DevTools Devframe is not only for framework authors or established tooling teams. It can also provide the skeleton for project-specific DevTools and even one-off visualizations. With built-in agent skills and a growing collection of real-world examples, we are exploring a future where you might ask an agent: "Build me a one-off Devframe to visualize my app's network request flow and highlight the bottlenecks." Not every useful DevTool needs to become a permanent product or a published package. Some might exist only long enough to answer one question. We will keep improving Devframe and its ecosystem so these pluggable, extensible, and playful tools become practical for more people to build. What's Next Devframe v1.0 stabilizes the interface for the community to build on and experiment with. Vite DevTools will follow with a stable release, while Nuxt DevTools v4 and the Vue DevTools migration continue testing the model at the framework level. This is the first credible implementation toward the modular DevTools infrastructure we imagined years ago. There are more frameworks to connect, plugin conventions to refine, and agentic practices to discover. What excites me is not one particular feature or integration, but the possibility that a good tool can be built once, travel further, and become better as more communities contribute to it: shared infrastructure underneath, specific and playful experiences on top, and structured capabilities available to both humans and agents. We are still exploring the best practices, especially around agentic interfaces, permissions, and cross-tool collaboration. Any kind of contribution is welcome: integrations, experiments, design ideas, use cases, feedback, or simply trying the tools and sharing what you find. If this direction sounds interesting to you, check out the {Devframe} repository, try building something with it, leave us some feedback, or join the Discord. I am looking forward to seeing what we can build together! Thanks This vision has come a long way with the help of many people. A huge thank you to {@webfansplz}, who has put a tremendous amount of work into Vite DevTools. I also owe a lot to {@Akryum}: his work on Vue DevTools and testing framework UIs has inspired me for years, and he spent a great deal of time brainstorming and prototyping these DevTools ideas with me. {@hyfdev} helped coordinate with Rolldown and shape the APIs that made Vite DevTools possible. {@Atinux} planted the seed of Nuxt DevTools, invested so much in building it, and now continues that investment in Vite DevTools. {@danielroe} provided valuable feedback on Nuxt DevTools and kept motivating us to push further on bundle size (the installed size of Vite DevTools core dropped by 30 MB from v0.1 to v0.5). {@posva} provided great feedback on Devframe's documentation and helped with the integrations. Thanks also to {@yuyinws} for donating Oxc Inspector to Vite Plus DevTools and continuing to maintain it; and to {@SaKaNa-Y} and {@dvcolomban} for being early adopters and contributing extensively to both Vite DevTools and Devframe. And, of course, thanks to everyone who has contributed to Vite DevTools, Nuxt DevTools, and Vue DevTools along the way. This work is built on top of all those contributions. Finally, thanks to {Vercel} for supporting these projects and making our ambitious plan for unified DevTools no longer feel like an unreachable dream.","2026-09-16T08:00:11.451Z","01a0a93b-00ba-7019-9e06-9d29d5e473ea","https:\u002F\u002Fantfu.me\u002Fimages\u002Fdevframe\u002Fdevframe-with-title.svg","2026-09-16T00:00:00.000Z","pluggable-extensible-and-playful-devtools","ba9683a9-e13c-478d-92b6-be507359f672","Anthony Fu","The article discusses the development of a Universal DevTools Ecosystem, focusing on a new framework called Devframe that allows for the creation of reusable and modular DevTools across different hosts. By defining tools once and enabling them to function across various frameworks and build tools, Devframe aims to streamline the development process and enhance collaboration within the ecosystem. This initiative is positioned as a significant step towards improving the usability and interoperability of development tools.","Pluggable, Extensible, and Playful DevTools","2026-09-22T05:19:19.231Z","https:\u002F\u002Fantfu.me\u002Fposts\u002Fpluggable-extensible-playful-devtools","11086f83a3f4af83b146556dcd75b5c7f02c4f4824d545a4626ccbf744b3b673",[94,97,100,101,104],{"color":23,"id":95,"name":96,"slug":96},"019f1264-9f44-762d-b5fd-837839fdc586","devtools",{"color":23,"id":98,"name":99,"slug":99},"019d9cf0-c9f8-7411-beed-02265d8271db","vite",{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":102,"name":103,"slug":103},"01a0c78d-e1df-73b9-89a4-9c8f68fc12f7","universal-devtools",{"color":23,"id":105,"name":106,"slug":106},"01a0c78d-e228-7034-84fa-fa5a6546199f","modular",{"content":108,"createdAt":109,"id":110,"image":111,"isAffiliate":10,"isPublished":10,"publishedAt":112,"slug":113,"sourceId":13,"sourceName":14,"sourceType":15,"summary":114,"title":115,"updatedAt":116,"url":117,"urlHash":118,"tags":119},"How Vue sharpened TypeScript support for defineProps, defineEmits, defineModel, and defineSlots, and how to write clearer component contracts.","2026-08-26T16:00:11.577Z","01a03ecc-e938-75ff-8fc8-3608e32ffcfc","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002Fs7KUURUptNxUw5TxrJnxCwhjqrLuOLEXYH9c8Hej.png","2026-08-26T08:00:00.000Z","tighter-typescript-in-script-setup","The article discusses improvements in TypeScript support within Vue's \u003Cscript setup> syntax, focusing on the usage of defineProps, defineEmits, defineModel, and defineSlots. It emphasizes how these enhancements help in creating clearer component contracts for developers.","Tighter TypeScript in \u003Cscript setup>","2026-08-26T16:00:32.284Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Ftighter-typescript-in-script-setup?friend=MOKKAPPS","7de9b823ba6050685ab24e0e942c43e3a9d97593796ad335e17028f202bbf48c",[120,121,122],{"color":23,"id":27,"name":28,"slug":28},{"color":23,"id":74,"name":75,"slug":75},{"color":23,"id":24,"name":25,"slug":25},{"content":124,"createdAt":125,"id":126,"image":127,"isAffiliate":37,"isPublished":10,"publishedAt":128,"slug":129,"sourceId":130,"sourceName":131,"sourceType":132,"summary":133,"title":134,"updatedAt":135,"url":136,"urlHash":137,"tags":138},"Build an AI Lo-Fi Radio Station (Nuxt 4, AWS Bedrock, OpenRouter) Lofi Girl streams 24\u002F7 — so I built a version where the AI ...","2026-08-25T16:00:00.397Z","01a039a6-618b-759b-9cbe-eea7cfa5cfa3","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F6tEVRqptHmg\u002Fhqdefault.jpg","2026-08-25T12:00:36.000Z","i-built-a-better-lo-fi-radio-station","019ff4d6-88fc-7468-aafb-1606806ce245","Program With Erik","youtube","This article discusses the creation of an AI-powered Lo-Fi radio station using Nuxt 4, AWS Bedrock, and OpenRouter, inspired by the popular Lofi Girl streams. It highlights the integration of these technologies to deliver a continuous music experience.","I Built a Better Lo-Fi Radio Station","2026-08-25T16:00:34.260Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=6tEVRqptHmg","eb3d91adb08374efba26cdad38a69a9bfb70f9d4b1a6a67c254664f036343220",[139,140,143],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":141,"name":142,"slug":142},"01a039a6-e607-7008-b66a-e18162930aa9","aws",{"color":23,"id":144,"name":145,"slug":145},"019d9d20-e07b-7685-9ebb-fae0b963f243","ai",{"content":147,"createdAt":148,"id":149,"image":150,"isAffiliate":37,"isPublished":10,"publishedAt":151,"slug":152,"sourceId":130,"sourceName":131,"sourceType":132,"summary":153,"title":154,"updatedAt":155,"url":156,"urlHash":157,"tags":158},"Give an AI agent a tool that deletes files and it will delete files. AI SDK 7 adds tool approval, so the run pauses and asks you first.","2026-08-18T16:00:00.362Z","01a01599-dd69-7024-a286-178e6d009c2f","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FRktwtjobGI4\u002Fhqdefault.jpg","2026-08-18T12:00:34.000Z","oops-i-gave-nuxt-permissions-to-delete-files","The article discusses a significant oversight regarding the permissions granted to Nuxt, specifically in the context of an AI agent's ability to delete files. It highlights the introduction of tool approval in AI SDK 7, which pauses the execution to seek permission before performing such actions.","Oops! I gave Nuxt permissions to delete files","2026-08-18T16:00:40.468Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=RktwtjobGI4","c693614f6488e3849f86a32c9abe915b513d033679810fcd2c59bbe8fee577a3",[159,160],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":161,"name":162,"slug":162},"019dcdf3-fc84-73aa-a0be-6b7196c5a2e9","security",{"content":164,"createdAt":165,"id":166,"image":167,"isAffiliate":37,"isPublished":10,"publishedAt":168,"slug":169,"sourceId":40,"sourceName":41,"sourceType":42,"summary":170,"title":171,"updatedAt":172,"url":173,"urlHash":174,"tags":175},"Supabase has become one of the most popular choices for building modern web applications. It gives you: PostgreSQL database Authentication Realtime subscriptions Storage Edge Functions TypeScript support The official Supabase JavaScript client already makes it relatively easy to use these features from a Vue application. But integrating Supabase into a Vue application usually means creating a client and then making it available throughout your application. This is where the new @supabase-community\u002Fvue-supabase package comes in. The package provides a Vue-friendly integration for Supabase, allowing you to access your Supabase client through useSupabaseClient() while keeping the familiar Supabase API. You can check out the package on GitHub here: https:\u002F\u002Fgithub.com\u002Fsupabase-community\u002Fvue-supabase In this article, we'll explore: What @supabase-community\u002Fvue-supabase is How to install and configure it How to query your database How to use TypeScript with it How to handle authentication How to use Supabase Realtime How to structure Supabase logic using Vue composables What security considerations you need to remember Let's dive in. 🤔 What Is @supabase-community\u002Fvue-supabase? @supabase-community\u002Fvue-supabase is a Vue integration for Supabase that provides a convenient way to access the Supabase client inside your Vue application. The main API you'll use is: import { useSupabaseClient } from '@supabase-community\u002Fvue-supabase' const supabase = useSupabaseClient() Once you have the client, you can use the standard Supabase API: const { data, error } = await supabase .from('profiles') .select('*') This is important because the package doesn't introduce a completely new way of working with Supabase. You still use the APIs you're familiar with: supabase.from() supabase.auth supabase.channel() supabase.storage The package mainly provides the Vue integration layer around them. 🟢 Installing and Configuring the Package The package can be installed with: npm install @supabase-community\u002Fvue-supabase You can then configure your Supabase client using your project URL and key. For example: VITE_SUPABASE_URL=https:\u002F\u002Fyour-project.supabase.co VITE_SUPABASE_ANON_KEY=your-publishable-key And then: import { useSupabaseClient } from '@supabase-community\u002Fvue-supabase' const supabase = useSupabaseClient({ supabaseUrl: import.meta.env.VITE_SUPABASE_URL, supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY, }) The important part is that you don't need to install or configure a separate Supabase Vue SDK. The package provides the integration you need. 🟢 Querying Your Database Let's say you have a profiles table: profiles ├── id ├── name └── email You can query it directly from a Vue component: <script setup lang=\"ts\"> import { useSupabaseClient } from '@supabase-community\u002Fvue-supabase' const supabase = useSupabaseClient() const { data, error } = await supabase .from('profiles') .select('*') <\u002Fscript> <template> <ul> <li v-for=\"profile in data\" :key=\"profile.id\" > {{ profile.name }} <\u002Fli> <\u002Ful> <\u002Ftemplate> The nice thing is that once you have the client, you're using the standard Supabase query API. You can filter, sort, insert, update, and delete data exactly as you normally would with Supabase. For example: const { data, error } = await supabase .from('profiles') .select('id, name') .eq('active', true) .order('name') This makes the package easy to adopt even if you're already familiar with Supabase. 🟢 TypeScript Support TypeScript becomes especially important when your Supabase project grows. Supabase can generate TypeScript definitions directly from your database schema. For example: npx supabase gen types typescript \\ --project-id <project-id> \\ --schema public \\ > src\u002Ftypes\u002Fsupabase.ts You can then use your generated Database type with the Supabase client: import { useSupabaseClient } from '@supabase-community\u002Fvue-supabase' import type { Database } from '.\u002Ftypes\u002Fsupabase' const supabase = useSupabaseClient<Database>() Now TypeScript knows about your database structure. For example: const { data } = await supabase .from('profiles') .select('id, name') The returned data can now be typed according to your actual database schema. This is particularly useful because it moves your database schema closer to your application's type system. Instead of manually maintaining interfaces such as: interface Profile { id: string name: string } you can generate them from the actual database. 🟢 Authentication Supabase Authentication is available through the same client. For example, you can sign in a user with email and password: const supabase = useSupabaseClient() const { data, error } = await supabase.auth .signInWithPassword({ email: 'user@example.com', password: 'password', }) You can also create a new account: const { data, error } = await supabase.auth .signUp({ email: 'user@example.com', password: 'password', }) And signing out is just as simple: await supabase.auth.signOut() You can access the currently authenticated user with: const { data: { user }, } = await supabase.auth.getUser() The important thing here is that the Vue integration doesn't force you to learn a completely different authentication API. You're still working with: supabase.auth just like with the regular Supabase client. 🟢 Listening to Authentication Changes Supabase also provides an API for reacting to authentication changes. For example: const { data } = supabase.auth.onAuthStateChange( (event, session) => { console.log(event) console.log(session) } ) This can be useful for things like: updating navigation showing authenticated UI handling logout reacting to session changes In a larger application, this logic can be extracted into a composable or a dedicated authentication store. 🟢 Realtime Subscriptions One of the most interesting Supabase features is Realtime. Imagine you want your Vue application to react whenever a record in the profiles table changes. You can create a channel: const supabase = useSupabaseClient() const channel = supabase .channel('profiles-updates') .on( 'postgres_changes', { event: '*', schema: 'public', table: 'profiles', }, (payload) => { console.log('Change received:', payload) }, ) .subscribe() Now your application can react to: inserts updates deletes without manually polling the database. This is useful for applications such as: dashboards chat applications collaborative tools notifications live admin panels 🟢 Cleaning Up Realtime Subscriptions There's one important thing to remember when using Realtime inside Vue components. If you create a subscription when a component is mounted, you should also clean it up when the component is destroyed. For example: import { onUnmounted } from 'vue' onUnmounted(() => { supabase.removeChannel(channel) }) Without proper cleanup, you can accidentally create multiple active subscriptions when navigating between components. You might end up with: Component mounted ↓ Subscription created Component unmounted ↓ Subscription still exists Component mounted again ↓ Another subscription created Eventually, the same event might be handled multiple times. Always think about the lifecycle of your Realtime subscriptions. 🟢 Supabase Storage The same client can also be used for Supabase Storage. For example, uploading an image: const { data, error } = await supabase .storage .from('avatars') .upload('user-avatar.png', file) And you can retrieve a public URL: const { data } = supabase .storage .from('avatars') .getPublicUrl('user-avatar.png') This makes it possible to use Supabase as the backend for applications that need: profile pictures document uploads media files user-generated content without introducing another storage provider. 🟢 Don't Forget Row Level Security One thing that doesn't change when using this Vue integration is security. Your Vue application runs in the browser. That means anything included in your client-side application should be considered publicly accessible. You should never expose a Supabase service_role key in your Vue application. Instead, use the appropriate client-side key and protect your database using Row Level Security (RLS). For example: alter table profiles enable row level security; Then you can create policies that define exactly what users are allowed to access. For example: create policy \"Users can read profiles\" on profiles for select to authenticated using (true); The exact policy should depend on your application's requirements. The important concept is: 👉 The frontend is not a security boundary. Don't rely on Vue code to decide whether someone is allowed to access data. The database should enforce those rules. 🧪 Best Practices Generate TypeScript types from your Supabase database schema Always use Row Level Security to protect database access Never expose a service_role key in client-side code Clean up Realtime subscriptions when components are unmounted Keep database logic out of your Vue components Use the existing Supabase API instead of creating unnecessary abstractions Keep authentication and data-access logic reusable through composables Treat client-side environment variables as public 📖 Learn more If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below: It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉 🧪 Advance skills A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success. Check out Certificates.dev by clicking this link or by clicking the image below: Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more! ✅ Summary The new @supabase-community\u002Fvue-supabase package provides a simple way to integrate Supabase into Vue applications while keeping the familiar Supabase client API. The biggest advantage of the package is that it doesn't try to reinvent Supabase. Instead, it gives Vue developers a clean integration around the existing Supabase client and makes accessing it from components and composables straightforward. If you're building a new Vue 3 application with Supabase, @supabase-community\u002Fvue-supabase is definitely worth checking out. Take care! And happy coding as always 🖥️","2026-08-17T08:00:14.578Z","01a00ebc-44f1-776f-8054-d4b42cd640bc","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Feu8k3ozsxls4iahd2u4v.png","2026-08-17T06:44:35.000Z","supabase-in-vue-made-simple","This article introduces the @supabase-community\u002Fvue-supabase package, which simplifies the integration of Supabase into Vue applications. It covers installation, configuration, and usage of Supabase features like querying databases and handling authentication, all while maintaining a familiar API. The package allows developers to easily access the Supabase client within their Vue components using the useSupabaseClient() function.","Supabase in Vue Made Simple","2026-08-17T08:00:30.756Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fsupabase-in-vue-made-simple-akk","9cf3e4d63e0f132ad2867b0008bc407801172b4892c3f8b5665ad0346e1fe8ec",[176,177,180,181],{"color":23,"id":27,"name":28,"slug":28},{"color":23,"id":178,"name":179,"slug":179},"01a00ebc-8452-7392-9d46-61b28c2bbece","supabase",{"color":23,"id":74,"name":75,"slug":75},{"color":23,"id":24,"name":25,"slug":25},{"content":183,"createdAt":184,"id":185,"image":186,"isAffiliate":10,"isPublished":10,"publishedAt":187,"slug":188,"sourceId":13,"sourceName":14,"sourceType":15,"summary":189,"title":190,"updatedAt":191,"url":192,"urlHash":193,"tags":194},"How Junior Vue Developers Can Get Hired in 2026 and and what companies are looking for","2026-08-12T16:00:17.912Z","019ff6b3-f9f6-763c-bd7b-e7814fa86bbd","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FbBllR7s1oI0HclJumXxPtVfEixYOXa75YVWsWKTb.png","2026-08-12T07:00:00.000Z","building-a-vue-career-in-the-age-of-ai-coding-tools","The article discusses strategies for junior Vue developers to enhance their employability in 2026, particularly in the context of the rise of AI coding tools. It highlights the skills and attributes that companies will prioritize when hiring Vue developers in the future.","Building a Vue Career in the Age of AI Coding Tools","2026-08-12T16:00:35.524Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fbuilding-a-vue-career-in-the-age-of-ai-coding-tools?friend=MOKKAPPS","4aba6b5faac3883ae5acd39b88941f0641a3733d16f033248ce2224fc8d0a300",[195,196,199],{"color":23,"id":27,"name":28,"slug":28},{"color":23,"id":197,"name":198,"slug":198},"019ff6b4-3ee9-742d-bb54-b9ac2d37306d","career",{"color":23,"id":200,"name":201,"slug":201},"019dafe9-8a6d-7218-81f1-37052cbe9b78","development",{"content":203,"createdAt":204,"id":205,"image":206,"isAffiliate":10,"isPublished":10,"publishedAt":187,"slug":207,"sourceId":13,"sourceName":14,"sourceType":15,"summary":208,"title":209,"updatedAt":210,"url":211,"urlHash":212,"tags":213},"Nuxt 3 Hits EOL July 31, 2026: Your Staged Path to Nuxt 5 What the Nuxt 3 end-of-life date means, how to migrate through Nuxt 4, and when it makes sense to wait for Nuxt 5 instead.","2026-08-12T07:19:02.495Z","019ff4d6-c05d-74dc-91e2-cf0be1ab0e1c","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002F6fTlVznf1t8d6Wn3YL6xMiALWa0uOEUQLELUi83i.png","nuxt-3-hits-end-of-life","Nuxt 3 has officially reached its end-of-life as of July 31, 2026. The article discusses the implications of this transition, including migration strategies to Nuxt 4 and considerations for waiting for Nuxt 5.","Nuxt 3 hits End Of Life","2026-08-12T07:19:20.540Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fnuxt-3-hits-end-of-life?friend=MOKKAPPS","2d8fe06c218fff6ef6b2df5819404e92034a2d325caa2a0848dd94b31e7241c3",[214,215,218],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":216,"name":217,"slug":217},"019ff4d7-06f9-71ae-afe1-7eaebc79cc9b","migration",{"color":23,"id":219,"name":220,"slug":220},"019d9d20-dfb9-7041-9973-39c545b33a2d","release",{"content":222,"createdAt":223,"id":224,"image":225,"isAffiliate":37,"isPublished":10,"publishedAt":226,"slug":227,"sourceId":130,"sourceName":131,"sourceType":132,"summary":228,"title":229,"updatedAt":230,"url":231,"urlHash":232,"tags":233},"Nuxt 4.5 introduces experimental SSR streaming, allowing the browser to receive useful HTML before slower server-rendered ...","2026-08-12T07:18:53.631Z","019ff4d6-9dbc-746b-a9b6-69f7036a13a9","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FBty-hzN8l84\u002Fhqdefault.jpg","2026-08-11T12:00:24.000Z","nuxt-45-ssr-streaming-is-kind-of-a-big-deal","Nuxt 4.5 introduces experimental SSR streaming, enhancing performance by allowing browsers to receive HTML content before the entire server-rendered page is ready. This feature aims to improve user experience by reducing perceived load times.","Nuxt 4.5 SSR Streaming Is Kind of a Big Deal","2026-08-12T07:19:20.416Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Bty-hzN8l84","e89ab91fcfcbe4a41ce2ca149d97a3b57be02fd6618a8d06968709bd56dc0e6f",[234,235,238],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":236,"name":237,"slug":237},"019d6bd8-ca89-735e-a52a-ee53a80a77a9","ssr",{"color":23,"id":239,"name":240,"slug":240},"019d6bd8-ca26-775c-b9b5-c3439dbe5789","performance",{"content":242,"createdAt":243,"id":244,"image":245,"isAffiliate":37,"isPublished":10,"publishedAt":246,"slug":247,"sourceId":40,"sourceName":41,"sourceType":42,"summary":248,"title":249,"updatedAt":250,"url":251,"urlHash":252,"tags":253},"When building Vue applications, we often switch between different components like tabs, multi-step forms, dynamic components, or event different views inside the same page. By default, when Vue removes a component from the DOM, its component instance is also unmounted. When you render it again, Vue creates a completely new instance. This means that things like local state, form input, or component state can be lost. This is where <KeepAlive> becomes incredibly useful. Vue's KeepAlive component allows you to cache inactive component instances instead of destroying them. In this article, we'll explore: What KeepAlive is What problem it solves How to use it with dynamic components How to control which components are cached How onActivated and onDeactivated work Common mistakes and best practices Let's dive in. 🤔 What Is Vue KeepAlive? <KeepAlive> is a built-in Vue component that allows you to cache component instances when they are switched out. Consider a simple dynamic component: <script setup lang=\"ts\"> import { ref } from 'vue' import Profile from '.\u002FProfile.vue' import Settings from '.\u002FSettings.vue' const currentComponent = ref(Profile) <\u002Fscript> <template> <button @click=\"currentComponent = Profile\"> Profile <\u002Fbutton> <button @click=\"currentComponent = Settings\"> Settings <\u002Fbutton> <component :is=\"currentComponent\" \u002F> <\u002Ftemplate> When you switch from Profile to Settings, the Profile component is unmounted. When you switch back, Vue creates a new Profile instance. Now let's add KeepAlive: <KeepAlive> <component :is=\"currentComponent\" \u002F> <\u002FKeepAlive> Now Vue keeps the inactive component instance alive. Instead of: Profile ↓ Unmount ↓ Destroy state you get: Profile ↓ Deactivated ↓ Cached ↓ Activated again The component state is preserved. 🟢 What Problem Does KeepAlive Solve? Imagine you have a tabbed interface. Profile | Settings | Billing Inside the Profile tab, the user fills out a form: Name: John Email: john@example.com Then they switch to Settings. Without KeepAlive, the Profile component can be unmounted. When they return: Name: Email: The form has been reset. That's a terrible user experience. With KeepAlive: Profile ↓ User enters data ↓ Switch to Settings ↓ Profile is cached ↓ Return to Profile ↓ Form state is preserved This is one of the most common use cases for KeepAlive. 🟢 Using KeepAlive with Dynamic Components The most common pattern is wrapping a dynamic component. <KeepAlive> <component :is=\"currentComponent\" \u002F> <\u002FKeepAlive> For example: <script setup lang=\"ts\"> import { ref } from 'vue' import Dashboard from '.\u002FDashboard.vue' import Analytics from '.\u002FAnalytics.vue' const currentComponent = ref(Dashboard) <\u002Fscript> <template> <nav> <button @click=\"currentComponent = Dashboard\"> Dashboard <\u002Fbutton> <button @click=\"currentComponent = Analytics\"> Analytics <\u002Fbutton> <\u002Fnav> <KeepAlive> <component :is=\"currentComponent\" \u002F> <\u002FKeepAlive> <\u002Ftemplate> Now both components can preserve their internal state when switching between them. This works especially well for: tabs dashboards editors multi-step forms complex filters 🟢 KeepAlive and Lifecycle Hooks When using KeepAlive, the normal lifecycle changes slightly. A cached component is not unmounted when it becomes inactive. Instead, Vue provides two special lifecycle hooks: onActivated() and: onDeactivated() For example: <script setup lang=\"ts\"> import { onActivated, onDeactivated } from 'vue' onActivated(() => { console.log('Component is active') }) onDeactivated(() => { console.log('Component is inactive') }) <\u002Fscript> This can be useful when you need to perform actions whenever the component becomes visible or hidden. For example: refresh data restart an animation pause a timer reconnect to a resource update UI state 🟢 KeepAlive vs onMounted One important thing to understand is that onMounted() doesn't run every time a cached component becomes visible. Consider: onMounted(() => { console.log('mounted') }) onActivated(() => { console.log('activated') }) The lifecycle looks roughly like this: First visit ↓ onMounted() ↓ onActivated() Switch away ↓ onDeactivated() Return ↓ onActivated() The component remains mounted while it is cached. This distinction is important when working with data fetching or subscriptions. 🟢 Controlling Which Components Are Cached You don't always want to cache everything. Vue allows you to control the cache using include and exclude. For example: <KeepAlive include=\"Profile,Settings\"> <component :is=\"currentComponent\" \u002F> <\u002FKeepAlive> Only components matching those names will be cached. You can also exclude components: <KeepAlive exclude=\"HeavyChart\"> <component :is=\"currentComponent\" \u002F> <\u002FKeepAlive> This is useful when some components are expensive to keep in memory. 🟢 Limiting the Cache with max KeepAlive also supports a max prop. <KeepAlive :max=\"5\"> <component :is=\"currentComponent\" \u002F> <\u002FKeepAlive> This limits the number of component instances kept in the cache. When the limit is reached, Vue removes the least recently used cached component. This is particularly useful for applications where users can navigate through many dynamic views. 🟢 KeepAlive Isn't Always the Right Choice Caching components sounds great, but it comes with a cost. A cached component still exists in memory. If you cache many complex components, you can increase memory usage. For example: 100 cached dashboards + large charts + large reactive state = potentially expensive memory usage That's why KeepAlive should be used intentionally. Ask yourself: 👉 \"Does preserving this component's state provide enough value to justify keeping it in memory?\" If the answer is no, regular mounting and unmounting may be better. 🧪 Best Practices Use KeepAlive when preserving component state improves UX Prefer it for tabs, editors, forms, and complex dynamic views Use include and exclude when only some components should be cached Use max when users can create many cached component instances Use onActivated for logic that should run whenever a cached component becomes active Use onDeactivated to pause timers, subscriptions, or other ongoing work Be careful when caching memory-heavy components Don't use KeepAlive everywhere just because it is available 📖 Learn more If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below: It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉 🧪 Advance skills A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success. Check out Certificates.dev by clicking this link or by clicking the image below: Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more! ✅ Summary Vue's KeepAlive is a powerful built-in component for preserving state between dynamic component switches. In this article, you learned: What KeepAlive is How it preserves component instances How to use it with dynamic components How onActivated and onDeactivated work How to control caching with include, exclude, and max When caching components can become a performance concern KeepAlive is especially useful when users expect their state to remain intact while navigating between views. Use it intentionally, cache the components that benefit from it, and avoid keeping large numbers of memory-heavy components alive unnecessarily. Take care! And happy coding as always 🖥️","2026-08-10T12:00:18.754Z","019feb8b-8b40-7367-a07a-a18a0aec7cf8","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmr11g40v33pi7rm5r4pk.png","2026-08-10T08:15:21.000Z","preserve-component-state-in-vue-with-keepalive","This article explains how to use Vue's KeepAlive component to preserve the state of components when switching between them. By caching inactive component instances, KeepAlive prevents the loss of local state, enhancing user experience in applications with dynamic components or tabbed interfaces. It also covers common use cases and best practices for implementation.","Preserve Component State in Vue with KeepAlive","2026-08-10T12:00:32.729Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fpreserve-component-state-in-vue-with-keepalive-58i1","fa97f1cb2f0a5e7bdf9efce6688764d811dbf0cc38974e82983607f1736e73af",[254,255,258,259,262],{"color":23,"id":27,"name":28,"slug":28},{"color":23,"id":256,"name":257,"slug":257},"019feb8b-c20d-7729-9542-ccf67f7ec814","keepalive",{"color":23,"id":52,"name":53,"slug":53},{"color":23,"id":260,"name":261,"slug":261},"019feb8b-c217-7520-95dc-55e7d9ee13b1","components",{"color":23,"id":55,"name":56,"slug":56},{"content":264,"createdAt":265,"id":266,"image":267,"isAffiliate":10,"isPublished":10,"publishedAt":268,"slug":269,"sourceId":13,"sourceName":14,"sourceType":15,"summary":270,"title":271,"updatedAt":272,"url":273,"urlHash":274,"tags":275},"A hands-on look at opting individual components into Vue 3.6 Vapor Mode, where it helps, and the real limitations as of mid-2026.","2026-08-05T16:00:12.724Z","019fd2a7-61b4-7288-b7ed-161201f96722","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FORt5LDqt5U4PjT0r1mxuv3cwZ3Ce4p7hRmnhHLv5.png","2026-08-05T07:00:00.000Z","vapor-mode-in-practice","This article provides a practical overview of using Vapor Mode in Vue 3.6, detailing how to opt individual components into this mode, its benefits, and the limitations encountered as of mid-2026.","Vapor Mode in Practice","2026-08-05T16:00:34.119Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fvapor-mode-in-practice?friend=MOKKAPPS","912e5d2e9a8f37925eaf993a6847408dc2c6aac563fb8da54f00c4f933dc53d2",[276,277],{"color":23,"id":27,"name":28,"slug":28},{"color":23,"id":278,"name":279,"slug":279},"019fd2a7-b570-706f-a901-258f871297d0","vapor-mode",{"content":281,"createdAt":282,"id":283,"image":284,"isAffiliate":37,"isPublished":10,"publishedAt":285,"slug":286,"sourceId":287,"sourceName":288,"sourceType":42,"summary":289,"title":290,"updatedAt":291,"url":292,"urlHash":293,"tags":294},"A beginner-friendly, practical guide to adding an MCP server to an existing Nuxt app using the Nuxt MCP Toolkit and a mocked weather tool.","2026-07-28T12:00:23.261Z","019fa898-f0cd-7411-90ba-41fc972176f5","https:\u002F\u002Fmokkapps.twic.pics\u002Fmokkapps.de\u002Fblog\u002Fhow-to-setup-an-mcp-server-for-an-existing-nuxt-app\u002Fog.png","2026-07-28T00:00:00.000Z","how-to-set-up-an-mcp-server-for-an-existing-nuxt-app","019d6bd5-57e0-742c-8de2-c0a3a1f49b60","Michael Hoffmann","This article provides a beginner-friendly guide on setting up an MCP server for an existing Nuxt application, utilizing the Nuxt MCP Toolkit along with a mocked weather tool. It aims to help developers integrate this functionality seamlessly into their projects.","How to Set Up an MCP Server for an Existing Nuxt App","2026-07-28T12:00:27.797Z","https:\u002F\u002Fmokkapps.de\u002Fblog\u002Fhow-to-setup-an-mcp-server-for-an-existing-nuxt-app","820384c811f77ee3d2398ce478a910377e50d47ab020bd62e85ae9ad2e8b4bb7",[295,296,299],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":297,"name":298,"slug":298},"019fa899-02e6-758e-bdcb-8a4a923507df","mcp",{"color":23,"id":55,"name":56,"slug":56},{"content":301,"createdAt":302,"id":303,"image":304,"isAffiliate":37,"isPublished":10,"publishedAt":305,"slug":306,"sourceId":307,"sourceName":308,"sourceType":42,"summary":309,"title":310,"updatedAt":311,"url":312,"urlHash":313,"tags":314},"Nuxt 4.5.1 and 3.21.10 are out now, fixing several security issues, alongside a critical fix in @nuxt\u002Fdevtools 3.3.1. We recommend upgrading as soon as possible.","2026-07-27T18:00:06.425Z","019fa4bb-e96b-7390-9dd8-103110495e6a","https:\u002F\u002Fnuxt.com\u002Fassets\u002Fblog\u002Fv4.5.1.png","2026-07-27T00:00:00.000Z","nuxt-security-patch-releases","019d6c1a-e19c-736e-b489-240be1c0d29a","Nuxt Blog","Nuxt has released security patches in versions 4.5.1 and 3.21.10, addressing multiple security vulnerabilities. Additionally, a critical fix has been made in @nuxt\u002Fdevtools 3.3.1, and users are advised to upgrade promptly.","Nuxt Security Patch Releases","2026-07-27T18:00:28.293Z","https:\u002F\u002Fnuxt.com\u002Fblog\u002Fv4-5-security","5318bf90e66f150f5a94e0899128c5a7f62763d5f48bbe98b941376204bd9b15",[315,316,317],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":161,"name":162,"slug":162},{"color":23,"id":219,"name":220,"slug":220},{"content":319,"createdAt":320,"id":321,"image":322,"isAffiliate":37,"isPublished":10,"publishedAt":323,"slug":324,"sourceId":325,"sourceName":326,"sourceType":132,"summary":327,"title":328,"updatedAt":329,"url":330,"urlHash":331,"tags":332},"Nuxt Course: https:\u002F\u002Fwww.learnnuxt.dev WebDevDaily: https:\u002F\u002Fwww.webdevdaily.io Invoker Commands: ...","2026-07-22T20:00:04.997Z","019f8b69-f573-7149-bd7e-acb240b6fd49","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FZWUx9bDa8PQ\u002Fhqdefault.jpg","2026-07-22T19:18:25.000Z","html-can-now-do-this-without-javascript-2","019d6c23-e4e7-7379-a6f7-80d0e5734cd1","John Komarnicki","The article discusses new capabilities of HTML that allow certain functionalities to be achieved without relying on JavaScript. It highlights the implications of these changes for web development, particularly in the context of frameworks like Nuxt.","HTML Can Now Do This Without JavaScript 🪄","2026-07-22T20:00:21.603Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=ZWUx9bDa8PQ","2f60ab992a3f33297d5c5f61b0e59e00298ccc155263595211bb0d7902fe5d25",[333,334,337],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":335,"name":336,"slug":336},"019f6313-12bf-7151-81f2-c8b43b09d979","html",{"color":23,"id":338,"name":339,"slug":339},"019df802-a8b6-74d2-a0cd-b0509cf502fa","web-development",{"content":341,"createdAt":342,"id":343,"image":344,"isAffiliate":10,"isPublished":10,"publishedAt":345,"slug":346,"sourceId":13,"sourceName":14,"sourceType":15,"summary":347,"title":348,"updatedAt":349,"url":350,"urlHash":351,"tags":352},"A look at Nuxt Studio, the open-source visual CMS for Nuxt Content, how it works with Git, and when it's the right fit.","2026-07-27T18:11:29.817Z","019fa4c6-56d1-7433-899b-d32601c8185c","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FBUjidjX4E0EM9sNbzmriQ1KTM97sSjFhuU0DkZhL.png","2026-07-22T07:00:00.000Z","nuxt-studio-and-what-it-is","This article explores Nuxt Studio, an open-source visual content management system designed for Nuxt Content. It discusses its integration with Git and provides insights on when to use it effectively.","Nuxt Studio and What It Is","2026-07-27T18:11:44.812Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fnuxt-studio-and-what-it-is?friend=MOKKAPPS","165bb6f07e8b5e3e96f9161b6d391e753d9236c9a9fb6c2e32432b1d11f81410",[353,354,357],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":355,"name":356,"slug":356},"019fa4c6-93c3-76ea-baa3-7d5fe541ac5b","cms",{"color":23,"id":358,"name":359,"slug":359},"019fa4c6-9419-7657-844e-58ec868ed664","git",{"content":361,"createdAt":362,"id":363,"image":364,"isAffiliate":37,"isPublished":10,"publishedAt":365,"slug":366,"sourceId":307,"sourceName":308,"sourceType":42,"summary":367,"title":368,"updatedAt":369,"url":370,"urlHash":371,"tags":372},"Nuxt 4.5 is our biggest release in a while. Vite 8, Rspack 2 powered by Rsbuild, experimental SSR streaming, a stable error code system, a new useLayout composable, named views, and a lot of groundwork for Nuxt 5.","2026-07-18T20:00:05.093Z","019f76d0-85d1-75ad-b055-ca88182f4c34","https:\u002F\u002Fnuxt.com\u002Fassets\u002Fblog\u002Fv4.5.png","2026-07-18T00:00:00.000Z","nuxt-45","Nuxt 4.5 marks a significant release featuring Vite 8, Rspack 2, experimental SSR streaming, and a stable error code system. The update also introduces a new useLayout composable and named views, laying the groundwork for future developments in Nuxt 5.","Nuxt 4.5","2026-07-18T20:00:18.669Z","https:\u002F\u002Fnuxt.com\u002Fblog\u002Fv4-5","ad958454b80eb5d0f0b2d26d025d8a1b3d5a2d8458568e1c6a4bbee7ca10feff",[373,374,375,376,379],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":98,"name":99,"slug":99},{"color":23,"id":236,"name":237,"slug":237},{"color":23,"id":377,"name":378,"slug":378},"019f76d0-bb29-72d6-8d0b-05ffd1d3c8ed","composables",{"color":23,"id":219,"name":220,"slug":220},{"content":381,"createdAt":382,"id":383,"image":384,"isAffiliate":10,"isPublished":10,"publishedAt":385,"slug":386,"sourceId":13,"sourceName":14,"sourceType":15,"summary":387,"title":388,"updatedAt":389,"url":390,"urlHash":391,"tags":392},"Practical techniques for faster Nuxt apps","2026-07-15T08:00:00.738Z","019f64ca-32ca-73f5-b458-bc95f1b37561","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FxXZtFg8h2YcCNVmq93AeSIBqMnZSQXZKETKI6xgm.png","2026-07-15T08:00:00.000Z","performance-optimization-in-nuxt-2","This article discusses practical techniques to optimize the performance of Nuxt applications, focusing on strategies to enhance speed and efficiency. It provides actionable insights for developers looking to improve their Nuxt app performance.","Performance Optimization in Nuxt","2026-07-15T08:00:22.182Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fperformance-optimization-in-nuxt-1?friend=MOKKAPPS","c25c56ffb5b668a73bb74fff1cecd1339bf8c9bca50b0d4c5bea7375009fc747",[393,394,395],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":239,"name":240,"slug":240},{"color":23,"id":396,"name":397,"slug":397},"019e3af5-4a35-705c-8ab1-4404b653e0e8","optimization",{"content":399,"createdAt":400,"id":401,"image":402,"isAffiliate":37,"isPublished":10,"publishedAt":403,"slug":404,"sourceId":325,"sourceName":326,"sourceType":132,"summary":405,"title":406,"updatedAt":407,"url":408,"urlHash":409,"tags":410},"Nuxt Course: https:\u002F\u002Fwww.learnnuxt.dev WebDevDaily: https:\u002F\u002Fwww.webdevdaily.io Anchor Docs: ...","2026-07-15T00:00:05.767Z","019f6312-d26e-7496-8886-eacd167b4ff9","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FH4mgjB8tejM\u002Fhqdefault.jpg","2026-07-14T14:16:31.000Z","html-can-now-do-this-without-javascript","The article discusses recent advancements in HTML that allow for certain functionalities to be achieved without relying on JavaScript, highlighting the implications for web development. It also references resources for learning Nuxt, suggesting a shift towards more HTML-centric approaches in modern web applications.","HTML Can Now Do This Without JavaScript","2026-07-15T00:00:22.156Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=H4mgjB8tejM","4ebc599a3ec5db4015b07b1db685b4632591dd5ff01a54e1506c96d46bb69bd7",[411,412,413],{"color":23,"id":71,"name":72,"slug":72},{"color":23,"id":335,"name":336,"slug":336},{"color":23,"id":338,"name":339,"slug":339},1,20,67,{"confirmedCount":418},466,{"newsletter":420,"totalApprovedReleases":484,"totalPublishedArticles":485},{"averageClickRate":421,"averageOpenRate":422,"confirmedSubscribers":418,"publishedIssues":423,"subscriberGrowth":424},19,70.1,9,[425,429,432,436,440,443,446,451,453,458,461,466,470,473,478,481],{"confirmed":426,"cumulative":426,"net":426,"unsubscribed":427,"weekStart":428},7,0,"2026-06-08T00:00:00.000Z",{"confirmed":414,"cumulative":430,"net":414,"unsubscribed":427,"weekStart":431},8,"2026-06-15T00:00:00.000Z",{"confirmed":433,"cumulative":434,"net":433,"unsubscribed":427,"weekStart":435},4,12,"2026-06-22T00:00:00.000Z",{"confirmed":437,"cumulative":438,"net":437,"unsubscribed":427,"weekStart":439},2,14,"2026-06-29T00:00:00.000Z",{"confirmed":414,"cumulative":441,"net":414,"unsubscribed":427,"weekStart":442},15,"2026-07-06T00:00:00.000Z",{"confirmed":437,"cumulative":444,"net":414,"unsubscribed":414,"weekStart":445},16,"2026-07-13T00:00:00.000Z",{"confirmed":447,"cumulative":448,"net":449,"unsubscribed":437,"weekStart":450},380,394,378,"2026-07-20T00:00:00.000Z",{"confirmed":415,"cumulative":452,"net":421,"unsubscribed":414,"weekStart":305},413,{"confirmed":454,"cumulative":455,"net":456,"unsubscribed":433,"weekStart":457},10,419,6,"2026-08-03T00:00:00.000Z",{"confirmed":456,"cumulative":459,"net":433,"unsubscribed":437,"weekStart":460},423,"2026-08-10T00:00:00.000Z",{"confirmed":462,"cumulative":463,"net":464,"unsubscribed":414,"weekStart":465},35,457,34,"2026-08-17T00:00:00.000Z",{"confirmed":467,"cumulative":468,"net":426,"unsubscribed":433,"weekStart":469},11,464,"2026-08-24T00:00:00.000Z",{"confirmed":471,"cumulative":468,"net":427,"unsubscribed":471,"weekStart":472},3,"2026-08-31T00:00:00.000Z",{"confirmed":427,"cumulative":474,"net":475,"unsubscribed":476,"weekStart":477},459,-5,5,"2026-09-07T00:00:00.000Z",{"confirmed":437,"cumulative":479,"net":414,"unsubscribed":414,"weekStart":480},460,"2026-09-14T00:00:00.000Z",{"confirmed":471,"cumulative":482,"net":437,"unsubscribed":414,"weekStart":483},462,"2026-09-21T00:00:00.000Z",164,69]