DEV Community: Parsa Jiravand

Vue & Nuxt Performance in 2026: The Complete Guide

Parsa Jiravand — Thu, 02 Apr 2026 09:48:08 +0000

shallowRef, error boundaries, CLS fixes, layout shift, and every trick that actually moves the needle.

Who This Is For

You're building with Vue 3 + Nuxt 4 and your app works — but Lighthouse isn't happy, users feel the jank, and you've run out of obvious things to fix. This guide goes beyond "add v-memo and call it a day." We'll cover reactivity tuning, rendering strategy, layout stability, Core Web Vitals, and Nuxt-specific patterns that most tutorials skip.

1. Reactivity: Use the Right Primitive

Vue's reactivity system is powerful but easy to misuse. Choosing the wrong primitive is the #1 hidden performance killer.

`shallowRef` — Your New Best Friend

ref() makes every nested property deeply reactive. For large objects or arrays you don't need to observe deeply, this is expensive.

import { shallowRef, triggerRef } from 'vue'

// Bad — deep reactivity on a 500-item list
const products = ref(hugeProductArray)

// Good — only the top-level reference is tracked
const products = shallowRef(hugeProductArray)

// To trigger an update after mutating internals:
products.value.push(newProduct)
triggerRef(products)

When to use shallowRef:

Large arrays or lists (50+ items)
External data objects you don't mutate deeply
Chart/canvas data you replace wholesale

`shallowReactive` for Objects

import { shallowReactive } from 'vue'

// Only top-level keys are reactive
const state = shallowReactive({
  user: { name: 'Ali', preferences: { theme: 'dark' } },
  count: 0
})

// state.count triggers updates ✓
// state.user.name does NOT trigger updates — intentional

`markRaw` — Opt Out of Reactivity Entirely

Libraries like chart instances, map objects, or Three.js scenes should never be reactive.

import { ref, markRaw } from 'vue'
import mapboxgl from 'mapbox-gl'

const mapInstance = ref(markRaw(new mapboxgl.Map({ ... })))

Without markRaw, Vue walks the entire Mapbox object trying to make it reactive — causing massive overhead.

Computed vs Watchers

// Bad — watcher that derives state
const fullName = ref('')
watch([firstName, lastName], () => {
  fullName.value = `${firstName.value} ${lastName.value}`
})

// Good — computed is lazy and cached automatically
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

Computed values are only re-evaluated when their dependencies change AND when they are actually read. Watchers run eagerly. Prefer computed for derived values, always.

2. Component Rendering: Be Strategic

`v-memo` — Skip Re-renders for List Items

<div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
  <!-- Only re-renders when item.id or item.selected changes -->
  <ExpensiveItemCard :item="item" />
</div>

v-memo short-circuits the VDOM diff for that subtree. Use it on list items that have expensive child trees and rarely change.

`defineAsyncComponent` — Split by Component, Not Just Route

import { defineAsyncComponent } from 'vue'

// This entire subtree is lazy-loaded only when needed
const HeavyDataTable = defineAsyncComponent({
  loader: () => import('./HeavyDataTable.vue'),
  loadingComponent: SkeletonTable,
  errorComponent: ErrorState,
  delay: 200,       // show loading only after 200ms (avoids flash)
  timeout: 5000
})

`v-once` for Truly Static Content

<!-- Rendered once, then treated as static HTML — zero reactivity overhead -->
<footer v-once>
  <LegalText />
  <SupportLinks />
</footer>

Functional Components for Pure UI

// No instance, no reactivity overhead — pure transform of props to DOM
const Badge = (props: { label: string; variant: string }) => (
  <span class={`badge badge-${props.variant}`}>{props.label}</span>
)

Use for small, stateless UI elements rendered many times.

3. Nuxt 4 Patterns That Actually Help

Error Boundaries with `<NuxtErrorBoundary>`

Stop letting one failing component crash your entire page.

<template>
  <div>
    <HeroSection />

    <NuxtErrorBoundary @error="logError">
      <template #default>
        <ComplexDashboardWidget />
      </template>
      <template #error="{ error, clearError }">
        <div class="error-card">
          <p>Widget failed to load.</p>
          <button @click="clearError">Retry</button>
        </div>
      </template>
    </NuxtErrorBoundary>

    <Footer />
  </div>
</template>

<script setup>
function logError(error) {
  console.error('[Widget error]', error)
  // send to your error tracking service
}
</script>

Each <NuxtErrorBoundary> isolates failures. The rest of your page keeps working.

Rendering Modes Per Route

Nuxt 4 lets you set rendering strategy per route in nuxt.config.ts:

export default defineNuxtConfig({
  routeRules: {
    '/':              { prerender: true },       // static, fastest
    '/blog/**':       { isr: 3600 },             // ISR: revalidate hourly
    '/dashboard/**':  { ssr: false },            // SPA: client-only
    '/api/**':        { cors: true, cache: { maxAge: 60 } }
  }
})

This is Nuxt's hybrid rendering. Use it aggressively — not every route needs SSR.

`useLazyFetch` and `useLazyAsyncData`

Don't block navigation for non-critical data:

// Blocks navigation until data is ready — use for critical above-fold content
const { data: hero } = await useFetch('/api/hero')

// Does NOT block — page loads immediately, data fills in
const { data: recommendations, pending } = useLazyFetch('/api/recommendations')

<template>
  <RecommendationGrid v-if="!pending" :items="recommendations" />
  <RecommendationSkeleton v-else />
</template>

`useAsyncData` Deduplication and Keys

// Both components share ONE request — not two
// Key must be unique and stable
const { data } = await useAsyncData('user-profile', () => $fetch('/api/me'))

If two components on the same page call useAsyncData with the same key, Nuxt deduplicates the fetch automatically.

Payload Extraction to Avoid Hydration Waterfalls

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true  // extracts server data to _payload.json
  }
})

This prevents the client from re-fetching data that was already fetched during SSR, eliminating a full waterfall on first load.

4. Core Web Vitals: Fix the Metrics That Matter

CLS (Cumulative Layout Shift) — The Jank Killer

CLS measures how much your page shifts after load. Target: below 0.1.

The most common culprits:

Images without dimensions:

<!-- Bad — browser doesn't know how tall this is until it loads -->
<img src="/hero.jpg" alt="Hero" />

<!-- Good — browser reserves space immediately -->
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />

