[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"articles-feed-\u002F-2--":3,"$fQa3xUpnRDPNiFFu2QS4K-DAjYmsapeR9fNhPNBdpkOc":-1},{"items":4,"page":425,"pageSize":426,"totalCount":427},[5,32,58,83,97,120,144,167,185,207,228,255,279,300,323,341,358,377,394,409],{"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 hands-on walkthrough of TresJS, the Vue custom renderer for Three.js. From a blank canvas to a reactive 3D scene.","2026-06-16T16:11:23.030Z","019ed133-a3ff-777b-adc9-d4611efcce78","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FJzzmU8odS8xTY4oUOFA5dKGDUZ9t1KTrC32UQtOD.png",true,"2026-06-10T06:00:00.000Z","building-3d-scenes-with-tresjs","019d9eed-d835-729a-a029-7e6320cb67ed","Certificates.dev","certificatesdev","This article provides a hands-on guide to using TresJS, a Vue custom renderer for Three.js, to create reactive 3D scenes. It walks through the process from starting with a blank canvas to building interactive 3D visuals.","Building 3D Scenes with TresJS","2026-06-16T16:11:31.024Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fbuilding-3d-scenes-with-tresjs?friend=MOKKAPPS","2e1b1561dca4ab364f3836c76e19030b82096d6ba565f6dc48db6e10c7ad2f55",[22,26,29],{"color":23,"id":24,"name":25,"slug":25},"#10b981","019d6bd8-c9a8-7783-bd22-03145b355427","vue",{"color":23,"id":27,"name":28,"slug":28},"019ed133-c390-75bf-8f1a-5c57cd221f14","threejs",{"color":23,"id":30,"name":31,"slug":31},"019d6bd8-ca8b-709c-b9a5-77d4910da162","ui-components",{"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},"Today, we're announcing the new Nuxt Agent: Nuxi. We want to make your Nuxt experience less generic and more personalized, with the care that characterizes the Nuxt community.","2026-06-10T13:53:20.493Z","019eb1cf-1a54-71ba-a2ca-5a3de0557974","https:\u002F\u002Fnuxt.com\u002Fassets\u002Fblog\u002Fmeet-nuxi.png",false,"2026-06-09T00:00:00.000Z","meet-nuxi","019d6c1a-e19c-736e-b489-240be1c0d29a","Nuxt Blog","rss","The article introduces Nuxi, the new Nuxt Agent aimed at enhancing the Nuxt experience by making it more personalized and community-focused. This initiative seeks to improve user engagement and satisfaction within the Nuxt ecosystem.","Meet Nuxi","2026-06-10T13:53:29.500Z","https:\u002F\u002Fnuxt.com\u002Fblog\u002Fmeet-nuxi","842938e48c6f76a026196892b14e9feb54cf8a177a6fb57ba4a422ccdd7dfaea",[49,52,55],{"color":23,"id":50,"name":51,"slug":51},"019d6bd8-fad3-70a9-a74d-ab96e3a2f45d","nuxt",{"color":23,"id":53,"name":54,"slug":54},"019eb1cf-3dde-776d-9398-4863764f9ac3","community",{"color":23,"id":56,"name":57,"slug":57},"019eb1cf-3de7-7326-87d9-c55ad1c0fa39","personalization",{"content":59,"createdAt":60,"id":61,"image":62,"isAffiliate":37,"isPublished":10,"publishedAt":63,"slug":64,"sourceId":65,"sourceName":66,"sourceType":42,"summary":67,"title":68,"updatedAt":69,"url":70,"urlHash":71,"tags":72},"As frontend applications become more complex, debugging production issues becomes increasingly difficult. A user reports: \"The page feels slow.\" or: \"The dashboard sometimes freezes.\" But when you check your logs... everything looks fine. The problem is that traditional frontend monitoring often tells you what failed, but not why it happened. This is where observability comes in. And one of the most popular tools for modern observability is OpenTelemetry. In this article, we'll explore: What frontend observability is How it differs from traditional monitoring Why OpenTelemetry is becoming the industry standard How to add OpenTelemetry to a Vue application Best practices for collecting useful telemetry Let's dive in. 🤔 What Is Frontend Observability? Observability is the ability to understand what's happening inside your application by collecting telemetry data. Typically, this includes: traces metrics logs Unlike traditional monitoring, observability helps answer questions like: Why is this page slow? Which API request caused the delay? What happened before the error occurred? Which users are affected? Instead of simply knowing that something failed... 👉 You can understand the entire chain of events that led to the problem. 🟢 Why Is Frontend Observability Important? Most teams invest heavily in backend observability. They track: database queries API latency server errors infrastructure metrics But users interact with the frontend. And many issues happen before the request even reaches the backend. For example: slow component rendering blocked main thread failed network requests routing issues third-party script delays Without frontend observability these problems are often invisible. 🟢 What Is OpenTelemetry? OpenTelemetry (often called OTel) is an open-source observability framework used to collect and export telemetry data. It provides a standard way to collect: traces metrics logs And send them to tools such as: Grafana Jaeger Datadog New Relic Honeycomb Elastic The biggest advantage? Vendor-neutral instrumentation. You can change observability providers without rewriting your instrumentation. 🟢 How OpenTelemetry Helps Vue Applications Imagine a user loads a dashboard. Several things happen: Route change ↓ Component mounts ↓ API request starts ↓ Data is fetched ↓ UI renders Normally these events are disconnected. With OpenTelemetry you can trace the entire flow. This helps answer questions like: Which API call slowed down the page? How long did rendering take? Which routes are causing performance issues? 🟢 Setting Up OpenTelemetry in Vue Let's look at a simplified setup. Install the required packages: npm install \\ @opentelemetry\u002Fapi \\ @opentelemetry\u002Fsdk-trace-web \\ @opentelemetry\u002Finstrumentation-fetch \\ @opentelemetry\u002Finstrumentation-xml-http-request Basic initialization import { WebTracerProvider } from '@opentelemetry\u002Fsdk-trace-web' const provider = new WebTracerProvider() provider.register() This creates a tracer that can collect telemetry from the browser. 🟢 Creating Custom Traces One of the most powerful features is custom tracing. Example: import { trace } from '@opentelemetry\u002Fapi' const tracer = trace.getTracer('vue-app') Inside a component: const span = tracer.startSpan('load-users') try { await fetchUsers() } finally { span.end() } Now you'll see exactly how long that operation took. This becomes extremely useful when debugging production issues. 🟢 Tracking Route Performance Vue Router is another excellent place to add tracing. Example: router.beforeEach((to, from, next) => { performance.mark('navigation-start') next() }) router.afterEach(() => { performance.measure( 'navigation', 'navigation-start' ) }) Combined with OpenTelemetry exporters, this can help identify slow routes and navigation bottlenecks. 🟢 Monitoring API Requests Many performance problems originate from network calls. OpenTelemetry provides automatic instrumentation for: Fetch API XMLHttpRequest Example: registerInstrumentations({ instrumentations: [ new FetchInstrumentation() ] }) Now requests can automatically generate traces. You can see: request duration failures dependencies between actions without manually instrumenting every API call. 🧪 Best Practices Instrument critical user flows first Trace important API requests Avoid collecting unnecessary telemetry Sample traces in high-traffic applications Correlate frontend traces with backend traces Monitor route transitions and rendering bottlenecks Focus on actionable insights rather than collecting everything 📖 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 Frontend observability helps you understand not just what went wrong, but why it happened. As applications grow in complexity, logs and error tracking alone are often no longer enough. OpenTelemetry gives you deeper visibility into your Vue application, helping you identify bottlenecks, improve performance, and deliver a better user experience. Take care! And happy coding as always 🖥️","2026-06-08T12:00:03.683Z","019ea71a-ac51-7489-bbe0-07745fbb62d0","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiajryi395e201bloufp6.png","2026-06-08T08:59:35.000Z","frontend-observability-in-vue-apps-with-opentelemetry","019d6bd6-7fe0-7244-80dc-9a4e8751886a","Jakub Andrzejewski","This article discusses the importance of frontend observability in Vue applications, emphasizing how traditional monitoring falls short in diagnosing performance issues. It introduces OpenTelemetry as a solution for collecting telemetry data, providing insights into application behavior and performance. The article also includes a guide on setting up OpenTelemetry in Vue apps to enhance observability.","Frontend Observability in Vue Apps with OpenTelemetry","2026-06-10T14:35:13.766Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Ffrontend-observability-in-vue-apps-with-opentelemetry-3fb0","c8c141c41435740358afc38ce5d160217a0beb69c216de4d15879d516b3259e9",[73,74,77,80],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":75,"name":76,"slug":76},"019ea71a-dc95-72b8-a7e3-70f9e2ac3710","opentelemetry",{"color":23,"id":78,"name":79,"slug":79},"019ea71a-dc9d-7607-9cfa-df0f31ab5876","observability",{"color":23,"id":81,"name":82,"slug":82},"019d6bd8-ca26-775c-b9b5-c3439dbe5789","performance",{"content":84,"createdAt":85,"id":86,"image":87,"isAffiliate":37,"isPublished":10,"publishedAt":88,"slug":89,"sourceId":90,"sourceName":91,"sourceType":42,"summary":92,"title":93,"updatedAt":85,"url":94,"urlHash":95,"tags":96},null,"2026-06-07T11:18:04.206Z","019ea1cd-de8e-731b-aab7-fe5ae370da3f","https:\u002F\u002Fblog.logrocket.com\u002Fwp-content\u002Fuploads\u002F2026\u002F06\u002FBuild-a-headless-table-engine-in-Vue-3-1.png","2026-06-05T09:16:00.000Z","an-advanced-guide-to-nuxt-testing-and-mocking","019ea1cd-de82-7633-b229-fa18b74a29e8","LogRocket","Learn how to test Nuxt apps with Vitest, @nuxt\u002Ftest-utils, runtime mocks, server route mocks, and Playwright e2e tests.","An advanced guide to Nuxt testing and mocking","https:\u002F\u002Fblog.logrocket.com\u002Fadvanced-guide-nuxt-testing-mocking\u002F","67fc8bb75f9023e1b1de65bab0e8875437c2b636935f95ea99204a9d10ac2c50",[],{"content":98,"createdAt":99,"id":100,"image":101,"isAffiliate":10,"isPublished":10,"publishedAt":102,"slug":103,"sourceId":13,"sourceName":14,"sourceType":15,"summary":104,"title":105,"updatedAt":106,"url":107,"urlHash":108,"tags":109},"How to deploy Nuxt to Vercel, Netlify, Cloudflare, and Node, with hybrid rendering via routeRules.","2026-06-03T16:00:00.395Z","019e8e36-8d78-723f-be81-94cc2f36502c","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002Fyw1suASU3ol8gn9bqhagyHsgnn2XjoGRQovUye3h.png","2026-06-03T06:00:00.000Z","deploying-nuxt-presets-platforms-and-hybrid-rendering","This article provides a comprehensive guide on deploying Nuxt applications across various platforms including Vercel, Netlify, and Cloudflare, while also discussing hybrid rendering techniques using routeRules. It aims to equip developers with the knowledge needed to effectively deploy their Nuxt projects.","Deploying Nuxt: Presets, Platforms, and Hybrid Rendering","2026-06-03T16:00:12.562Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fdeploying-nuxt-presets-platforms-and-hybrid-rendering?friend=MOKKAPPS","6ac4de1ab593d1295277a17b34f0e60f4937ab7ba1b40b0bb8c8dbceae2e94b2",[110,111,114,117],{"color":23,"id":50,"name":51,"slug":51},{"color":23,"id":112,"name":113,"slug":113},"019d9eda-5005-7329-a463-189572e25635","deployment",{"color":23,"id":115,"name":116,"slug":116},"019d6bd8-ca89-735e-a52a-ee53a80a77a9","ssr",{"color":23,"id":118,"name":119,"slug":119},"019e8e36-bd4b-740d-b23a-81858b24025b","ssg",{"content":121,"createdAt":122,"id":123,"image":124,"isAffiliate":37,"isPublished":10,"publishedAt":125,"slug":126,"sourceId":65,"sourceName":66,"sourceType":42,"summary":127,"title":128,"updatedAt":129,"url":130,"urlHash":131,"tags":132},"Animations can make an application feel faster, smoother, and more polished. However, many developers think animations are only useful for things like: page transitions modals enter\u002Fleave effects But Vue provides another powerful pattern - State-driven animations. Instead of animating when elements are added or removed from the DOM, you animate changes in reactive state. This allows you to create rich interactive experiences while keeping your code declarative and easy to maintain. In this article, we'll explore: What state-driven animations are How they differ from regular Vue transitions What problems they solve How to implement them in Vue Best practices for creating smooth UI interactions Let's dive in. 🤔 What Are State-Driven Animations? Most Vue developers are familiar with the <Transition> component. Example: <Transition> <Modal v-if=\"isOpen\" \u002F> <\u002FTransition> This animates an element when it enters or leaves the DOM. But what if the element already exists and only its state changes? For example: a progress bar grows a card expands a chart updates a panel changes size a value changes position This is where state-driven animations shine. Instead of animating DOM insertion or removal, you animate changes caused by reactive state. 🟢 What Problem Do State-Driven Animations Solve? Without animations, state changes can feel abrupt. Example: <div :style=\"{ width: progress + '%' }\"><\u002Fdiv> When progress changes: progress.value = 80 The width instantly jumps. This works technically... but it doesn't feel great. 🟢 A Simple Example Let's create an animated progress bar. <script setup lang=\"ts\"> const progress = ref(20) function increase() { progress.value += 20 } <\u002Fscript> <template> <button @click=\"increase\"> Increase Progress <\u002Fbutton> <div class=\"progress-container\"> <div class=\"progress-bar\" :style=\"{ width: `${progress}%` }\" \u002F> <\u002Fdiv> <\u002Ftemplate> CSS: .progress-container { width: 100%; height: 12px; background: #eee; } .progress-bar { height: 100%; background: #42b883; transition: width 0.3s ease; } Now whenever progress changes, the bar animates smoothly. The animation is entirely driven by reactive state. 🟢 Animating Multiple Properties State-driven animations are not limited to width. Example: <div class=\"card\" :style=\"{ transform: expanded ? 'scale(1.1)' : 'scale(1)', opacity: expanded ? 1 : 0.7 }\" \u002F> CSS: .card { transition: transform 0.3s ease, opacity 0.3s ease; } Now changing: expanded.value = true animates scale and opacity at the same time. 🟢 Using Vue Reactivity with Animations One of the biggest advantages is that animations stay connected to Vue's reactivity system. Example: <script setup lang=\"ts\"> const isActive = ref(false) <\u002Fscript> <template> <button @click=\"isActive = !isActive\"> Toggle <\u002Fbutton> <div class=\"box\" :class=\"{ active: isActive }\" \u002F> <\u002Ftemplate> CSS: .box { width: 100px; height: 100px; transition: all 0.4s ease; } .box.active { transform: rotate(180deg); } Vue handles state. CSS handles animation. The result is clean and maintainable. 🧪 Best Practices Keep animations subtle and purposeful Prefer CSS transitions for simple effects Avoid animating expensive properties when possible Use transforms instead of layout-changing properties when appropriate Don't animate everything Keep durations short (typically 200–400ms) Use animations to communicate state changes, not distract users 📖 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 State-driven animations are a powerful way to create smooth and engaging user experiences in Vue. While <Transition> is perfect for entering and leaving elements, state-driven animations excel when existing elements need to react smoothly to changing data. Used thoughtfully, they can make your applications feel significantly more responsive and professional. Take care! And happy coding as always 🖥️","2026-06-01T12:00:05.566Z","019e830e-2fa7-74ed-8c74-71fc2c69cb52","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvih3y2fdc8upo7ni9m42.png","2026-06-01T09:54:37.000Z","state-driven-animations-in-vue-create-smooth-ui-transitions-with-reactive-state","This article explores state-driven animations in Vue, highlighting how they enhance UI transitions by animating changes in reactive state rather than just DOM insertion or removal. It provides examples and best practices for implementing these animations to create smoother, more interactive user experiences.","State-Driven Animations in Vue: Create Smooth UI Transitions with Reactive State","2026-06-10T14:35:13.767Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fstate-driven-animations-in-vue-create-smooth-ui-transitions-with-reactive-state-d3i","b6046ff3585c584d9e28b56411b296d962249089895ddbb6902902fabcfdafec",[133,134,137,140,141],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":135,"name":136,"slug":136},"019e830e-5378-722b-929b-a57d67bcf605","animation",{"color":23,"id":138,"name":139,"slug":139},"019daac3-2f85-7393-b891-9da3891267ca","reactivity",{"color":23,"id":30,"name":31,"slug":31},{"color":23,"id":142,"name":143,"slug":143},"019d6bd8-fba5-743f-8f9f-4e23c0b31581","tutorial",{"content":145,"createdAt":146,"id":147,"image":148,"isAffiliate":37,"isPublished":10,"publishedAt":149,"slug":150,"sourceId":151,"sourceName":152,"sourceType":42,"summary":153,"title":154,"updatedAt":155,"url":156,"urlHash":157,"tags":158},"Claude Code shipped workflows recently, and the docs describe a lot of machinery: deterministic orchestration, parallel and pipeline, journaling and resume, adversarial verify patterns. I wanted to understand it rather than skim the feature list, and the way I learn a tool is to build the smallest real thing with it. So I picked a task with an obvious fan-out shape: “what happened in the Vue and Nuxt ecosystem this week.” Many independent sources to check, then a merge, then a write-up. I wrote a ~130-line workflow that spawns nine agents in parallel, each scouring a different source, collects their findings into one list, ranks them by impact, and writes a digest. It’s a throwaway, but building it taught me how the whole feature fits together. This post is what I learned. A workflow is the newest piece of Claude Code’s orchestration story. In my post on agent teams I traced the progression from subagents to teams. Workflows are the next rung, and they solve a different problem than either: when you want the control flow itself to be deterministic, not decided turn-by-turn by a model. If you want a sense of the ceiling before the toy example, Jarred Sumner credited dynamic workflows and adversarial code review for porting Bun from Zig to Rust in six days: <TLDR items={[ “A workflow is a plain JavaScript script that orchestrates subagents deterministically: you own the loops and fan-out, agents do the thinking”, “The shape that generalizes: fan out → reduce → synthesize”, “agent() runs one subagent (use a schema for validated JSON), parallel() is a barrier, pipeline() streams items through stages with no barrier”, “Default to pipeline(); reach for a parallel() barrier only when a stage needs all prior results at once”, “Compose verify\u002Fjudge\u002Floop-until-dry patterns for confidence, not more agents”, “It’s opt-in and token-hungry, so reach for it when a job needs breadth, verification, or scale a single context can’t hold”, ]} \u002F> Table of Contents Where Workflows Fit Most of the time a single Claude Code session works turn-by-turn: read a file, decide, call a tool, look at the result, decide again. That loop is the right tool for most work. Some jobs don’t fit one head and one context window though: Comprehensive jobs: “review every file in this diff”, “audit all 40 dependencies”. Confidence-critical jobs: “find the bug, then have three independent skeptics try to refute it”. Scale jobs: migrations, sweeps, anything bigger than one context can hold. Subagents and agent teams can attack these, but there’s a subtle difference in who holds the plan. Subagents Agent Teams Workflows What it is A worker Claude spawns Independent Claude sessions A script the runtime executes Who decides what’s next Claude, turn by turn Claude and the teammates The script Where results live Claude’s context Each session’s context Script variables What’s repeatable The worker definition The team setup The orchestration itself Scale A few per turn A handful of sessions Dozens to hundreds of agents With subagents and skills, Claude is the orchestrator. It decides turn by turn what to spawn, and every result lands back in its context window. A workflow moves the plan into code. The script holds the loop, the branching, and the intermediate results, so Claude’s context only ever sees the final answer. That is what lets a workflow scale to hundreds of agents without drowning the conversation. The Core Idea A normal agent decides the control flow as it goes. A workflow inverts that. You write the control flow as plain code, and each individual step is delegated to a fresh subagent. The orchestration is deterministic; only the work inside each agent() call is model-powered. That distinction is the whole point. When you write this: const results = await parallel(files.map((f) => () => agent(`Review ${f}`))); You know exactly one agent runs per file, they all run concurrently, and you get an array back. There are no emergent “the model decided to skip three files” surprises. You get determinism in the orchestration and model judgment inside each step. The shape that keeps showing up is fan out → reduce → synthesize: <Mermaid chart={graph LR A[fan out] --> B[agent 1] A --> C[agent 2] A --> D[agent ...] A --> E[agent N] B --> F[reduce: dedupe + rank] C --> F D --> F E --> F F --> G[synthesize: write the result]} \u002F> Swap the sources and prompts and the same skeleton becomes a market scan, a dependency audit, a code review, or a research report. The Example I Built to Learn It Here is the workflow I wrote. I picked the newsletter task because it forces you to use every part of the feature: a wide fan-out, a reduce step, and a synthesis step. Every script starts with a meta block that must be a pure literal, then a body using the orchestration primitives. export const meta = { name: \"vue-newsletter\", description: \"Research Vue\u002FNuxt sources in parallel and synthesize a newsletter\", phases: [ { title: \"Research\", detail: \"one agent per source\" }, { title: \"Curate\", detail: \"dedupe + rank by impact\" }, { title: \"Write\", detail: \"synthesize the newsletter\" }, ], }; 1. Fan out with parallel() Nine sources, nine agents, all at once. Each returns structured JSON validated against a schema, so the model retries on mismatch and I never parse free text: phase(\"Research\"); const raw = await parallel( SOURCES.map((s) => () => agent(s.prompt, { label: `research:${s.key}`, phase: \"Research\", schema: ITEM_SCHEMA, \u002F\u002F forces validated structured output agentType: \"general-purpose\", }), ), ); The SOURCES array is just data: one entry per source with a prompt. GitHub core releases, the Nuxt ecosystem, the official blogs, Hacker News, Reddit, dev.to, key people like Evan You and Anthony Fu, and the newsletter\u002Fpodcast circuit. 2. Reduce with plain JavaScript Flattening, deduping, and filtering is just code. No agent needed: const collected = raw.filter(Boolean); \u002F\u002F skipped\u002Ffailed agents become null const flatItems = collected.flatMap((c) => c.items); log(`Collected ${flatItems.length} items`); 3. Synthesize with sequential agent() calls phase(\"Curate\"); const curated = await agent(curatePrompt, { phase: \"Curate\", schema: CURATED_SCHEMA }); phase(\"Write\"); const newsletter = await agent(writePrompt, { phase: \"Write\" }); return { newsletter, itemCount: flatItems.length, curated }; The run I did while testing pulled together a Nuxt UI release, a Vue Router v5 minor, a Vue core patch, and a Madrid conference recap: seventeen items across nine sources in about three minutes. Good enough to convince me the orchestration worked, which was the whole point of building it. The `schema` option forces a subagent to call a structured-output tool, and validation happens at the tool-call layer so the model retries on mismatch. This is far more reliable than asking an agent to \"please return JSON\" and hoping. Reach for it whenever a downstream stage consumes the result. The Primitives A handful of functions do all the work. agent(prompt, opts?) spawns one subagent. Without options it returns the agent’s final text. The options worth knowing: schema: a JSON Schema. The subagent is forced to return validated structured data. label: the display name in the progress UI. phase: assigns the agent to a progress group. Use it inside parallel() and pipeline() to avoid racing on the global phase() state. model: override the model for this one call. Default is to omit it so the agent inherits your session model. agentType: use a custom subagent type instead of the default workflow agent. isolation: \"worktree\": run the agent in its own git worktree. Only when agents write files in parallel and would otherwise conflict. parallel(thunks) runs tasks concurrently. It is a barrier: it waits for every thunk before returning. A thunk that throws resolves to null rather than rejecting the whole call, so always .filter(Boolean) the results. You can pass a hundred thunks and they’ll all complete, but only a handful run at once: concurrency is capped at roughly your core count, and the excess queue. pipeline(items, ...stages) runs each item through all stages independently, with no barrier between stages. Item A can be in stage 3 while item B is still in stage 1. Each stage callback receives (prevResult, originalItem, index). workflow(nameOrRef, args?) runs another workflow inline as a sub-step and returns whatever it returns. Pass a name to invoke a saved workflow, or { scriptPath } to run a script file. This is composition: a research workflow can call \u002Fdeep-research as one of its stages instead of reimplementing the fan-out. The child shares the parent’s concurrency cap, agent counter, and token budget, and shows up as its own group in \u002Fworkflows. Nesting is one level deep: a workflow() call inside a child throws. \u002F\u002F inside a script: hand a sub-question off to the bundled deep-research workflow const report = await workflow(\"deep-research\", { question: topic }); The rest are small helpers: phase(title) starts a progress group, log(msg) emits a narrator line, args carries the JSON you passed in when launching, and budget exposes the token target so you can scale depth dynamically (it’s null when you launch without a target, so guard any loop-until-budget on budget.total or it runs to the agent cap). `Date.now()`, `Math.random()`, and an argless `new Date()` all throw inside a workflow. Workflows journal every `agent()` call so a run can resume, and non-determinism would invalidate that cache. If you need a timestamp, pass it through `args`. If you need variety across agents, vary the prompt or label by index. pipeline vs parallel: The Decision That Matters This trips people up, so here is the rule I follow. Default to pipeline(). Reach for a parallel() barrier between stages only when a stage needs all prior results at once. Legitimate reasons for a barrier: ✅ Dedupe or merge across the full result set before expensive downstream work. ✅ Early-exit on the total (“0 findings, skip verification entirely”). ✅ A prompt that references “the other findings” for comparison. Not legitimate: ❌ “I need to flatten or filter first.” Do it inside a pipeline stage. ❌ “The stages feel conceptually separate.” Separate is not the same as synchronized. ❌ “It’s cleaner code.” Barrier latency is real wall-clock waste. The smell test: if you wrote parallel → transform → parallel, and that middle transform has no cross-item dependency, you should have used a pipeline. The newsletter example does use a barrier, and correctly: curation has to see every source before it can dedupe and rank across them. Quality Patterns The primitives compose into reusable harnesses. This is the real value over spawning more agents: the structure is what produces confidence. A few I lean on: Adversarial verify: for each finding, spawn N independent skeptics prompted to refute it. Kill it unless a majority survive. Stops plausible-but-wrong findings from shipping. Perspective-diverse verify: give each verifier a distinct lens (correctness, security, performance, does-it-reproduce) instead of N identical ones. Diversity catches failure modes redundancy can’t. Judge panel: generate N attempts from different angles, score with parallel judges, synthesize from the winner while grafting the best of the runners-up. Loop-until-dry: for unknown-size discovery, keep spawning finders until K consecutive rounds surface nothing new. Here is loop-until-dry with a diverse-lens verify, condensed: const seen = new Set(); const confirmed = []; let dry = 0; while (dry < 2) { const found = (await parallel(FINDERS.map((f) => () => agent(f.prompt, { phase: \"Find\", schema: BUGS })))).filter(Boolean).flatMap((r) => r.bugs); const fresh = found.filter((b) => !seen.has(key(b))); if (!fresh.length) { dry++; continue; } dry = 0; fresh.forEach((b) => seen.add(key(b))); const judged = await parallel(fresh.map((b) => () => parallel([\"correctness\", \"security\", \"repro\"].map((lens) => () => agent(`Judge \"${b.desc}\" via the ${lens} lens — real?`, { phase: \"Verify\", schema: VERDICT }))) .then((vs) => ({ b, real: vs.filter(Boolean).filter((v) => v.real).length >= 2 })))); confirmed.push(...judged.filter((v) => v.real).map((v) => v.b)); } One detail makes or breaks this: dedupe against everything seen, not just confirmed results. Otherwise rejected findings reappear every round and the loop never converges. A Shipped Example: How \u002Fdeep-research Works My newsletter generator is a toy. If you want to see these patterns in a real, bundled workflow, run \u002Fdeep-research. It takes a question and returns a cited report, and under the hood it’s the same fan out → reduce → synthesize skeleton with an adversarial verify pass bolted on. It’s the quality pattern from the section above, running in production. When you launch it the workflow announces its plan and runs in the background while you keep working: It moves through five phases: Scope: one agent decomposes your question into five distinct search angles, so the searches don’t all chase the same wording. Search: five web searches run in parallel, one per angle. This is the fan-out. Fetch: dedupe the URLs across angles, pull the top ~15 sources, and extract individual claims from them. Verify: the interesting part. Each claim gets an adversarial three-vote check, with skeptics trying to refute it. Claims that don’t survive never reach the report. Synthesize: one final agent writes the cited report from the claims that held up. Map that onto the primitives and you can almost see the script: a single agent() for scope, a parallel() fan-out for the five searches, plain JavaScript to dedupe in fetch, a per-claim verify pass (the same parallel() of skeptics from the loop-until-dry example), and a closing agent() to synthesize. The phases show up in \u002Fworkflows as named groups (Scope 1\u002F1, Search 0\u002F5, Fetch, Verify, Synthesize), each with its own agent count, token total, and elapsed time, so you can drill into any single search or verification and read its prompt and result. This is the difference between “ask Claude to research something” and a workflow. A single agent doing web research holds every half-read source in one context and never checks its own claims. \u002Fdeep-research decomposes the search so coverage is wide, keeps the intermediate sources out of your conversation, and runs a verification pass a single turn-by-turn agent would never run against itself. Triggering and Watching a Run Worth saying plainly: from Claude Code’s side, a workflow is a tool. There’s a Workflow tool the same way there’s a Read or Bash tool, and “running a workflow” means Claude calls that tool with a script. The runtime executes the script in the background while your session stays responsive, which is why you can keep chatting while dozens of agents churn away. There are a few ways a workflow gets written and launched: Say “workflow” in your prompt. Include the word and Claude writes a workflow script for the task instead of working through it turn by turn. Run a saved or bundled command. A workflow you saved to the project, or the built-in \u002Fdeep-research covered above. Turn on ultracode. Claude plans a workflow for every substantial task in the session. Run a workflow to audit every API endpoint under src\u002Froutes\u002F for missing auth checks. Spawn one agent per route file, then have a second pass verify each finding before reporting. When a run does what you wanted, you can save it: Claude Code writes the script into .claude\u002Fworkflows\u002F in your repo as a <name>.js file (the appendix below is exactly that file for my newsletter). Because it lives in the repo, it’s version-controlled and anyone who clones it can launch it by name and pass arguments: Run the vue-newsletter workflow with args `{\"weekStart\":\"2026-06-04\",\"weekEnd\":\"2026-06-11\"}` Runs happen in the background, and \u002Fworkflows is how you watch them: it lists every run, including which ones are currently running, and opens a progress view showing each phase with its agent count, token total, and elapsed time. You can drill into a phase, then into a single agent, to read its prompt and result, pause or stop a run, or press s to save a good one’s script as a reusable \u002F<name> command under .claude\u002Fworkflows\u002F. When to Reach for One <Mermaid chart={graph TD A[Does the job need breadth,<br\u002F>verification, or scale?] -->|No| B[Single session<br\u002F>or a subagent] A -->|Yes| C[Do you want the control flow<br\u002F>to be deterministic and repeatable?] C -->|No| D[Agent team] C -->|Yes| E[Write a workflow]} \u002F> Good fit ✅ Decomposing a job so every part is covered in parallel (audits, reviews, sweeps). Anything you want to re-run with the same structure (a weekly competitor scan, a release checklist). Confidence-critical work where a repeatable verify or judge pass beats one model’s first answer. Bad fit ❌ An ordinary task one agent can do turn by turn. Let one agent do it. Work that needs you to weigh in between every stage. A workflow can’t take mid-run input; only agent permission prompts pause it. Anything where the token cost of dozens of agents isn’t justified by breadth or scale. A workflow spawns many agents, so one run can use meaningfully more tokens than doing the same task in conversation, and it counts toward your plan's usage. Every agent uses your session's model unless the script routes a stage elsewhere, so check `\u002Fmodel` before a large run and consider routing cheap stages to a smaller model. Conclusion A workflow is a JavaScript script that orchestrates subagents deterministically. You own the control flow, agents do the thinking, and the plan lives in code so the conversation only sees the final answer. The shape that generalizes is fan out → reduce → synthesize. The newsletter generator I built is a deliberately small instance of it. agent() runs one (use a schema for validated structured output), parallel() is a barrier, pipeline() streams items through stages with no barrier. Default to pipeline. The leverage is the repeatable quality patterns: adversarial verify, diverse lenses, judge panels, loop-until-dry. It is opt-in and token-hungry. Reach for it when a job needs breadth, independent verification, or scale a single context can’t hold. Otherwise let one agent do the work. If you’ve already worked through subagents and skills, workflows are the natural next tool. The fastest way to understand them is the same way I did: pick a small task with a clear fan-out shape and build the throwaway version. Mine was a newsletter generator I won’t run again. The point was never the newsletter; it was seeing how the pieces fit, so that when a job needs breadth or verification, reaching for a workflow is obvious. Appendix: The Full Script Everything above is excerpts. Here is the complete .claude\u002Fworkflows\u002Fvue-newsletter.js in one piece, so you can see how the meta block, the schemas, the source list, and the three phases fit together. It’s plain JavaScript: no imports, no filesystem access, inputs via args, results via return. export const meta = { name: 'vue-newsletter', description: 'Research Vue\u002FNuxt ecosystem sources in parallel for a given week and synthesize a newsletter', whenToUse: 'Generate a weekly Vue\u002FNuxt newsletter. Pass args {weekStart, weekEnd, label} as ISO dates (e.g. {\"weekStart\":\"2026-05-21\",\"weekEnd\":\"2026-05-28\"}). With no args, agents cover the past 7 days from today.', phases: [ { title: 'Research', detail: 'one agent per source — releases, blogs, social, people' }, { title: 'Curate', detail: 'dedupe + rank items by impact' }, { title: 'Write', detail: 'synthesize the final newsletter' }, ], } \u002F\u002F Args are optional. Pass {weekStart, weekEnd, label} as ISO dates to scope a specific week. \u002F\u002F With no args, agents are told to cover \"the past 7 days from today\" (they resolve the date via web search). const hasRange = args && args.weekStart && args.weekEnd const weekStart = hasRange ? args.weekStart : null const weekEnd = hasRange ? args.weekEnd : null const label = (args && args.label) || (hasRange ? `Week of ${weekStart}–${weekEnd}` : 'this week') const window = hasRange ? `between ${weekStart} and ${weekEnd}` : 'within the past 7 days from today' const ITEM_SCHEMA = { type: 'object', additionalProperties: false, properties: { source: { type: 'string' }, items: { type: 'array', items: { type: 'object', additionalProperties: false, properties: { title: { type: 'string' }, url: { type: 'string' }, summary: { type: 'string', description: '1-3 sentence plain summary of what changed \u002F why it matters' }, category: { type: 'string', enum: ['release', 'article', 'tooling', 'discussion', 'tutorial', 'people', 'other'] }, date: { type: 'string', description: 'ISO date if known, else empty' }, impact: { type: 'string', enum: ['high', 'medium', 'low'] }, }, required: ['title', 'url', 'summary', 'category', 'impact'], }, }, }, required: ['source', 'items'], } \u002F\u002F Each source is researched by its own agent in parallel. const SOURCES = [ { key: 'core-releases', prompt: `Find releases\u002Fchangelogs published ${window} for these GitHub repos: vuejs\u002Fcore, vuejs\u002Frouter (vue-router), vuejs\u002Fpinia, vueuse\u002Fvueuse, vitejs\u002Fvite, vitejs\u002Fvitest. For each new release in that window, give the version, the highlights, and the release URL. Skip anything outside the date window.`, }, { key: 'nuxt-releases', prompt: `Find releases\u002Fchangelogs published ${window} for the Nuxt ecosystem on GitHub: nuxt\u002Fnuxt, nuxt\u002Fui, nuxt\u002Fimage, nuxt\u002Fcontent, unjs\u002Fnitro, unjs\u002Fh3. Give version, highlights, and URL for each release in that window only.`, }, { key: 'vue-blog', prompt: `Check the official Vue.js blog (blog.vuejs.org) and Vue.js news for posts published ${window}. Summarize each post with its URL.`, }, { key: 'nuxt-blog', prompt: `Check the official Nuxt blog (nuxt.com\u002Fblog) for posts published ${window}. Summarize each with URL.`, }, { key: 'hackernews', prompt: `Search Hacker News (news.ycombinator.com) for stories about Vue, Nuxt, Vite, or Pinia that were active\u002Fposted ${window}. Include the HN discussion URL and the linked article. Note points\u002Fcomments if visible.`, }, { key: 'reddit', prompt: `Search Reddit r\u002Fvuejs and r\u002FNuxt for notable threads posted ${window} — announcements, releases, popular discussions, showcased projects. Give the reddit thread URL for each.`, }, { key: 'devto', prompt: `Search dev.to for the most useful Vue and Nuxt tagged articles published ${window} (tutorials, deep-dives, tips). Give URLs.`, }, { key: 'people', prompt: `Look for notable updates, posts, or talks ${window} from key Vue\u002FNuxt people: Evan You (@youyuxi \u002F VoidZero), Daniel Roe (Nuxt lead), Anthony Fu (VueUse\u002FVitesse\u002FSlidev), Eduardo San Martin Morote (posva — router\u002Fpinia), Sébastien Chopin (Nuxt\u002FNuxtLabs). Include VoidZero and NuxtLabs company news too. Give URLs.`, }, { key: 'newsletters-podcasts', prompt: `Find Vue\u002FNuxt newsletter issues and podcast episodes published ${window}: Vue.js Newsletter (news.vuejs.org), This Week in Vue, Michael Thiessen's newsletter, DejaVue podcast, Deox\u002FVue Mastery content. Summarize and give URLs.`, }, ] phase('Research') const raw = await parallel( SOURCES.map((s) => () => agent( `You are researching the Vue.js \u002F Nuxt ecosystem for a weekly newsletter covering ${label} (${window}).\\n\\n${s.prompt}\\n\\nUse web search and fetch real URLs. Only include items genuinely within the date window. Return real, verifiable URLs — never invent links. If you find nothing in the window, return an empty items array. Set impact based on how much the average Vue developer should care.`, { label: `research:${s.key}`, phase: 'Research', schema: ITEM_SCHEMA, agentType: 'general-purpose' }, ), ), ) const collected = raw.filter(Boolean) const flatItems = collected.flatMap((c) => (c.items || []).map((it) => ({ ...it, source: c.source }))) log(`Collected ${flatItems.length} items across ${collected.length} sources`) phase('Curate') const CURATED_SCHEMA = { type: 'object', additionalProperties: false, properties: { highlights: { type: 'array', items: { type: 'string' }, description: '2-4 sentence TLDR bullets of the biggest stories this week' }, items: { type: 'array', items: { type: 'object', additionalProperties: false, properties: { title: { type: 'string' }, url: { type: 'string' }, summary: { type: 'string' }, category: { type: 'string' }, impact: { type: 'string' }, }, required: ['title', 'url', 'summary', 'category', 'impact'], }, }, }, required: ['highlights', 'items'], } const curated = await agent( `Here are raw newsletter candidate items gathered from multiple sources for the Vue\u002FNuxt week of ${label}:\\n\\n${JSON.stringify(flatItems, null, 2)}\\n\\nCurate them:\\n1. Remove duplicates (same release\u002Farticle surfaced by multiple sources — keep the best canonical URL).\\n2. Drop low-quality, off-topic, or spammy entries.\\n3. Rank by impact (high first).\\n4. Write 3-5 punchy \"highlights\" bullets capturing the week's biggest stories.\\nKeep every URL exactly as provided — do not fabricate or alter links.`, { phase: 'Curate', schema: CURATED_SCHEMA }, ) phase('Write') const newsletter = await agent( `Write a polished weekly Vue.js \u002F Nuxt newsletter in Markdown for ${label}.\\n\\nUse this curated data:\\n${JSON.stringify(curated, null, 2)}\\n\\nStructure:\\n- A title with the week range and a one-paragraph intro setting the tone.\\n- \"📌 This Week's Highlights\" — the highlights bullets.\\n- \"🚀 Releases\" — version bumps with what changed (group Vue core + Nuxt + tooling).\\n- \"📝 Articles & Tutorials\".\\n- \"🛠️ Tooling & Ecosystem\".\\n- \"💬 Community & Discussion\".\\n- \"👤 From the Core Team & Community\" — people\u002Fcompany news.\\n- A short friendly sign-off.\\n\\nEvery item must be a markdown link to its real URL. Keep summaries tight and developer-focused. Omit any empty section. Output ONLY the markdown newsletter.`, { phase: 'Write' }, ) return { newsletter, itemCount: flatItems.length, curated }","2026-05-28T20:00:03.329Z","019e702c-2ae7-7659-a2b2-f994793c0dea","https:\u002F\u002Falexop.dev\u002Fposts\u002Fclaude-code-workflows-deterministic-multi-agent-orchestration\u002Findex.png","2026-05-28T00:00:00.000Z","claude-code-workflows-deterministic-multi-agent-orchestration","019d70dd-e3e7-76db-84a4-87b896dea004","alexop.dev","The article explores Claude Code's new workflows feature, which allows for deterministic orchestration of multi-agent tasks. By building a workflow to aggregate information from the Vue and Nuxt ecosystem, the author demonstrates how workflows can efficiently manage complex tasks through parallel processing and structured control flow. This hands-on approach highlights the practical applications and benefits of using Claude Code's orchestration capabilities.","Claude Code Workflows: Deterministic Multi-Agent Orchestration","2026-05-28T20:00:12.948Z","https:\u002F\u002Falexop.dev\u002Fposts\u002Fclaude-code-workflows-deterministic-orchestration\u002F","b15c964848800d569bbde2a08be74221a0132ff8a55b66063b640550f303d835",[159,160,161,164],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":50,"name":51,"slug":51},{"color":23,"id":162,"name":163,"slug":163},"019e129e-3490-7739-a218-5454a8c15d6e","workflow",{"color":23,"id":165,"name":166,"slug":166},"019e702c-50d7-74eb-8849-8b1cebcf411e","orchestration",{"content":168,"createdAt":169,"id":170,"image":171,"isAffiliate":10,"isPublished":10,"publishedAt":172,"slug":173,"sourceId":13,"sourceName":14,"sourceType":15,"summary":174,"title":175,"updatedAt":176,"url":177,"urlHash":178,"tags":179},"Vite 8 replaced both esbuild and Rollup with Rolldown. Here's what that means for your Vue project in practice.","2026-05-27T12:00:00.450Z","019e694e-4fa0-7469-bfd2-3f6ebe3d830f","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FS7YSA0njipizzfbLK8yznLoWH5klbT1gMA2tMFUO.png","2026-05-27T06:00:00.000Z","rolldown-and-vite-8-what-changed","Vite 8 introduces Rolldown, replacing esbuild and Rollup, which significantly impacts Vue projects. This change aims to enhance performance and streamline the build process for developers using Vite with Vue.","Rolldown and Vite 8: What Changed","2026-05-27T12:00:17.146Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Frolldown-and-vite-8-what-changed?friend=MOKKAPPS","59ea330c63cf36f923ea96c371f9b4a320dc0b74e1159db9b6080693f9bb0af8",[180,183,184],{"color":23,"id":181,"name":182,"slug":182},"019d9cf0-c9f8-7411-beed-02265d8271db","vite",{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":81,"name":82,"slug":82},{"content":186,"createdAt":187,"id":188,"image":189,"isAffiliate":37,"isPublished":10,"publishedAt":190,"slug":191,"sourceId":65,"sourceName":66,"sourceType":42,"summary":192,"title":193,"updatedAt":194,"url":195,"urlHash":196,"tags":197},"When building Vue applications, performance usually feels great by default - Vue’s reactivity system is incredibly efficient. But as applications grow larger, you may eventually run into situations where: components re-render too often large lists become expensive UI updates feel sluggish unnecessary computations happen repeatedly This is where memoization becomes useful. And in Vue, one of the easiest ways to optimize rendering is with v-memo. In this article, we’ll explore: What memoization is What problem it solves How v-memo works in Vue Real-world examples Best practices and common mistakes Let’s dive in. 🤔 What Is Memoization? Memoization is an optimization technique where results are cached and reused instead of recalculating them again. Instead of: recomputing re-rendering recalculating You simply use the cached version. 🟢 What Problem Does Memoization Solve? In reactive applications, updates can trigger many re-renders even when most data has not changed for example: Parent component updates Entire list re-renders Hundreds of child components update unnecessarily This can hurt performance, responsiveness, and even battery usage on mobile devices. Without memoization every update causes new rendering work - even for unchanged content. With memoization Vue can skip rendering when dependencies stay the same which reduces DOM operations, Virtual DOM diffing, and in general component work. 🟢 What Is v-memo in Vue? v-memo is a Vue directive that memoizes part of a template. Basic example: <div v-memo=\"[value]\"> {{ expensiveContent }} <\u002Fdiv> Vue will only re-render this block when value changes. Otherwise Vue reuses the previous rendered result. Let’s imagine a large user list. Without v-memo <script setup lang=\"ts\"> const users = ref([ { id: 1, name: 'John' }, { id: 2, name: 'Alice' } ]) const counter = ref(0) <\u002Fscript> <template> <button @click=\"counter++\"> {{ counter }} <\u002Fbutton> <div v-for=\"user in users\" :key=\"user.id\" > {{ user.name }} <\u002Fdiv> <\u002Ftemplate> Every counter update re-renders the whole list even though users never changed. With v-memo we can: <script setup lang=\"ts\"> const users = ref([ { id: 1, name: 'John' }, { id: 2, name: 'Alice' } ]) const counter = ref(0) <\u002Fscript> <template> <button @click=\"counter++\"> {{ counter }} <\u002Fbutton> <div v-for=\"user in users\" :key=\"user.id\" v-memo=\"[user.id]\" > {{ user.name }} <\u002Fdiv> <\u002Ftemplate> And now counter updates still happen but unchanged list items are skipped. This becomes extremely valuable for large lists, dashboards, or tables. 🟢 When NOT to Use It v-memo is not needed everywhere as Vue is already highly optimized. Avoid using it for tiny components, static content, or premature optimization as overusing memoization can: reduce readability make debugging harder introduce stale UI bugs 🧪 Best Practices Use v-memo only for measurable bottlenecks Great for large dynamic lists Keep dependency arrays minimal Avoid premature optimization Profile performance before optimizing Combine with virtual scrolling for huge datasets Prefer stable keys and predictable state updates 📖 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 Memoization is a powerful optimization technique that helps avoid unnecessary work. In this article, you learned: What memoization is What problem it solves How Vue’s v-memo works Practical examples for lists and components When to use it — and when not to Take care! And happy coding as always 🖥️","2026-05-18T12:00:05.150Z","019e3af5-2608-71df-9da8-92a67430a7ef","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7b8usfxc7u7injpn8yor.png","2026-05-18T09:21:34.000Z","avoid-unnecessary-re-renders-in-vue-with-v-memo","This article discusses the use of the `v-memo` directive in Vue to optimize rendering by memoizing parts of a template, which helps avoid unnecessary re-renders, especially in large applications. It explains the concept of memoization, its benefits, and provides examples and best practices for effective use in Vue components.","Avoid Unnecessary Re-renders in Vue with `v-memo`","2026-06-10T14:35:13.762Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Favoid-unnecessary-re-renders-in-vue-with-v-memo-49bo","15f62df5f7c0b28470c39c37cedc4db4537ead55e3c1365af313657060bac4f8",[198,199,200,203,206],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":81,"name":82,"slug":82},{"color":23,"id":201,"name":202,"slug":202},"019e3af5-4a29-759a-81b0-b6d502b2449e","v-memo",{"color":23,"id":204,"name":205,"slug":205},"019e3af5-4a35-705c-8ab1-4404b653e0e8","optimization",{"color":23,"id":142,"name":143,"slug":143},{"content":208,"createdAt":209,"id":210,"image":211,"isAffiliate":37,"isPublished":10,"publishedAt":212,"slug":213,"sourceId":214,"sourceName":215,"sourceType":42,"summary":216,"title":217,"updatedAt":218,"url":219,"urlHash":220,"tags":221},"Understand the key distinction between useFetch and event.$fetch in Nuxt. Learn why using event.$fetch for server-side API calls is the recommended approach for better performance and SSR correctness.","2026-05-16T18:48:35.150Z","019e321e-6c32-75c9-b0a0-2ba5b5c9f791","https:\u002F\u002Fmokkapps.twic.pics\u002Fmokkapps.de\u002Fvue-tips\u002Fdifference-between-use-fetch-and-event-fetch-in-nuxt\u002Fog.png","2026-05-16T00:00:00.000Z","nuxt-tip-difference-between-usefetch-and-eventfetch","019d6bd5-57e0-742c-8de2-c0a3a1f49b60","Michael Hoffmann","This article explains the difference between useFetch and event.$fetch in Nuxt, highlighting that event.$fetch is preferred for server-side API calls due to its advantages in performance and SSR correctness.","Nuxt Tip: Difference Between useFetch and event.$fetch","2026-05-16T18:48:40.681Z","https:\u002F\u002Fmokkapps.de\u002Fvue-tips\u002Fdifference-between-use-fetch-and-event-fetch","0880d118888dfef0df3d7ab0fd12fa6cc04b0dec3263b3d9d33fd049fce7ac56",[222,223,224,227],{"color":23,"id":50,"name":51,"slug":51},{"color":23,"id":115,"name":116,"slug":116},{"color":23,"id":225,"name":226,"slug":226},"019d6bd8-fb46-77ef-a3b6-bd2d30ab8919","api",{"color":23,"id":81,"name":82,"slug":82},{"content":229,"createdAt":230,"id":231,"image":232,"isAffiliate":10,"isPublished":10,"publishedAt":233,"slug":234,"sourceId":235,"sourceName":236,"sourceType":237,"summary":238,"title":239,"updatedAt":240,"url":241,"urlHash":242,"tags":243},"This entry is part 1 of 2 in the series Vue Component DesignGuess what!? We’ve just published a new course all about component design patterns in Vue.js. It’s sure to improve your Vue codebase with battle-tested patterns for scalability and maintainability. We created the course primarily for beginners to help them up their component development skills, but even more learned Vue devs might find a new pattern or two. Go checkout the course now or keep reading for an overview of some of the patterns discussed in the videos. 1. The Branching Component Design Pattern Extract complex conditional rendering into separate components. Instead of multiple v-if branches in one component, create dedicated components for each state. The resulting code is easier to read and maintain over time. <!-- Before --> <template> <div> <div v-if="loading">Loading...<\u002Fdiv> <div v-else-if="error">Error: {{ error }}<\u002Fdiv> <div v-else> <!-- Complex content --> <\u002Fdiv> <\u002Fdiv> <\u002Ftemplate> <!-- After --> <template> <div> <LoadingState v-if="loading" \u002F> <ErrorState v-else-if="error" :message="error" \u002F> <ContentState v-else :data="data" \u002F> <\u002Fdiv> <\u002Ftemplate> 2. Slots and Template Props Design Pattern Whenever you have a prop that gets passed directly to the template, that’s a good sign you should be using a slot instead. Why? They serve the same purpose, but the slot allows more flexibility. <!-- AppButton.vue --> <!--Before--> <script setup> defineProps({ label: { type: String, default: "Click Me" } }) <\u002Fscript> <template> <button class="btn"> <!-- the label makes a beeline to the template and makes no stops along the way--> {{ label }} <\u002Fbutton> <\u002Ftemplate> <!--After--> <template> <button class="btn"> <!-- ahh, that's better now we can pass in markup, icons, components whatever--> <slot><\u002Fslot> <\u002Fbutton> <\u002Ftemplate> Thanks Michael Thiessen for this wonderful pattern and a memorable name to boot! 3. List with ListItem Component Pattern Separate list logic and item display into distinct components. This allows for bundling up list empty state, content, controls, and more into a contained List component. Extracting each item in the list to it’s own ListItem component, makes the List component easy to read, and provides more focus when developing and styling each item. <!-- UsersList.vue --> <script setup> const props = defineProps({ users: { type: Array, required: true } }); const filter = ref("") const filteredUsers = computed(()=>{ \u002F\u002F filter logic here }) <\u002Fscript> <template> <div> <!-- List Controls --> <UserFilters v-model="filter" \u002F> <!-- List Content --> <ul v-if="filteredUsers.length"> <!-- items extracted to their own component (see below) --> <UserListItem v-for="user in filteredUsers" :key="user.id" :user="user" \u002F> <\u002Ful> <!-- Empty State--> <EmptyState v-else message="No users found" \u002F> <\u002Fdiv> <\u002Ftemplate> <!-- UserListItem.vue --> <script setup> defineProps({ user: { type: Object, required: true } }) <\u002Fscript> <template> <li class="user-item"> <img :src="user.avatar" \u002F> <span>{{ user.name }}<\u002Fspan> <\u002Fli> <\u002Ftemplate> 4. Smart vs Dumb Components Pattern Separate data handling from presentation. Smart components manage logic and data fetching, dumb components simply take in props to handle display. Furthermore, base components provide the fundamental building blocks of your application (such as cards, buttons, etc) and by convention start with v, base, or app. <!-- Smart Component --> <script setup> import { ref } from 'vue' const users = ref([]) const loading = ref(true) async function fetchUsers() { users.value = await api.getUsers() loading.value = false } function createUser(){ \u002F\u002F open modal to create user or whatever } <\u002Fscript> <template> <AppButton @click="createUser" >Create User<\u002FAppButton> <UserList :users="users" :loading="loading" \u002F> <\u002Ftemplate> <!-- Dumb Component --> <script setup> defineProps({ users: Array, loading: Boolean }) <\u002Fscript> <template> <div class="user-list"> <!-- Pure presentation logic --> <\u002Fdiv> <\u002Ftemplate> 5. Form Component Design Pattern v-model on native input fields is awesome! We can do similar with whole forms. This approach accounts for the way users interact with forms: they expect committed data only after click of submit. It also works like a charm with native input validation as the submit event never fires until native validation passes. <script setup> \u002F\u002F support v-model const user = defineModel() \u002F\u002F clone the modelValue to local data \u002F\u002F and provide a fallback user if none provided const form = ref(clone(user) || { name: '', emaill: '' }) \u002F\u002F only update the modelValue when the form is submitted function handleSubmit() { user.value = clone(form.value); } \u002F\u002F Reset form when prop changes watch(user, () => form.value = clone(user.value)) const clone = (obj)=> JSON.parse(JSON.stringify(obj)) <\u002Fscript> <template> <form @submit.prevent="handleSubmit"> <!-- Bind the form inputs to the local data instead of the modelValue --> <input v-model="form.name" required\u002F> <input v-model="form.email" \u002F> <!-- Bonus! You can even have dynamic submit button labels based on the modelValue passed in--> <button type="submit"> {{ user ? 'Update' : 'Create' }} User <\u002Fbutton> <\u002Fform> <\u002Ftemplate> Looking for More Patterns? We cover all these patterns discussed above in more detail in our course: Vue Component Design. Plus get a preview of some more advanced patterns like the Tightly Coupled Components Pattern, Recursive Components, and Lazy Dynamic Components. Besides our own course, Michael Thiessen’s Clean Components Toolkit is a great resource for further exploring not only component patterns but also patterns for stores, composables, and more.","2026-05-14T12:00:11.684Z","019e265b-cf92-75c7-bb8d-65f5cb9a819d","https:\u002F\u002Fblog.vueschool.io\u002Fwp-content\u002Fuploads\u002F2024\u002F12\u002FVS_5-Component-Design-Patterns-to-Boost-Your-Vue.js-Applications-1.png","2026-05-14T08:00:26.000Z","5-component-design-patterns-to-boost-your-vuejs-applications","019d6bd5-87de-77ef-ac92-98aa56cda920","VueSchool","vueschool","This article introduces a new course focused on component design patterns in Vue.js, aimed at enhancing scalability and maintainability of Vue applications. It outlines several design patterns, such as the Branching Component Design Pattern and the use of slots, which can help developers improve their code structure and readability.","5 Component Design Patterns to Boost Your Vue.js Applications","2026-05-14T12:00:21.296Z","https:\u002F\u002Fblog.vueschool.io\u002Fvuejs-tutorials\u002F5-component-design-patterns-to-boost-your-vue-js-applications\u002F?friend=MOKKAPPS","998659ef4f9a67af7ef263b481fc23eaa61736efd82e77946c3a11812701ff78",[244,245,248,251,254],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":246,"name":247,"slug":247},"019e265b-f569-71d8-a02a-a17ec8180644","component-design",{"color":23,"id":249,"name":250,"slug":250},"019e265b-f571-7677-a537-2f7e96a490bf","scalability",{"color":23,"id":252,"name":253,"slug":253},"019e265b-f579-71cd-84b2-ac385b5225ae","maintainability",{"color":23,"id":142,"name":143,"slug":143},{"content":256,"createdAt":257,"id":258,"image":259,"isAffiliate":37,"isPublished":10,"publishedAt":260,"slug":261,"sourceId":65,"sourceName":66,"sourceType":42,"summary":262,"title":263,"updatedAt":264,"url":265,"urlHash":266,"tags":267},"When developers think about performance optimization, they usually focus on things like: lazy loading caching image optimization bundle size And while those things absolutely matter there’s another area that heavily impacts user experience -> Loading states and layout stability. A badly implemented loading experience can make an app feel slow, jumpy, or frustrating to use. This is strongly connected to an important Core Web Vital metric Cumulative Layout Shift (CLS). In this article, we’ll explore: What CLS is Why loaders are critical for perceived performance How poor loading states hurt UX Practical examples in Vue Best practices for stable layouts Let’s dive in. 🤔 What Is Cumulative Layout Shift (CLS)? CLS measures how much elements unexpectedly move during page loading. Example of bad CLS: Text suddenly jumps down Buttons move while you try to click Images appear late and push content around We’ve all experienced websites like this: 👉 You try to click something… and suddenly the layout shifts. Extremely annoying. Why does this happen? Usually because: content loads asynchronously elements have no reserved space loaders are missing images don’t define dimensions components suddenly appear Why does CLS matter? Because it affects user experience, accessibility, or mobile usability (and obviously Google Core Web Vitals). Even if your app is technically fast poor layout stability can make it feel slow. 👉 Users care more about perceived performance than actual milliseconds. A good loader communicates progress, prevents layout jumping, and makes apps feel responsive A bad or missing loader creates uncertainty. Users start thinking: “Did the app freeze?” “Is something broken?” “Why is everything moving?” 🟢 Implementing proper loaders in Vue Let's take a look at the following example: <script setup lang=\"ts\"> const users = ref([]) const loading = ref(true) onMounted(async () => { users.value = await fetchUsers() loading.value = false }) <\u002Fscript> <template> <div v-if=\"loading\" class=\"skeleton-list\"> <div v-for=\"n in 5\" :key=\"n\" class=\"skeleton-card\" \u002F> <\u002Fdiv> <UserCard v-else v-for=\"user in users\" :key=\"user.id\" :user=\"user\" \u002F> <\u002Ftemplate> <style scoped> .skeleton-card { height: 120px; border-radius: 12px; margin-bottom: 16px; } <\u002Fstyle> We fetch users, but when the fetch is in progress we display the same hard coded number of loaders\u002Fskeletons. When the users are loaded there is no layout shift as it occupies the same space improving perceived performance and User Experience. If we don't know how many results there will be, we have to assume some number but it is still better than not having skeletons at all :) Many apps still use simple spinners or text\u002Ficon loaders like: <div>Loading...<\u002Fdiv> But modern UX usually prefers Skeleton loaders because they mimic final layout, reduce layout shift, and improve perceived speed. 🧪 Best Practices Prefer skeleton loaders over tiny spinners Reserve space before content loads Keep loading and final layouts similar Always define image dimensions Avoid injecting large content suddenly Test CLS using Lighthouse or Core Web Vitals tools Think about perceived performance — not just raw speed 📖 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 Loaders are much more important than most developers realize. In this article, you learned: What Cumulative Layout Shift (CLS) is Why poor loading states hurt UX How skeleton loaders improve perceived performance How to avoid layout jumping in Vue and other frameworks Best practices for stable, responsive interfaces Fast apps are great. But apps that feel smooth and stable are what users truly remember. Take care! And happy coding as always 🖥️","2026-05-11T12:00:12.770Z","019e16e8-bfd2-7191-94bc-00d70b24a540","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbym0bvla6v4jibn66jc3.png","2026-05-11T09:29:43.000Z","why-loaders-matter-for-performance","This article discusses the importance of loaders in enhancing perceived performance and user experience in web applications, particularly focusing on the concept of Cumulative Layout Shift (CLS). It highlights how proper implementation of loaders in Vue can prevent layout shifts and improve user engagement by providing a stable loading experience. The article also offers practical examples and best practices for implementing effective loaders.","Why Loaders Matter for Performance","2026-06-10T14:35:13.764Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fwhy-loaders-matter-for-performance-4b8a","d90fb6c45448cd6496f59658878a5381e26f71ac1b914ec7c7c4c29bf64f2c6e",[268,269,270,273,276],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":81,"name":82,"slug":82},{"color":23,"id":271,"name":272,"slug":272},"019e16e8-dbfa-76d6-bb2d-793aee049186","loading",{"color":23,"id":274,"name":275,"slug":275},"019e16e8-dc00-714d-911a-a5bf39238587","user-experience",{"color":23,"id":277,"name":278,"slug":278},"019d6bd9-010e-772d-b2f0-9378a042a676","best-practices",{"content":280,"createdAt":281,"id":282,"image":283,"isAffiliate":10,"isPublished":10,"publishedAt":284,"slug":285,"sourceId":13,"sourceName":14,"sourceType":15,"summary":286,"title":287,"updatedAt":288,"url":289,"urlHash":290,"tags":291},"Using Nuxt vs Not Using Nuxt: A side-by-side comparison of building the same features in plain Vue and Nuxt, so you can see exactly what the framework gives you.","2026-05-06T16:00:00.560Z","019dfe04-7e11-74b9-afab-712f6aaea36a","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FovVwybvutSj93lna8vUfweBOvwB1Yc7UKfb9c15V.png","2026-05-06T06:00:00.000Z","is-nuxt-something-for-me","This article compares building features in plain Vue versus using Nuxt, highlighting the advantages and capabilities that Nuxt offers as a framework. It aims to help readers determine if Nuxt is the right choice for their projects.","Is Nuxt something for “me”?","2026-05-06T16:00:17.061Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fis-nuxt-something-for-me?friend=MOKKAPPS","d6c054e0717f4acd9f0eb26b42e043780f93b554aa376883a550c004f244aff1",[292,293,294,297],{"color":23,"id":50,"name":51,"slug":51},{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":295,"name":296,"slug":296},"019dfe04-bee8-7384-bc58-a712f677807c","comparison",{"color":23,"id":298,"name":299,"slug":299},"019dfe04-beee-7481-b8e7-4034640e840a","frameworks",{"content":301,"createdAt":302,"id":303,"image":304,"isAffiliate":37,"isPublished":10,"publishedAt":305,"slug":306,"sourceId":307,"sourceName":308,"sourceType":309,"summary":310,"title":311,"updatedAt":312,"url":313,"urlHash":314,"tags":315},"KNIME has spent years evolving a large Java-based desktop application, used by 300k users in 60 countries, into a modern web ...","2026-05-05T12:00:07.304Z","019df802-8278-7658-be80-e86a602f62cf","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F2-O08Aw1KeM\u002Fhqdefault.jpg","2026-05-05T10:00:27.000Z","jakob-schröter-helian-rivera---from-desktop-to-web-rebuilding-our-data-science-platform-with-vue-amp","019d9ce0-e8f2-774a-ba57-a61c19469fe1","Vuejs Amsterdam","youtube","KNIME is transitioning its extensive Java-based desktop application into a modern web platform using Vue, aiming to enhance accessibility and user experience for its 300,000 users worldwide. This shift represents a significant evolution in their data science tools, leveraging the capabilities of Vue for a more interactive web experience.","Jakob Schröter, Helian Rivera - From Desktop to Web Rebuilding our Data Science Platform with Vue &","2026-05-05T12:00:17.036Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=2-O08Aw1KeM","e79377eef86b6335999a27910ae97e018c8e28360509f8764b7afb54c83ee304",[316,317,320],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":318,"name":319,"slug":319},"019df802-a8b6-74d2-a0cd-b0509cf502fa","web-development",{"color":23,"id":321,"name":322,"slug":322},"019df802-a8bb-775a-b843-93d883c7dfc5","data-science",{"content":324,"createdAt":325,"id":326,"image":327,"isAffiliate":37,"isPublished":10,"publishedAt":328,"slug":329,"sourceId":307,"sourceName":308,"sourceType":309,"summary":330,"title":331,"updatedAt":332,"url":333,"urlHash":334,"tags":335},"The Model Context Protocol (MCP), and, therefore, MCP servers, are being increasingly used to integrate AI capabilities into ...","2026-05-03T12:00:07.340Z","019dedb5-ca95-740b-aa53-523499fbd77f","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002Fee6EoOpq8s8\u002Fhqdefault.jpg","2026-05-03T10:00:06.000Z","elise-patrikainen---how-to-build-an-mcp-server-for-vue","Elise Patrikainen discusses the integration of AI capabilities into Vue applications through the Model Context Protocol (MCP) and provides insights on building an MCP server specifically for Vue. This article highlights the growing relevance of MCP in enhancing Vue's functionality with AI features.","Elise Patrikainen - How to build an MCP server for Vue?","2026-05-03T12:00:17.253Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=ee6EoOpq8s8","bc24e54d8b8c8eecbc59213aaa83bd2de58bf0ffe8c8af7a3677072fb4525846",[336,337,338],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":225,"name":226,"slug":226},{"color":23,"id":339,"name":340,"slug":340},"019d9cf0-ca04-75bb-ad86-ce8da1c0be23","architecture",{"content":342,"createdAt":343,"id":344,"image":345,"isAffiliate":37,"isPublished":10,"publishedAt":346,"slug":347,"sourceId":307,"sourceName":308,"sourceType":309,"summary":348,"title":349,"updatedAt":350,"url":351,"urlHash":352,"tags":353},"Even experienced developers fall into common traps when working with Nuxt and Vue. In this talk, we'll explore performance ...","2026-05-02T12:00:07.346Z","019de88f-6ea2-70a9-9b59-ed5b77339c68","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FNZn_YY2wCZI\u002Fhqdefault.jpg","2026-05-02T10:00:06.000Z","julien-huang---stop-making-these-nuxt-amp-vue-mistakes-introducing-nuxthints-10","Julien Huang discusses common mistakes developers make while using Nuxt and Vue, introducing the @nuxt\u002Fhints 1.0 tool to help avoid these pitfalls and improve performance. The talk aims to enhance the development experience by addressing frequent issues faced by both new and seasoned developers.","Julien Huang - Stop making these Nuxt & Vue mistakes: introducing @nuxt\u002Fhints 1.0","2026-05-02T12:00:23.318Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=NZn_YY2wCZI","d468b007f85431c35301d8f1481694bdff471425503175fdc5c8ccd2d48bb322",[354,355,356,357],{"color":23,"id":50,"name":51,"slug":51},{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":81,"name":82,"slug":82},{"color":23,"id":142,"name":143,"slug":143},{"content":359,"createdAt":360,"id":361,"image":362,"isAffiliate":37,"isPublished":10,"publishedAt":363,"slug":364,"sourceId":307,"sourceName":308,"sourceType":309,"summary":365,"title":366,"updatedAt":367,"url":368,"urlHash":369,"tags":370},"Tree-shaking is widely regarded as a performance optimization technique in the Vue and Nuxt ecosystem—but have you ever ...","2026-05-01T12:00:08.125Z","019de369-15ab-754a-8e04-da461cb7068b","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FYXG514QueOc\u002Fhqdefault.jpg","2026-05-01T10:00:06.000Z","serko-vincent-ngai---when-tree-shaking-fails-security-risks-in-nuxt-amp-vue","The article discusses the security risks associated with tree shaking in the Vue and Nuxt frameworks, highlighting potential vulnerabilities that can arise when this optimization technique fails. It emphasizes the importance of understanding these risks to maintain secure applications.","SerKo Vincent Ngai - When Tree Shaking Fails: Security Risks in Nuxt & Vue","2026-05-01T12:00:16.190Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=YXG514QueOc","305f1c090af38f6fa7ea715fff88cec084c05ba031f23220f80d6639a9a0f86a",[371,372,373,376],{"color":23,"id":50,"name":51,"slug":51},{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":374,"name":375,"slug":375},"019dcdf3-fc84-73aa-a0be-6b7196c5a2e9","security",{"color":23,"id":81,"name":82,"slug":82},{"content":84,"createdAt":378,"id":379,"image":380,"isAffiliate":37,"isPublished":10,"publishedAt":381,"slug":382,"sourceId":307,"sourceName":308,"sourceType":309,"summary":383,"title":384,"updatedAt":385,"url":386,"urlHash":387,"tags":388},"2026-04-30T12:00:02.889Z","019dde42-a535-7402-94ba-a1dfc1f9ac89","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FMMQl0HiNV8w\u002Fhqdefault.jpg","2026-04-30T10:00:06.000Z","reza-bar---reactivity-in-vue-thinking-in-signals","The article discusses the concept of reactivity in Vue.js, focusing on the use of signals as a way to manage state and reactivity in applications. It explores how signals can enhance the reactivity model in Vue, providing a new perspective on state management.","Reza Bar - Reactivity in Vue Thinking in Signals","2026-04-30T12:00:11.580Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=MMQl0HiNV8w","14abc936dca2f0684fdef3675153a32f57853fa196ea1fa4363eeedb905571eb",[389,390,391],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":138,"name":139,"slug":139},{"color":23,"id":392,"name":393,"slug":393},"019da076-78fb-706b-9a4c-cee0c989cfff","state-management",{"content":395,"createdAt":396,"id":397,"image":398,"isAffiliate":37,"isPublished":10,"publishedAt":399,"slug":400,"sourceId":307,"sourceName":308,"sourceType":309,"summary":401,"title":402,"updatedAt":403,"url":404,"urlHash":405,"tags":406},"For many developers, learning about security in Vue can sound intimidating or boring. This session is designed to flip that ...","2026-04-29T12:00:01.783Z","019dd91c-44e3-71bc-8fb7-b1a6f1b7e5d0","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002Fy752-F2vWvk\u002Fhqdefault.jpg","2026-04-29T10:00:06.000Z","ramona-schwering-vue-tiful-defense-let39s-draw-security","This article discusses a session aimed at making security in Vue more engaging and accessible for developers. It emphasizes the importance of understanding security practices in Vue applications.","Ramona Schwering   Vue tiful Defense Let's draw Security","2026-04-29T12:00:12.310Z","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=y752-F2vWvk","52ac6b29860f72ca87b5c2c480e623dc245f8606ea2b094d4fbd10ce273c96b9",[407,408],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":374,"name":375,"slug":375},{"content":410,"createdAt":411,"id":412,"image":413,"isAffiliate":10,"isPublished":10,"publishedAt":414,"slug":415,"sourceId":13,"sourceName":14,"sourceType":15,"summary":416,"title":417,"updatedAt":418,"url":419,"urlHash":420,"tags":421},"Using Vue plainly or adding Nuxt to it:  side-by-side comparison of building the same features in plain Vue and Nuxt, so you can see exactly what the framework gives you.","2026-04-30T04:18:53.710Z","019ddc9c-727b-76e6-bbe9-2e57c4783354","https:\u002F\u002Fapi.certificates.dev\u002Fstorage\u002FHnWHeIb9HLni5mNy5Zx4DoLdS9NquZGL4xFDyMR4.png","2026-04-29T06:00:00.000Z","plain-vue-or-going-meta","This article provides a side-by-side comparison of building features using plain Vue versus using Nuxt, highlighting the advantages and additional capabilities that Nuxt offers. It aims to help developers decide whether to use Vue alone or to incorporate Nuxt for their projects.","Plain Vue or going Meta?","2026-04-30T04:19:02.039Z","https:\u002F\u002Fcertificates.dev\u002Fblog\u002Fplain-vue-or-going-meta?friend=MOKKAPPS","fc38b56c8a637ec563a6ea40daeaf83218a14d09ff989566709fcabc9fd085c2",[422,423,424],{"color":23,"id":24,"name":25,"slug":25},{"color":23,"id":50,"name":51,"slug":51},{"color":23,"id":142,"name":143,"slug":143},2,20,61]