Or with Nuxt Image:

<NuxtImg
  src="/hero.jpg"
  width="1200"
  height="600"
  placeholder
  loading="lazy"
/>

Dynamic content injecting above existing content:

<!-- Bad — banner loads late and pushes content down -->
<PromoBanner v-if="bannerLoaded" />
<MainContent />

<!-- Good — reserve space for the banner -->
<div style="min-height: 60px;">
  <PromoBanner v-if="bannerLoaded" />
</div>
<MainContent />

Web fonts causing FOUT/FOIT:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        {
          rel: 'preload',
          as: 'font',
          type: 'font/woff2',
          href: '/fonts/Inter.woff2',
          crossorigin: 'anonymous'
        }
      ]
    }
  }
})

And in your CSS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: optional; /* prevents layout shift — no FOUT */
}

font-display: optional is the most aggressive CLS fix. The browser uses the fallback font if the custom font isn't ready within a small window — no shift, ever.

LCP (Largest Contentful Paint) — Speed Up the Hero

LCP is the render time of your largest above-fold element. Target: under 2.5s.

Preload your hero image:

<Head>
  <Link
    rel="preload"
    as="image"
    href="/hero.webp"
    fetchpriority="high"
  />
</Head>

Use fetchpriority on the hero <img>:

<NuxtImg
  src="/hero.webp"
  fetchpriority="high"
  loading="eager"
  width="1200"
  height="600"
/>

Avoid lazy-loading above-fold images. loading="lazy" on your hero is a common mistake — it tells the browser to wait before fetching the most important image.

INP (Interaction to Next Paint) — Kill the Input Delay

INP replaced FID in 2024. It measures responsiveness across all interactions. Target: under 200ms.

Defer non-critical work:

import { nextTick } from 'vue'

async function handleHeavyClick() {
  // Update UI immediately
  isLoading.value = true
  await nextTick()

  // Then do the heavy work
  await processLargeDataset()
  isLoading.value = false
}

Use useThrottleFn and useDebounceFn from VueUse:

import { useThrottleFn, useDebounceFn } from '@vueuse/core'

// Scroll handler — throttled to 60fps
const onScroll = useThrottleFn(() => {
  updateScrollPosition()
}, 16)

// Search input — debounced to avoid hammering the API
const onSearch = useDebounceFn((query: string) => {
  fetchResults(query)
}, 300)

5. Bundle Size: Ship Less

Analyze Your Bundle

npx nuxi analyze

This opens a visual treemap of your bundle. Do this before optimizing — never guess where the weight is.

Auto-imports Are Your Friend

Nuxt 4 auto-imports composables, components, and Vue APIs. Never import them manually:

// Don't do this in Nuxt
import { ref, computed } from 'vue'
import { useFetch } from '#app'

// Nuxt handles it — just use them
const count = ref(0)
const { data } = await useFetch('/api/data')

Auto-imports are tree-shaken automatically — you only ship what you use.

Replace Heavy Libraries

Heavy library	Lightweight alternative
moment.js (67kb)	`date-fns` (tree-shakeable) or `Temporal API`
lodash (72kb)	`lodash-es` (tree-shakeable) or native JS
axios (13kb)	`$fetch` (built into Nuxt, 0kb extra)
animate.css (77kb)	CSS custom properties + `@starting-style`

Dynamic Imports for Large Features

// Don't import chart libraries at the top level
// import { Chart } from 'chart.js' ← loads on every page

// Import only when the component mounts
const { Chart } = await import('chart.js/auto')

6. Image Optimization with Nuxt Image

Install once, benefit everywhere:

npx nuxi module add image

<NuxtImg
  src="/product.jpg"
  width="400"
  height="300"
  format="webp"
  quality="80"
  loading="lazy"
  placeholder
  sizes="sm:100vw md:50vw lg:400px"
/>

What this gives you automatically:

WebP/AVIF conversion
Responsive srcset generation
Lazy loading with placeholder blur
CDN-aware serving (works with Cloudinary, Imgix, Vercel, etc.)

7. Caching Strategy

`useFetch` with Cache Control

const { data } = await useFetch('/api/products', {
  key: 'products-list',
  getCachedData: (key, nuxtApp) => {
    // Return cached data if it exists and is fresh
    return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key]
  }
})

Server-Side Cache Headers

// server/api/products.ts
export default defineEventHandler((event) => {
  setResponseHeaders(event, {
    'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400'
  })
  return getProducts()
})

stale-while-revalidate is the key: the user always gets a fast cached response while the fresh data loads in the background.

8. The Performance Checklist

Reactivity

[ ] Large arrays/objects use shallowRef or shallowReactive
[ ] Third-party instances wrapped in markRaw
[ ] Derived values use computed, not watch + ref
[ ] Static content uses v-once
[ ] Expensive list items use v-memo

Nuxt

[ ] Route rules set per page type (prerender / ISR / SSR / SPA)
[ ] Non-critical fetches use useLazyFetch
[ ] Error boundaries wrap unstable widgets
[ ] payloadExtraction enabled
[ ] nuxi analyze run before shipping

Core Web Vitals

[ ] All images have explicit width + height
[ ] Hero image has fetchpriority="high" and loading="eager"
[ ] Fonts use font-display: optional or swap
[ ] Dynamic content reserves space with min-height
[ ] Heavy event handlers are debounced/throttled

Bundle

[ ] npx nuxi analyze shows no unexpected large dependencies
[ ] moment.js, full lodash, axios replaced with leaner alternatives
[ ] Chart and map libraries dynamically imported
[ ] Images served via Nuxt Image with WebP + responsive sizes

Final Thoughts

Vue and Nuxt give you every tool needed to build extremely fast applications — the patterns exist, they just need deliberate choices. The biggest wins in 2026 come from three places:

Reactivity discipline — shallowRef and markRaw are underused. Most apps pay a reactivity tax on objects that never needed deep observation.

Hybrid rendering — Not every page should SSR. Nuxt's routeRules is one config block that can cut your TTFB dramatically on static and cacheable content.

CLS and LCP are fixable — Almost always caused by missing image dimensions, late-loading fonts, or above-fold lazy loading. These are fast wins.

Profile first with nuxi analyze and Chrome DevTools Performance panel. Then fix what the data shows, not what feels slow.

Found this useful? Follow for more Vue/Nuxt deep dives.

Tags: #vue #nuxt #performance #webdev #javascript

React in 2026: Start From Scratch the Right Way (+ Cheat Sheet)

Parsa Jiravand — Thu, 02 Apr 2026 07:31:12 +0000

A complete guide to modern React — no useEffect abuse, no performance guessing, just clean architecture you'll actually use.

Why This Guide Exists

Most React tutorials are still teaching 2020 patterns. In 2026, the ecosystem has shifted dramatically: React 19 is stable, the compiler handles most memoization automatically, and useEffect should be a last resort — not your go-to for data fetching, derived state, or event responses.

This guide walks you from project setup to production-ready patterns, with a cheat sheet you can bookmark.

1. Scaffolding: What to Use in 2026

If you're building a full-stack or SSR app

npx create-next-app@latest my-app --typescript --tailwind --eslint --app

Next.js 15+ with the App Router is the default for production apps. It gives you Server Components, streaming, and partial pre-rendering out of the box.

If you're building a pure client SPA

npm create vite@latest my-app -- --template react-ts

Vite is the standard bundler for SPAs. Fast HMR, zero config, ESM-first.

If you're building something UI-heavy or a design system

npm create remix@latest

Remix is excellent when you care deeply about progressive enhancement and form handling.

2. Folder Structure (Scalable from Day 1)

src/
├── app/               # Pages / routing (Next.js) or routes/
├── components/
│   ├── ui/            # Generic, reusable UI primitives
│   └── features/      # Feature-specific components
├── hooks/             # Custom hooks
├── lib/               # Utilities, API clients, helpers
├── stores/            # Global state (Zustand, Jotai, etc.)
├── types/             # Shared TypeScript types
└── styles/            # Global CSS / Tailwind config

Rule: Components should not import from pages/ or app/. Data flows down. Side effects live in hooks.

3. React 19 Features You Should Actually Use

`use()` — The New Data Primitive

import { use, Suspense } from 'react';

async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

// In a Server Component or with a cached promise:
function UserCard({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // unwraps the promise
  return <div>{user.name}</div>;
}

// Wrap in Suspense at the boundary
<Suspense fallback={<Skeleton />}>
  <UserCard userPromise={fetchUser('123')} />
</Suspense>

`useOptimistic` — Instant UI, Real Sync

import { useOptimistic } from 'react';

function LikeButton({ post }: { post: Post }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes,
    (currentLikes, increment: number) => currentLikes + increment
  );

  async function handleLike() {
    addOptimisticLike(1);       // instant update
    await likePost(post.id);    // real request in background
  }

  return (
    <button onClick={handleLike}>
      {optimisticLikes} likes
    </button>
  );
}

`useActionState` — Form State Without the Chaos

import { useActionState } from 'react';

async function createPost(prevState: any, formData: FormData) {
  const title = formData.get('title') as string;
  if (!title) return { error: 'Title is required' };
  await savePost({ title });
  return { success: true };
}

function PostForm() {
  const [state, action, isPending] = useActionState(createPost, null);

  return (
    <form action={action}>
      <input name="title" />
      {state?.error && <p>{state.error}</p>}
      <button disabled={isPending}>
        {isPending ? 'Saving...' : 'Create Post'}
      </button>
    </form>
  );
}

4. Stop Using useEffect for These Things

This is the most common mistake. Here's what to replace:

❌ Deriving state with useEffect

// Wrong
const [fullName, setFullName] = useState('');
useEffect(() => {
  setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);

// Correct — just compute it
const fullName = `${firstName} ${lastName}`;

❌ Fetching data with useEffect

// Wrong
useEffect(() => {
  fetch('/api/posts').then(r => r.json()).then(setPosts);
}, []);

// Correct — use a data fetching library
import { useQuery } from '@tanstack/react-query';

function Posts() {
  const { data, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json())
  });
}

Or even better — use Server Components in Next.js and fetch server-side:

// app/posts/page.tsx — This is a Server Component
export default async function PostsPage() {
  const posts = await getPosts(); // direct DB/API call
  return <PostList posts={posts} />;
}

❌ Responding to events with useEffect

// Wrong
useEffect(() => {
  if (submitted) {
    sendAnalytics();
    resetForm();
  }
}, [submitted]);

// Correct — handle it in the event handler
function handleSubmit() {
  sendAnalytics();
  resetForm();
  setSubmitted(true);
}

✅ When useEffect IS appropriate

Setting up a third-party library that imperatively mutates the DOM
WebSocket or EventSource subscriptions (with cleanup)
Syncing to localStorage or sessionStorage
Firing analytics on route change (sparingly)

5. State Management in 2026

Need	Tool
Local UI state	`useState` / `useReducer`
Server data + caching	TanStack Query
Global client state	Zustand or Jotai
Forms	React Hook Form + Zod
URL state	`nuqs` (Next.js) or `useSearchParams`
Server state (Next.js)	Server Actions + `revalidatePath`

Zustand setup (minimal):

import { create } from 'zustand';

interface CartStore {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
}

export const useCartStore = create<CartStore>((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter(i => i.id !== id)
  })),
}));

6. Performance in 2026 (The React Compiler Changes Everything)

React 19 ships with the React Compiler (previously "React Forget"). It automatically memoizes components and values — meaning useMemo, useCallback, and React.memo are rarely needed manually.

What the compiler handles automatically

Skipping re-renders when props haven't changed
Stabilizing callback references
Memoizing expensive computations

What you still need to think about

Code splitting — always split by route:

import { lazy, Suspense } from 'react';

const HeavyDashboard = lazy(() => import('./HeavyDashboard'));

function App() {
  return (
    <Suspense fallback={<LoadingScreen />}>
      <HeavyDashboard />
    </Suspense>
  );
}

Virtualize long lists — use TanStack Virtual:

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }: { items: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
        {virtualizer.getVirtualItems().map(item => (
          <div
            key={item.key}
            style={{ position: 'absolute', top: item.start, width: '100%' }}
          >
            {items[item.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Images — always use Next.js <Image> or a CDN:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // for above-the-fold images
  placeholder="blur"
  blurDataURL={blurUrl}
/>

7. TypeScript Patterns Worth Knowing

Component props with variants

type ButtonProps = {
  variant: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

function Button({ variant, size = 'md', isLoading, children, ...rest }: ButtonProps) {
  return (
    <button
      disabled={isLoading}
      className={cn(buttonVariants({ variant, size }))}
      {...rest}
    >
      {isLoading ? <Spinner /> : children}
    </button>
  );
}

Discriminated unions for component state

type AsyncState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function DataView({ state }: { state: AsyncState<User[]> }) {
  if (state.status === 'loading') return <Skeleton />;
  if (state.status === 'error') return <Error message={state.error} />;
  if (state.status === 'success') return <UserList users={state.data} />;
  return null;
}

8. The 2026 Cheat Sheet

Hooks reference

Hook	Use it for
`useState`	Simple local state
`useReducer`	Complex local state with multiple sub-values
`useRef`	DOM refs, mutable values that don't trigger re-render
`useContext`	Consuming context (theme, auth, locale)
`use()`	Unwrapping promises and context in any component
`useOptimistic`	Instant UI feedback while async operation runs
`useActionState`	Managing form state tied to a server action
`useTransition`	Marking non-urgent state updates
`useDeferredValue`	Deferring re-rendering of slow sub-trees
`useEffect`	LAST RESORT — external system sync only

When to reach for what

Scenario	Solution
Data from server	TanStack Query or Server Components
Form handling	`useActionState` + Server Actions, or React Hook Form
Global state	Zustand (simple) or Jotai (atomic)
URL as state	`nuqs`
List of 500+ items	TanStack Virtual
Async feedback	`useOptimistic`
Heavy component	`lazy()` + `Suspense`
Derived value	Compute inline, no state
Animation	Framer Motion or CSS transitions

Anti-patterns to avoid

Anti-pattern	Replacement
`useEffect` for data fetching	TanStack Query / Server Components
`useEffect` for derived state	Compute inline
`useEffect` for event responses	Event handler
Prop drilling 3+ levels	Zustand / context
`React.memo` everywhere	Let the compiler handle it
Manual `useMemo`/`useCallback`	Let the compiler handle it
`any` in TypeScript	Discriminated unions, generics
Giant components (500+ lines)	Split by concern

9. Recommended Stack (2026)

Framework:     Next.js 15 (App Router)
Language:      TypeScript (strict mode)
Styling:       Tailwind CSS v4 + shadcn/ui
Data fetching: TanStack Query v5
Global state:  Zustand
Forms:         React Hook Form + Zod
Testing:       Vitest + Testing Library + Playwright
Linting:       ESLint + Prettier + TypeScript strict
Deployment:    Vercel / Cloudflare Workers

Final Thoughts

The shift from "React as a UI library" to "React as an application framework" is complete in 2026. The mental model has changed:

Server first. Render as much as you can on the server.
Data co-located with components. No more global fetch orchestration.
Less manual optimization. The compiler does the heavy lifting.
useEffect is a code smell. If you're reaching for it, ask why first.

Build from these foundations and you'll spend less time debugging re-renders and more time shipping features.

Found this useful? Drop a like and follow — I write about React, TypeScript, and modern web architecture.

Tags: #react #javascript #typescript #webdev #frontend

🧩 Stop Using Heavy Captchas — Try This Vue 3 Client-Side Alternative

Parsa Jiravand — Mon, 30 Mar 2026 19:05:14 +0000

If you need a lightweight human check in a form—login, contact, signup—but don’t want to wire up Google reCAPTCHA, hCaptcha, or backend challenges,
👉 vue-client-recaptcha is worth a look.

It’s a Vue 3 component + composable that generates and validates a captcha entirely in the browser.

✅ No API calls
✅ No secret keys
✅ No backend required

🤔 What problem does it solve?

Traditional captchas usually mean:

❌ Third-party scripts (privacy + consent issues)
❌ API keys + server verification
❌ Slower load + bigger bundles

vue-client-recaptcha takes a different approach:

🟢 Optimize for speed, simplicity, and DX
🔴 Not meant for enterprise-grade bot protection

🧪 Real Example (Vue 3 + `<script setup>`)

Here’s a clean, practical form:

<script setup>
import { ref } from 'vue'
import { VueClientRecaptcha } from 'vue-client-recaptcha'
import 'vue-client-recaptcha/dist/vue-client-recaptcha.css'

const captcha = ref('')
const isValid = ref(false)
const captchaRef = ref(null)

const submit = () => {
  if (!isValid.value) {
    alert('Please verify captcha')
    return
  }

  alert('Form submitted 🚀')
}
</script>

<template>
  <form @submit.prevent="submit" class="space-y-4">
    <input 
      v-model="captcha" 
      placeholder="Enter captcha"
      class="input"
    />

    <VueClientRecaptcha
      ref="captchaRef"
      v-model="captcha"
      v-model:valid="isValid"
      theme="auto"
      :noiseDots="20"
      distortion="both"
    />

    <div class="flex gap-2">
      <button type="submit">Submit</button>
      <button type="button" @click="captchaRef?.resetCaptcha()">
        Reset
      </button>
    </div>
  </form>
</template>

🧠 Using the Composable (Advanced)

If you want full control (custom UI, canvas, etc.):

import { useCaptcha } from 'vue-client-recaptcha'

const { code, generate, validate, reset } = useCaptcha({
  charsPreset: 'letters',
  count: 6,
})

generate()

const isValid = validate('ABC123')

✨ Key benefits

Feature	Why it matters
No server required	Works in static sites, SPAs, Nuxt, Vite
Vue-native API	`v-model` + `<script setup>` friendly
Customizable UI	Themes, distortion, fonts, size
Accessible	Labels + optional audio
Composable API	Build your own captcha UI
Zero runtime deps	Lightweight & fast

🎯 When should you use it?

✅ Good fit

Internal dashboards
SaaS admin panels
MVPs / prototypes
Low-risk forms (contact, newsletter)

❌ Not a replacement for

Payment flows
Auth systems requiring strong security
Abuse-heavy public endpoints

For those, use:

Cloudflare Turnstile
reCAPTCHA Enterprise
Server-side validation

⚠️ Security reality check

This is client-side only.

That means:

It can be bypassed
It’s meant to reduce noise, not eliminate attacks

👉 Always combine with:

server validation
rate limiting
basic anti-abuse logic

🔗 Links

📦 npm: https://www.npmjs.com/package/vue-client-recaptcha
🧑‍💻 GitHub: https://github.com/parsajiravand/vue-client-recaptcha
📚 Docs: https://vue-client-recaptcha.netlify.app/
🔬 Playground: https://vue-client-recaptcha.netlify.app/playground

💭 Final thoughts

If you want:

⚡ fast integration
🧼 clean Vue API
🪶 lightweight bundle

…and you understand the limitations of client-side validation,
then vue-client-recaptcha is a very practical solution.

🧠 Pro tip

A solid combo in real apps:

Client captcha (this package)
+ Server validation
+ Rate limiting (IP / token)

That gives you good enough protection without killing UX.

🚀 Stop Rewriting Components — Convert React to Vue Automatically

Parsa Jiravand — Fri, 27 Mar 2026 17:16:59 +0000

What if switching frameworks didn’t mean rewriting everything from scratch?

Frontend developers are constantly facing this problem:

You start with React, then your team (or client) prefers Vue
You want to reuse logic across ecosystems
Or you're exploring frameworks but hate duplicating effort

So I built something to challenge that.

🔥 Introducing: cross-framework

A source-to-source compiler that converts:

👉 React (JSX / TSX) → Vue 3 (Single File Components)

And no — this is not regex hacks or AI guessing.

This is a real compiler pipeline:

Parse code using Babel
Transform into an intermediate representation (IR)
Emit clean Vue 3 <script setup> + <template>

🎥 Demo (see it in action)

Watch the demo here:
https://x.com/i/status/2037575942160122244

🧠 Why this matters

Switching frameworks today is expensive:

Rewriting components manually
Risk of introducing bugs
Losing consistency across codebases

AI tools try to solve this, but:

❌ Results are inconsistent
❌ Require prompt engineering
❌ Break structure in complex cases
❌ Come with ongoing pricing plans

This project focuses on:
✔ deterministic output
✔ structured transformations
✔ developer-first control

⚙️ How it works

CLI usage

npm install cross-framework

npx cross-framework convert --from react --to vue ./path/Component.tsx

This generates:

Component.vue

You can also specify an output directory with --out-dir.

Programmatic API

import { convertCode } from "cross-framework"

const vueCode = convertCode({
  from: "react",
  to: "vue",
  sourceCode: reactSource,
  filename: "Component.tsx",
})

🧩 What it supports

✅ React Features

Function components (default / named exports)
memo and forwardRef

✅ Hooks → Vue equivalents

useState → ref
useRef → ref
useMemo → computed
useEffect → watch, watchEffect, onMounted

✅ JSX → Vue Template

Props & spreads
Events
Lists (map)
Conditionals
Fragments

All transformed into clean Vue 3 template syntax:

className → class / :class
JSX → template IR → Vue output

⚠️ Current limitations

Like any early-stage compiler, there are some constraints:

Imports are not rewritten
Multi-component files may need manual adjustments
Design-system-heavy props might need cleanup

🌍 Try it yourself

🧪 Playground:
https://cross-framework.netlify.app/

📚 Documentation:
https://cross-framework-doc.netlify.app/

🧭 The vision

This is just the beginning.

Next steps:

Support more frameworks (Angular, Svelte, etc.)
Convert entire projects, not just components
Build a universal transformation pipeline for frontend code

Imagine:

Write once → run anywhere (React, Vue, more…)

❤️ Support the project

If you believe in this direction and want to see it grow:

👉 https://github.com/sponsors/parsajiravand

🤝 Join the team

I’m looking for developers who want to build something ambitious in the frontend ecosystem.

If you're interested in contributing long-term:

📩 parsajiravand@gmail.com

🧠 Final thought

We’ve spent years choosing frameworks.

Maybe it’s time to stop choosing…
and start abstracting the boundaries between them.

#webdevelopment #frontend #reactjs #vuejs #javascript #typescript #opensource #programming #softwareengineering #developer #coding #devtools #saas #ai #buildinpublic #100daysofcode #github #webdev #frontenddeveloper #techinnovation

❌ Stop Writing if (user.role === "admin") Everywhere — Clean RBAC in React

Parsa Jiravand — Mon, 23 Mar 2026 18:23:00 +0000

Most React apps start clean… and then slowly turn into this:

if (user?.role === "admin") { ... }

Scattered across buttons, pages, and components.

At first, it works.
Then it spreads.
Then it breaks.

❌ Duplicate logic everywhere
❌ Hard to refactor
❌ Inconsistent UX
❌ Easy security mistakes

There’s a better way: centralized, declarative RBAC.

That’s exactly what advanced-react-role-guard solves.

👉 Try it live (interactive demo):
https://advanced-react-role-guard-website.netlify.app/

👉 Docs:
https://advanced-react-role-guard-doc.netlify.app/

👉 GitHub:
https://github.com/parsajiravand/react-role-guard

🧠 The Problem in One Line

You’re mixing authorization logic with UI rendering.

Instead, you want:

User → Roles → Permissions → Access decision → What you render

❌ Before (what most apps look like)

{user?.role === "admin" && <AdminPanel />}

{user?.permissions?.includes("post:create") && (
  <button>Create Post</button>
)}

✅ After (clean + scalable)

<Can role="admin">
  <AdminPanel />
</Can>

<Can permissions={["post:create"]}>
  <button>Create Post</button>
</Can>

Same logic. 10x cleaner.

🚀 Why developers love this

No more scattered role checks
One source of truth for permissions
Cleaner components (focus on UI only)
Better UX with built-in fallbacks
Works with modern stacks (Next.js, Vite)

It feels like moving from manual checks → declarative UI.

📦 Install

npm install advanced-react-role-guard

⚙️ How it works

Wrap your app with RoleGuardProvider:

import { RoleGuardProvider, Can, useCan } from "advanced-react-role-guard";

function App() {
  return (
    <RoleGuardProvider
      user={{
        roles: ["editor"],
        permissions: ["post:create"],
      }}
      config={{
        admin: ["*"],
        editor: ["post:create", "post:update"],
        viewer: ["post:read"],
      }}
      features={{
        newDashboard: true,
        aiSearch: false,
      }}
    >
      <Dashboard />
    </RoleGuardProvider>
  );
}

Now every component can check access cleanly.

🎯 Pattern 1: Declarative UI (`<Can>`)

<Can role="admin" fallback={<p>Admin only</p>}>
  <AdminPanel />
</Can>

<Can
  permissions={["order:edit", "order:cancel"]}
  match="any"
  fallback={<p>Read-only access</p>}
>
  <OrderActions />
</Can>

match="any" → at least one permission
match="all" → must have all permissions

🎯 Pattern 2: Hooks (`useCan`)

function PostToolbar() {
  const canPublish = useCan({
    permissions: ["post:create", "post:publish"],
    match: "all",
  });

  return (
    <>
      <button disabled={!canPublish}>Publish</button>
      {!canPublish && <span>No permission</span>}
    </>
  );
}

🎯 Pattern 3: Route Protection

import { Guard } from "advanced-react-role-guard";
import { Navigate } from "react-router-dom";

<Route
  path="/admin"
  element={
    <Guard role="admin" fallback={<Navigate to="/403" replace />}>
      <AdminPage />
    </Guard>
  }
/>

🎯 Pattern 4: Wildcards

const config = {
  admin: ["*"],
  support: ["user:*"],
  editor: ["post:*"],
};

* → everything
user:* → all user permissions

🎯 Pattern 5: Feature Flags

<Feature name="newDashboard" fallback={<LegacyDashboard />}>
  <DashboardV2 />
</Feature>

💼 Real-world example

Imagine a SaaS dashboard:

Admin → full access
Editor → create + edit
Viewer → read-only

Define once:

config={{
  admin: ["*"],
  editor: ["post:create", "post:update"],
  viewer: ["post:read"],
}}

Now your entire app follows this rule automatically.

⚠️ Important

This library handles UI-level authorization only.

You still need backend validation for real security.

🔗 Links

Resource	URL
npm	https://www.npmjs.com/package/advanced-react-role-guard
Docs	https://advanced-react-role-guard-doc.netlify.app/
Live demo	https://advanced-react-role-guard-website.netlify.app/
GitHub	https://github.com/parsajiravand/react-role-guard

🎯 Final Thoughts

If your app has:

roles
permissions
dashboards
multiple user types

You don’t need more if statements.

You need structure.

👉 Try the demo
👉 Install in 2 minutes
👉 Clean your codebase

If you use it, drop your stack (Next.js? Vite?) — I’d love to see how you structure your RBAC.

Introducing helping-js v2: A Zero-Dependency Utility Library to Level Up Your App

Parsa Jiravand — Sat, 21 Mar 2026 08:48:09 +0000

Introducing helping-js v2: A Zero-Dependency Utility Library to Level Up Your App

TL;DR — helping-js is a lightweight JavaScript utility library with no dependencies. It adds type checkers, regex patterns, schema-based validation, and safe browser APIs that work in Node, Vue, React, Express, and the browser. In this post, we’ll see how it can simplify your code.

Why helping-js?

Zero dependencies — no extra packages
Small — tree-shakeable, subpath imports
Universal — Node (CJS/ESM), Vue, React, Express, Vite, Next.js, CRA, CDN
TypeScript — .d.ts for all modules
Validation — validate(obj, rules) without validator.js

Installation

npm install helping-js
# or
yarn add helping-js

Module Overview

1. Type checkers (`helping-js/core/types`)

Reliable type checks for common values:

import {
  isString,
  isNumber,
  isArray,
  isPlainObject,
  isUndefinedOrNull,
  isNumeric,
  isPromise,
} from 'helping-js/core/types';

isString('hello');        // true
isNumber(42);             // true
isArray([1, 2]);          // true
isPlainObject({});        // true
isUndefinedOrNull(null);  // true
isNumeric('123.45');      // true
isPromise(Promise.resolve()); // true

Useful for handling user input, API responses, and config objects.

2. Regex patterns (`helping-js/core/regex`)

Pre-built patterns for common formats:

import {
  RX_EMAIL,
  RX_URL,
  RX_PHONE,
  RX_IPV4,
  RX_UUID,
  RX_HEX_COLOR,
} from 'helping-js/core/regex';

RX_EMAIL.test('user@example.com');   // true
RX_URL.test('https://example.com');  // true
RX_PHONE.test('+1-555-123-4567');   // true
RX_IPV4.test('192.168.1.1');        // true
RX_UUID.test('550e8400-e29b-41d4-a716-446655440000'); // true
RX_HEX_COLOR.test('#ff5733');       // true

No need to write or maintain these regexes yourself.

3. Country-specific phone regex (`helping-js/core/phones-regex`)

import { RX_PHONE_US, RX_PHONE_UK, RX_PHONE_IR } from 'helping-js/core/phones-regex';

RX_PHONE_US.test('5552345678');    // true
RX_PHONE_UK.test('+447912345678'); // true
RX_PHONE_IR.test('+989121234567'); // true

Works for many countries.

4. Currency regex (`helping-js/core/currencies-regex`)

import { RX_CURRENCY_USD, RX_CURRENCY_EUR } from 'helping-js/core/currencies-regex';

RX_CURRENCY_USD.test('1,234.56');  // true
RX_CURRENCY_EUR.test('1.000,00€'); // true

For validating and normalizing currency input.

5. Environment support (`helping-js/core/support`)

Detect runtime environment:

import {
  HAS_WINDOW_SUPPORT,
  HAS_DOCUMENT_SUPPORT,
  IS_BROWSER,
  IS_IE,
} from 'helping-js/core/support';

if (IS_BROWSER) {
  console.log('Running in browser');
}
if (HAS_WINDOW_SUPPORT) {
  // use window
}

Helps write code that works in both browser and Node.

6. Safe browser globals (`helping-js/core/safe-types`)

Use window, document, navigator, etc. safely in SSR or Node:

import { WINDOW, DOCUMENT, File } from 'helping-js/core/safe-types';

// No ReferenceError in Node
console.log(WINDOW);   // {} in Node, window in browser
console.log(DOCUMENT); // {} in Node, document in browser

7. Validation API (`helping-js/core/validate`)

Lightweight schema-based validation:

import { validate } from 'helping-js/core/validate';
import { RX_EMAIL } from 'helping-js/core/regex';
import { isNumber } from 'helping-js/core/types';

const result = validate(
  { email: 'user@example.com', age: 25 },
  { email: RX_EMAIL, age: isNumber }
);

if (result.valid) {
  console.log('All valid');
} else {
  console.log('Errors:', result.errors); // { age: false }
}

Rules can be RegExp or (value) => boolean.

8. Form preset (`helping-js/preset/form`)

One import for common form validation needs:

import {
  validate,
  isString,
  isNumber,
  RX_EMAIL,
  RX_URL,
  RX_PHONE,
} from 'helping-js/preset/form';

Real-world examples

Vue 3 – form validation

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="form.email" type="email" placeholder="Email" />
    <span v-if="errors.email" class="error">Invalid email</span>

    <input v-model.number="form.age" type="number" placeholder="Age" />
    <span v-if="errors.age" class="error">Invalid age</span>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { validate, RX_EMAIL, isNumber } from 'helping-js/preset/form';

const form = reactive({ email: '', age: null });
const errors = ref({});

const rules = { email: RX_EMAIL, age: isNumber };

function onSubmit() {
  const result = validate(form, rules);
  errors.value = result.errors;
  if (result.valid) {
    // submit to API
    console.log('Submitting', form);
  }
}
</script>

React – form validation

import { useState } from 'react';
import { validate, RX_EMAIL, isNumber } from 'helping-js/preset/form';

export function ContactForm() {
  const [form, setForm] = useState({ email: '', age: '' });
  const [errors, setErrors] = useState({});

  const rules = { email: RX_EMAIL, age: isNumber };

  function handleSubmit(e) {
    e.preventDefault();
    const result = validate(form, rules);
    setErrors(result.errors);
    if (result.valid) {
      // submit to API
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={form.email}
        onChange={(e) => setForm((s) => ({ ...s, email: e.target.value }))}
        type="email"
        placeholder="Email"
      />
      {errors.email && <span className="error">Invalid email</span>}

      <input
        value={form.age}
        onChange={(e) => setForm((s) => ({ ...s, age: e.target.value }))}
        type="number"
        placeholder="Age"
      />
      {errors.age && <span className="error">Invalid age</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Express.js – API validation

const express = require('express');
const { validate } = require('helping-js/core/validate');
const { RX_EMAIL } = require('helping-js/core/regex');
const { isString } = require('helping-js/core/types');

const app = express();
app.use(express.json());

app.post('/api/users', (req, res) => {
  const result = validate(req.body, {
    email: RX_EMAIL,
    name: (v) => isString(v) && v.length >= 2,
  });

  if (!result.valid) {
    return res.status(400).json({ errors: result.errors });
  }

  // create user...
  res.json({ ok: true });
});

// Reusable validation middleware
const validateBody = (rules) => (req, res, next) => {
  const result = validate(req.body || {}, rules);
  if (!result.valid) {
    return res.status(400).json({ errors: result.errors });
  }
  next();
};

app.post('/api/contact', validateBody({ email: RX_EMAIL }), (req, res) => {
  res.json({ ok: true });
});

Vue 3 – environment-aware logic

import { IS_BROWSER, HAS_TOUCH_SUPPORT } from 'helping-js/core/support';
import { isString } from 'helping-js/core/types';

// Use only in browser
if (IS_BROWSER && HAS_TOUCH_SUPPORT) {
  document.addEventListener('touchstart', handleTouch);
}

// Validate before processing
function processInput(value) {
  if (!isString(value)) return null;
  return value.trim();
}

React – type checking for API data

import { isPlainObject, isArray, isString } from 'helping-js/core/types';

function UserList({ data }) {
  if (!isArray(data)) return <p>Invalid data</p>;

  return (
    <ul>
      {data
        .filter((item) => isPlainObject(item) && isString(item.name))
        .map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
    </ul>
  );
}

How helping-js improves your app

Use case	Benefit
Form validation	Replace validator.js with `validate()` and built-in regex
Type safety	Use type checkers instead of `typeof`/`instanceof` checks
Regex validation	Reuse many common patterns instead of writing your own
SSR / universal code	`IS_BROWSER` and safe globals avoid runtime errors
Smaller bundle	Import only the modules you use
DX	TypeScript types and clear module layout

🚀 Build a Schema-Based Wizard Form in Vue 3 (No Templates Needed)

Parsa Jiravand — Thu, 19 Mar 2026 20:40:16 +0000

If you've ever built multi-step forms in Vue, you know the usual pain:

Managing step state manually
Handling validation across steps
Conditionally showing steps
Keeping everything in sync

What if you could define your entire wizard in a single object?

With vue3-form-wizard v1, you can do exactly that using the new Schema Mode.

✨ What is Schema Mode?

Schema Mode is a declarative API that lets you build a multi-step wizard without writing <tab-content> components.

Instead, you define everything like this:

Steps
Conditions
Validation
Data structure

👉 All inside one schema object.

🧠 Why Use Schema Mode?

🧩 Centralized configuration
🔁 Reactive step conditions
✅ Built-in validation per step
🔄 Shared state across all steps
⚡ Faster development (less boilerplate)

📦 Installation

npm install vue3-form-wizard

🏗 Basic Example

Let’s build a simple 2-step wizard:

<template>
  <form-wizard
    :schema="schema"
    :schema-components="schemaComponents"
    v-model="wizardData"
    @on-complete="handleComplete"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FormWizard } from 'vue3-form-wizard'
import 'vue3-form-wizard/dist/style.css'

import IntroStep from './IntroStep.vue'
import ReviewStep from './ReviewStep.vue'

const schema = {
  initialData: { plan: 'basic' },
  steps: [
    { id: 'intro', title: 'Intro', component: 'IntroStep' },
    { id: 'review', title: 'Review', component: 'ReviewStep' },
  ],
}

const schemaComponents = { IntroStep, ReviewStep }

const wizardData = ref({ plan: 'basic' })

const handleComplete = () => {
  alert('Done!')
}
</script>

🧩 How It Works

1. `initialData` → Your Single Source of Truth

initialData: {
  plan: 'basic',
  email: ''
}

All steps read and update this shared object.

2. Steps Configuration

steps: [
  { id: 'plan', title: 'Plan', component: 'PlanStep' },
  { id: 'contact', title: 'Contact', component: 'ContactStep' },
]

Each step is just metadata — no template nesting required.

🔄 Two-Way Data Binding in Steps

Each step receives:

data → current wizard state
updateData() → function to update state

Example:

<script setup>
defineProps(['data', 'updateData'])

const onChange = (e) => {
  updateData({ plan: e.target.value })
}
</script>

🎯 Conditional Steps (Dynamic Flow)

Want to show steps based on user input?

{
  id: 'premium',
  title: 'Premium',
  component: 'PremiumStep',
  condition: ({ data }) => data.plan === 'premium'
}

👉 This step only appears if the user selects premium plan.

✅ Validation (Sync + Async)

You can block navigation easily:

{
  id: 'email',
  title: 'Email',
  component: 'EmailStep',
  validate: ({ data }) => {
    const valid = /^[^@]+@[^@]+\.\w+$/.test(data.email || '')
    return valid ? true : 'Enter a valid email'
  }
}

true → allow navigation
string → show error message

⚡ Advanced: Define Steps Without `.vue` Files

You can even define steps inline using defineComponent:

const NameStep = defineComponent({
  props: ['data', 'updateData'],
  setup(props) {
    return () => h('input', {
      value: props.data.name,
      onInput: e => props.updateData({ name: e.target.value })
    })
  }
})

👉 Perfect for dynamic or generated UIs.

🔁 Full Example (Minimal)

const schema = {
  initialData: { name: '' },
  steps: [
    { id: 'name', title: 'Name', component: 'NameStep' },
    { id: 'summary', title: 'Summary', component: 'SummaryStep' },
  ]
}

🆚 Schema Mode vs Classic Mode

Feature	Schema Mode	Classic Mode
Config-driven	✅	❌
Dynamic steps	✅	⚠️ manual
Clean structure	✅	❌
Flexibility	✅	✅

🎉 Final Thoughts

Schema Mode turns multi-step forms into a data problem instead of a UI problem.

Instead of juggling components and state, you:

👉 Define everything once
👉 Let the wizard handle the rest

🔗 Resources

📚 Docs: https://vue3-form-wizard-document.netlify.app/
🔎 Demo: https://vue3-form-wizard-document.netlify.app/demos/#schema-mode-v1
🧪 Playground: https://vue3-form-wizard-document.netlify.app/playground/

💬 What Do You Think?

Would you use schema-driven forms in your projects?

Or do you prefer full control with traditional components?

Let me know in the comments 👇

🏷 Tags

vue #vue3 #javascript #frontend #webdev #opensource #ui #forms #developer-tools #npm

DEV Community: Parsa Jiravand

Vue & Nuxt Performance in 2026: The Complete Guide

Who This Is For

1. Reactivity: Use the Right Primitive

shallowRef — Your New Best Friend

shallowReactive for Objects

markRaw — Opt Out of Reactivity Entirely

Computed vs Watchers

2. Component Rendering: Be Strategic

v-memo — Skip Re-renders for List Items

defineAsyncComponent — Split by Component, Not Just Route

v-once for Truly Static Content

Functional Components for Pure UI

3. Nuxt 4 Patterns That Actually Help

Error Boundaries with <NuxtErrorBoundary>

Rendering Modes Per Route

useLazyFetch and useLazyAsyncData

useAsyncData Deduplication and Keys

Payload Extraction to Avoid Hydration Waterfalls

4. Core Web Vitals: Fix the Metrics That Matter

CLS (Cumulative Layout Shift) — The Jank Killer

LCP (Largest Contentful Paint) — Speed Up the Hero

INP (Interaction to Next Paint) — Kill the Input Delay

5. Bundle Size: Ship Less

Analyze Your Bundle

Auto-imports Are Your Friend

Replace Heavy Libraries

Dynamic Imports for Large Features

6. Image Optimization with Nuxt Image

7. Caching Strategy

useFetch with Cache Control

Server-Side Cache Headers

8. The Performance Checklist

Reactivity

Nuxt

Core Web Vitals

Bundle

Final Thoughts

React in 2026: Start From Scratch the Right Way (+ Cheat Sheet)

Why This Guide Exists

1. Scaffolding: What to Use in 2026

If you're building a full-stack or SSR app

If you're building a pure client SPA

If you're building something UI-heavy or a design system

2. Folder Structure (Scalable from Day 1)

3. React 19 Features You Should Actually Use

use() — The New Data Primitive

useOptimistic — Instant UI, Real Sync

useActionState — Form State Without the Chaos

4. Stop Using useEffect for These Things

❌ Deriving state with useEffect

❌ Fetching data with useEffect

❌ Responding to events with useEffect

✅ When useEffect IS appropriate

5. State Management in 2026

Zustand setup (minimal):

6. Performance in 2026 (The React Compiler Changes Everything)

What the compiler handles automatically

What you still need to think about

7. TypeScript Patterns Worth Knowing

Component props with variants

Discriminated unions for component state

8. The 2026 Cheat Sheet

Hooks reference

When to reach for what

Anti-patterns to avoid

9. Recommended Stack (2026)

Final Thoughts

🧩 Stop Using Heavy Captchas — Try This Vue 3 Client-Side Alternative

🤔 What problem does it solve?

🧪 Real Example (Vue 3 + <script setup>)

🧠 Using the Composable (Advanced)

✨ Key benefits

🎯 When should you use it?

✅ Good fit

❌ Not a replacement for

⚠️ Security reality check

🔗 Links

💭 Final thoughts

🧠 Pro tip

`shallowRef` — Your New Best Friend

`shallowReactive` for Objects

`markRaw` — Opt Out of Reactivity Entirely

`v-memo` — Skip Re-renders for List Items

`defineAsyncComponent` — Split by Component, Not Just Route

`v-once` for Truly Static Content

Error Boundaries with `<NuxtErrorBoundary>`

`useLazyFetch` and `useLazyAsyncData`

`useAsyncData` Deduplication and Keys

`useFetch` with Cache Control

`use()` — The New Data Primitive

`useOptimistic` — Instant UI, Real Sync

`useActionState` — Form State Without the Chaos

🧪 Real Example (Vue 3 + `<script setup>`)

🎯 Pattern 1: Declarative UI (`<Can>`)

🎯 Pattern 2: Hooks (`useCan`)

1. Type checkers (`helping-js/core/types`)

2. Regex patterns (`helping-js/core/regex`)

3. Country-specific phone regex (`helping-js/core/phones-regex`)

4. Currency regex (`helping-js/core/currencies-regex`)

5. Environment support (`helping-js/core/support`)

6. Safe browser globals (`helping-js/core/safe-types`)

7. Validation API (`helping-js/core/validate`)

8. Form preset (`helping-js/preset/form`)

1. `initialData` → Your Single Source of Truth

⚡ Advanced: Define Steps Without `.vue` Files