Vue আর Nuxt — reactivity আর React-এর সাথে তুলনা

১ · Vue কোথা থেকে এলো, আর এখন কোথায়

এতক্ষণ পুরো কোর্সে আপনি React আর Next.js দিয়ে বাজারঘর বানিয়েছেন। এই মডিউলে একই দোকানের ছোট একটি অংশ অন্য framework দিয়ে আবার বানানো হবে। উদ্দেশ্য একটাই: নতুন framework দেখলে আপনি যেন বুঝতে পারেন, কোনটি আসলে নতুন ধারণা আর কোনটি শুধু অন্য নামে পুরোনো জিনিস।

একটি তুলনা দিয়ে শুরু করা যাক। দুটি রেস্তোরাঁ ভাবুন। প্রথমটিতে কোনো টেবিলের অর্ডার বদলালে ওয়েটার পুরো টেবিলের সব খাবার আবার রান্নাঘরে মিলিয়ে দেখেন, তারপর শুধু যা আলাদা তা বদলান। দ্বিতীয়টিতে প্রতিটি পদের পাশে একটি চিরকুট আছে, যাতে লেখা কোন অতিথি ওই পদ চেয়েছেন। ডালের দাম বদলালে শুধু ডাল নেওয়া অতিথিদের কাছে খবর যায়। প্রথমটি মোটামুটি React-এর ধরন, দ্বিতীয়টি Vue-র। এই পর্বের বাকিটা এই চিরকুটের ব্যবস্থা নিয়ে।

লেখার সময়ে (নভেম্বর ২০২৬) npm-এ Vue-র stable version 3.5.44. Version 3.6 এখনো release candidate, অর্থাৎ পরীক্ষার পর্যায়ে, তাই এই পর্বের সব run 3.5.44-এ। পরিবারের বাকি সদস্যদের version-ও লিখে রাখুন, কারণ পর্ব জুড়ে এগুলোই চলেছে:

একটি মজার যোগসূত্র আছে। পর্ব ৫-এ যে Vite দিয়ে React project বানিয়েছিলেন, সেটিও Evan You-এরই শুরু করা, প্রথমে Vue-র জন্য। তাই Vue-তে আসলে কাজের পরিবেশ প্রায় একই থাকে, বদলায় শুধু component লেখার ধরন।

$ npm create vite@9.3.3 vue-shop -- --template vue-ts --no-interactive
$ cd vue-shop && npm install
$ npm install vue-router@5.4.0 pinia@4.1.0

Vue দল নিজেও npm create vue@latest নামে একটি scaffolding tool দেয়, যা router, Pinia, test আর lint আগে থেকে যুক্ত করার প্রশ্ন করে। এখানে React-এর সাথে ন্যায্য তুলনার জন্য দুই দিকেই একই create-vite ব্যবহার করা হয়েছে।

২ · Single-file component আর template — JSX-এর পাশে

React-এ একটি component হলো একটি JavaScript function, যা JSX ফেরত দেয়। Vue-তে একটি component সাধারণত একটি .vue ফাইল, যার তিনটি অংশ: <script>-এ logic, <template>-এ markup, আর ঐচ্ছিক <style>. একে বলে single-file component বা SFC. দর্জির দোকানের কথা ভাবুন। মাপের খাতা, কাপড় আর নকশা এক থলেতে রাখা থাকে, তাই একটি অর্ডারের সবকিছু এক জায়গায় পাওয়া যায়।

বাজারঘরের পণ্যের কার্ড দুইভাবে, পাশাপাশি। দুটোই সত্যিকারের project থেকে, দুটোই build হয়েছে:

<script setup lang="ts">
import type { Product } from '../products';

const props = defineProps<{ product: Product }>();
const emit = defineEmits<{ add: [product: Product] }>();
</script>

<template>
  <li class="card">
    <RouterLink :to="`/products/${props.product.id}`">{{ props.product.name }}</RouterLink>
    <span>৳{{ props.product.price }}</span>
    <slot name="badge" />
    <button :disabled="props.product.stock === 0" @click="emit('add', props.product)">যোগ</button>
  </li>
</template>

import type { ReactNode } from 'react';
import { Link } from 'react-router';
import type { Product } from '../products';

type Props = { product: Product; onAdd: (p: Product) => void; badge?: ReactNode };

export default function ProductCard({ product, onAdd, badge }: Props) {
  return (
    <li className="card">
      <Link to={`/products/${product.id}`}>{product.name}</Link>
      <span>৳{product.price}</span>
      {badge}
      <button disabled={product.stock === 0} onClick={() => onAdd(product)}>যোগ</button>
    </li>
  );
}

পড়ার নিয়মগুলো এক জায়গায়, যাতে Vue কোড দেখলে আটকে না যান:

v-if, v-for, v-model-এর মতো v- দিয়ে শুরু হওয়া attribute-কে বলে directive. Template দেখতে HTML-এর মতো, কিন্তু browser এটি সরাসরি পড়ে না। Build-এর সময় Vue-র compiler এটিকে একটি render function-এ বদলে দেয়, যা আসলে JSX-এর মতোই একটি JavaScript function. তাহলে তফাত কোথায়? Template-এর গঠন বাঁধা, তাই compiler আগেই জানে কোন অংশ কখনো বদলাবে না আর কোন অংশ বদলাতে পারে। JSX পুরো JavaScript, তাই সেখানে এই অনুমান কঠিন।

৩ · Composition API — ref, reactive, computed, watch আর lifecycle

Vue 3 দুই ধরনের লেখা সমর্থন করে। পুরোনো Options API-তে data, methods, computed আলাদা আলাদা খোপে লেখা হয়। নতুন Composition API-তে সাধারণ function দিয়ে logic সাজানো হয়, যা React-এর hook-এর কাছাকাছি লাগে। নতুন project-এ সাধারণত <script setup> দিয়ে Composition API লেখা হয়। এর ভেতরের সব variable আর import সরাসরি template-এ ব্যবহার করা যায়।

বাজারঘরের পণ্যের তালিকার আসল ফাইল:

<script setup lang="ts">
import { ref, computed } from 'vue';
import { products } from '../products';
import { useCart } from '../stores/cart';
import ProductCard from '../components/ProductCard.vue';

const cart = useCart();
const search = ref('');
const shown = computed(() =>
  products.filter((p) => p.name.toLowerCase().includes(search.value.toLowerCase())),
);
</script>

<template>
  <h1>পণ্যের তালিকা</h1>
  <input v-model="search" placeholder="খুঁজুন" />
  <p v-if="shown.length === 0">কিছু পাওয়া যায়নি</p>
  <ul v-else>
    <ProductCard v-for="p in shown" :key="p.id" :product="p" @add="cart.add">
      <template #badge>
        <small v-if="p.stock === 0">স্টক নেই</small>
      </template>
    </ProductCard>
  </ul>
</template>

প্রতিটি নতুন জিনিস এক এক করে:

• ref(''): একটি reactive বাক্স। Script-এ মান পড়তে বা লিখতে search.value লাগে। Template-এ Vue নিজে .value খুলে দেয়, তাই সেখানে শুধু search. React-এর useState-এর মতো, তবে কোনো setter নেই, সরাসরি search.value = 'dal'.
• reactive({...}): পুরো একটি object-কে reactive করে। .value লাগে না, তবে destructure করলে reactivity হারায়। এজন্য Vue-র docs সাধারণ ক্ষেত্রে ref-কেই প্রথম পছন্দ বলে।
• computed(() => …): অন্য মান থেকে হিসাব করা মান। search না বদলালে Vue আগের ফল ফেরত দেয়। React-এ এর কাছাকাছি হলো useMemo, তবে সেখানে dependency array নিজে লিখতে হয়। Vue নিজে খুঁজে নেয়।
• setup একবারই চলে: এটিই সবচেয়ে বড় মানসিক পরিবর্তন। React-এ component function প্রতিটি render-এ আবার চলে। Vue-তে <script setup> component তৈরির সময় একবার চলে। পরে শুধু template থেকে বানানো render function আবার চলে।

Side effect-এর জন্য watch, আর জীবনচক্রের জন্য কয়েকটি hook. ধরুন খোঁজার শব্দ URL-এ রাখতে চান, আর পাতা খোলার সময় একটি log চান:

import { ref, watch, onMounted, onUnmounted } from 'vue';

const search = ref('');

// search বদলালে চলে; React-এর useEffect(..., [search])-এর কাছাকাছি
watch(search, (now, before) => {
  console.log(`search: "${before}" → "${now}"`);
});

onMounted(() => console.log('DOM-এ বসেছে'));      // useEffect(..., [])-এর মতো
onUnmounted(() => console.log('সরানো হলো'));       // cleanup-এর মতো

৪ · Reactivity-র ভেতরে — Proxy আর dependency tracking

Vue কীভাবে জানে যে shown নির্ভর করে search-এর ওপর? আপনি তো কোনো dependency array লেখেননি। উত্তর হলো JavaScript-এর Proxy. Proxy একটি object-এর চারপাশে পাহারাদারের মতো বসে। কেউ property পড়লে বা লিখলে পাহারাদার আগে খবর পায়। JavaScript কোর্সের Proxy আর Reflect পর্বে এর খুঁটিনাটি আছে, এখানে শুধু ব্যবহারটুকু।

পুরো ব্যবস্থায় তিনটি কাজ:

1. Effect চালানো: একটি function চালানোর আগে Vue তাকে “এখন চলছে” বলে চিহ্নিত করে। Vue-তে প্রতিটি component-এর render এমনই একটি reactive effect.
2. Track: চলার সময় সে যা পড়ে, Proxy-র get তা ধরে। লিখে রাখা হয়: “এই effect এই object-এর এই key পড়েছে।” একে বলে dependency tracking.
3. Trigger: পরে কেউ সেই key লিখলে Proxy-র set তালিকা খুলে শুধু সেই effect-গুলো আবার চালায়।

এটিই সেই রেস্তোরাঁর চিরকুট। এই ধারণা নতুন নয়। পর্ব ৪-এর observer pattern-এর একটি স্বয়ংক্রিয় রূপ, আর আজকাল একে প্রায়ই signal বলা হয়। নিচের ব্লকটি শেখানোর মডেল, আসল Vue নয়। আসল Vue এখানে লোড করা যায় না, তাই একই ধারণা প্রায় ২৫ লাইনে লেখা হয়েছে। চালিয়ে দেখুন কোন effect আবার চলে।

// শেখানোর মডেল: Vue-র reactivity-র মূল ধারণা, আসল Vue নয়
let active = null;                        // এখন কোন effect চলছে
const deps = new WeakMap();               // object → key → effect-এর Set
function track(obj, key) {
  if (!active) return;
  if (!deps.has(obj)) deps.set(obj, new Map());
  const byKey = deps.get(obj);
  if (!byKey.has(key)) byKey.set(key, new Set());
  byKey.get(key).add(active);             // "এই effect এই key পড়েছে"
}
const trigger = (obj, key) => deps.get(obj)?.get(key)?.forEach((run) => run());
const reactive = (obj) => new Proxy(obj, {
  get(t, k) { track(t, k); return t[k]; },
  set(t, k, v) { if (t[k] !== v) { t[k] = v; trigger(t, k); } return true; },
});
const ref = (value) => reactive({ value });
function effect(fn) {
  const run = () => { const prev = active; active = run; fn(); active = prev; };
  run();
}
function computed(getter) {               // সরল রূপ: আসল computed অলস (lazy)
  const r = ref(undefined);
  effect(() => { r.value = getter(); });
  return r;
}
const cart = reactive({ count: 2, shopper: 'Rafi' });
const price = ref(420);
const total = computed(() => cart.count * price.value);
effect(() => console.log('Badge ->', cart.count));
effect(() => console.log('Name  ->', cart.shopper));
effect(() => console.log('Total ->', total.value));
console.log('--- count = 3');   cart.count = 3;
console.log('--- price = 420'); price.value = 420;
console.log('--- shopper = Mina'); cart.shopper = 'Mina';

Badge -> 2
Name  -> Rafi
Total -> 840
--- count = 3
Total -> 1260
Badge -> 3
--- price = 420
--- shopper = Mina
Name  -> Mina

একই ঘটনা এবার ধাপে ধাপে, চিরকুটের খাতাটি খুলে:

1// deps: count → [computed, Badge]2//       shopper → [Name]3cart.count = 3;4set: 2 !== 3, তাই লেখা হয়5trigger(cart, 'count')6computed: total = 3 * 4207  → trigger(total, 'value')8Badge effect আবার চলে9Name: তালিকায় নেই

৫ · React-এর re-render বনাম Vue-র নির্দিষ্ট update — সত্যিকারের গোনা

তত্ত্ব শুনলে মনে হয় Vue “দ্রুত”। কিন্তু মতামত নয়, মাপ দেখা যাক। দুটি Vite project-এ হুবহু এক ছোট পাতা বানানো হলো। একটি Parent, তার চারটি সন্তান:

• Badge: prop হিসেবে count পায় আর দেখায়।
• Name: prop হিসেবে shopper পায়, যা কখনো বদলায় না।
• Static: কিছুই পায় না, শুধু দোকানের ঠিকানা দেখায়।
• Hits: একটি আলাদা store থেকে hits নিজে পড়ে। Vue-তে একটি module-এর ref, React-এ একটি Zustand store.

প্রতিটি component নিজের render গুনে console-এ লেখে। Vue-তে setup একবারই চলে, তাই গোনা হয়েছে onMounted আর onUpdated দিয়ে। React-এ গোনা হয়েছে function-এর ভেতরে। Vue-র গোনার অংশটুকু:

import { onMounted, onUpdated, ref } from 'vue';
const n: Record<string, number> = {};
export const hits = ref(0);
export function countRenders(name: string) {
  const log = () => console.log(`[render] ${name} ${(n[name] = (n[name] ?? 0) + 1)}`);
  onMounted(log);
  onUpdated(log);
}

সত্যিকারের run (Vue 3.5.44 আর React 19.3.1, দুটোই Vite 8.3.5-এর production build, vite preview, Edge-এ Playwright, StrictMode ছাড়া)। পাতা খোলা হলো, “যোগ” তিনবার আর “দেখা” দুবার চাপা হলো। Console থেকে নেওয়া:

== VUE after load: [render] Badge 1, [render] Name 1, [render] Static 1, [render] Hits 1, [render] Parent 1
== VUE after 3 x add: [render] Badge 2, [render] Parent 2, [render] Badge 3, [render] Parent 3, [render] Badge 4, [render] Parent 4
== VUE after 2 x hit: [render] Hits 2, [render] Hits 3
== REACT after load: [render] Parent 1, [render] Badge 1, [render] Name 1, [render] Static 1, [render] MemoName 1, [render] MemoStatic 1, [render] Hits 1
== REACT after 3 x add: [render] Parent 2, [render] Badge 2, [render] Name 2, [render] Static 2, [render] Hits 2, … (একই ধারা আরও দুবার) …, [render] Hits 4
== REACT after 2 x hit: [render] Hits 5, [render] Hits 6

সংখ্যাগুলো সাবধানে পড়ুন। এক: Vue-তেও Parent ৪ বার চলেছে, কারণ তার template count পড়ে Badge-কে দেয়। Vue “কখনো component আবার চালায় না” এমন নয়। সে চালায় শুধু যে component মানটি পড়েছে। দুই: Parent চলার পর Vue প্রতিটি সন্তানের props আগের সাথে মেলায়। Name আর Static-এর props বদলায়নি, তাই তাদের ছেড়ে দিয়েছে। React-এ এই কাজটি করে memo, যা আপনাকে নিজে লিখতে হয়। তিন: React-এ Hits ৬, কারণ সে Parent-এর সন্তান। Parent চললে সেও চলে, store না বদলালেও।

নিয়মটি এবার একটি ছোট শেখানোর মডেল-এ। এটি আসল React বা Vue নয়, শুধু দুই নিয়মে গোনে। React-এর নিয়ম: যে component-এর state বদলেছে সে আর তার নিচের সবাই চলে, memo থাকলে props না বদলানো সন্তান বাদ যায়। Vue-র নিয়ম: যে মান পড়েছে সে চলে, আর সন্তান চলে শুধু তার prop বদলালে।

// শেখানোর মডেল: দুই ধরনের update গোনা, আসল React বা Vue নয়
const tree = {
  Parent: { reads: ['count', 'shopper'], kids: ['Badge', 'Name', 'Static', 'Hits'] },
  Badge: { props: ['count'], kids: [] },
  Name: { props: ['shopper'], kids: [] },
  Static: { props: [], kids: [] },
  Hits: { reads: ['hits'], kids: [] },
};
function run(style, changes, memo = false) {
  const n = {};
  for (const c in tree) n[c] = 1;                 // প্রথম render সবার একবার
  for (const key of changes) {
    const queue = Object.keys(tree).filter((c) => tree[c].reads?.includes(key));
    while (queue.length) {
      const c = queue.shift();
      n[c]++;
      for (const kid of tree[c].kids) {
        const propChanged = tree[kid].props?.includes(key) ?? false;
        if (style === 'react' && (!memo || propChanged)) queue.push(kid);
        if (style === 'vue' && propChanged) queue.push(kid);
      }
    }
  }
  return Object.entries(n).map(([c, k]) => `${c} ${k}`).join(', ');
}
const clicks = ['count', 'count', 'count', 'hits', 'hits'];
console.log('React       :', run('react', clicks));
console.log('React + memo:', run('react', clicks, true));
console.log('Vue         :', run('vue', clicks));

React       : Parent 4, Badge 4, Name 4, Static 4, Hits 6
React + memo: Parent 4, Badge 4, Name 1, Static 1, Hits 3
Vue         : Parent 4, Badge 4, Name 1, Static 1, Hits 3

দামটাও জানা দরকার। প্রতিটি reactive মানের জন্য পাঠকের তালিকা রাখতে মেমরি লাগে। আর একটি নতুন ফাঁদ আসে: reactive object destructure করলে সংযোগ ছিঁড়ে যায়। const { count } = reactive(state) লিখলে count একটি সাধারণ সংখ্যা, Proxy আর নেই। React-এ এই ফাঁদ নেই, কারণ সেখানে প্রতিটি render নতুন করে মান পড়ে। কোনো মডেল বিনা খরচে আসে না।

৬ · Props, emit, v-model, slot আর directive — React-এর pattern-এর পাশে

পর্ব ৯ থেকে পর্ব ১২ পর্যন্ত React-এ যা শিখেছেন, Vue-তে তার প্রায় সবই আছে, শুধু নাম আর লেখার ধরন আলাদা। এক টেবিলে:

Emit: সন্তান বাবাকে খবর দেয়

React-এ সন্তান বাবার দেওয়া একটি function ডাকে। Vue-তে সন্তান একটি নাম দেওয়া event “ছোড়ে”, আর বাবা @add দিয়ে সেটি ধরে। অফিসের পিয়ন ভাবুন। তিনি সরাসরি ম্যানেজারের খাতায় লেখেন না, শুধু একটি চিরকুট দিয়ে যান: “৩ নম্বর পণ্য যোগ করতে বলেছে।” কী করা হবে, সেটি ম্যানেজারের সিদ্ধান্ত। নিচে একটি ক্লিক বাজারঘরের ঝুড়ি পর্যন্ত কীভাবে পৌঁছায়, দেখুন। শুরুতে ঝুড়ি খালি।

<button @click="emit('add', props.product)">যোগ</button>
cart.lines = []   cart.count = 0

name:    'add'
payload: { id: 1, name: 'Miniket chal 5kg', price: 420, stock: 12 }
// defineEmits-এর type এটি যাচাই করে

<ProductCard ... @add="cart.add">
// Vue payload-টি cart.add(product)-এ দেয়

lines.value.push({ id: 1, price: 420, qty: 1 })
cart.count: 0 → 1   // computed আবার হিসাব হলো

App.vue      ঝুড়ি: 0 → 1      render
ProductList  cart.count পড়ে না     render নেই
ProductCard  props বদলায়নি          render নেই

v-model: দুই দিকের বাঁধন

পর্ব ১২-এ React-এর controlled input দেখেছেন: value={search} আর onChange={e => setSearch(e.target.value)}. Vue এই জোড়াটিকে একটি শব্দে বাঁধে: v-model="search". একে বলে two-way binding. মান বদলালে input বদলায়, input-এ লিখলে মান বদলায়। এটি জাদু নয়। Compiler এটিকে আসলে একটি value আর একটি input event-এ ভেঙে দেয়। নিজের component-এ v-model চাইলে Vue 3.4 থেকে defineModel() আছে।

নিচে একটি শেখানোর মডেল, সাধারণ DOM আর Proxy দিয়ে v-model-এর ধারণা। Vue লোড হয়নি। Input-এ লিখে দেখুন, আর “খালি করুন” চাপুন। দুই দিকেই বদল দেখা যায়।

<input data-model="search" placeholder="খুঁজুন">
<button id="clear">খালি করুন</button>
<p>খুঁজছেন: <b data-text="search"></b></p>
<script>
// শেখানোর মডেল: v-model-এর ধারণা, আসল Vue নয়
const watchers = {};
const state = new Proxy({ search: '' }, {
  set(t, k, v) {
    t[k] = v;
    (watchers[k] || []).forEach((fn) => fn(v));
    return true;
  },
});
const on = (k, fn) => { (watchers[k] ||= []).push(fn); fn(state[k]); };
document.querySelectorAll('[data-text]').forEach((el) =>
  on(el.dataset.text, (v) => { el.textContent = v; }));
document.querySelectorAll('[data-model]').forEach((el) => {
  const k = el.dataset.model;
  on(k, (v) => { if (el.value !== v) el.value = v; });          // state থেকে input
  el.addEventListener('input', () => { state[k] = el.value; }); // input থেকে state
});
on('search', (v) => console.log('search =', JSON.stringify(v)));
document.getElementById('clear').onclick = () => { state.search = ''; };
const box = document.querySelector('[data-model]');
box.value = 'dal'; box.dispatchEvent(new Event('input'));   // টাইপ করার মতো
state.search = 'chal';                                        // কোড থেকে বদল
</script>

search = ""
search = "dal"
search = "chal"

Slot: ফাঁকা জায়গায় বাবার markup

ProductCard-এ <slot name="badge" /> একটি ফাঁকা খোপ। ProductList সেখানে <template #badge> দিয়ে নিজের “স্টক নেই” লেখাটি বসায়। React-এ একই কাজ হয়েছে badge নামের একটি JSX prop দিয়ে, যাকে কোর্সে slot prop বলা হয়েছে। নাম ছাড়া <slot /> হলো React-এর children. Vue-তে scoped slot নামে আরেকটি ধরন আছে, যেখানে সন্তান slot-কে data ফেরত দেয়, অনেকটা React-এর render prop-এর মতো।

v-if, v-show আর v-for-এর key

• v-if: শর্ত মিথ্যা হলে element DOM-এ থাকেই না। React-এর &&-এর মতো।
• v-show: element সবসময় থাকে, শুধু CSS-এ display: none হয়। ঘন ঘন খোলা-বন্ধ হলে এটি সস্তা। React-এ এর সরাসরি জোড়া নেই, style দিয়ে নিজে করতে হয়।
• v-for আর :key: key-এর কাজ React-এর মতোই। তালিকা থেকে কোনো পণ্য সরালে বা ক্রম বদলালে কোন node কোন পণ্যের, Vue তা key দিয়ে চেনে। Index-কে key বানালে input-এর লেখা ভুল সারিতে চলে যাওয়ার সেই পুরোনো bug এখানেও ঘটে।
• এক element-এ v-if আর v-for একসাথে নয়: Vue 3-এ v-if আগে চলে, তাই সে loop-এর variable দেখতে পায় না। আগে computed-এ filter করুন, যেমন বাজারঘরের shown.

৭ · Pinia আর Vue Router

পর্ব ১৮-এ Zustand আর Redux Toolkit দেখেছেন। Vue-র সরকারি store হলো Pinia, যা আগের Vuex-এর জায়গা নিয়েছে। Pinia-র “setup store” আসলে একটি composable: ভেতরে সেই একই ref আর computed.

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import type { Product } from '../products';

export const useCart = defineStore('cart', () => {
  const lines = ref<{ id: number; price: number; qty: number }[]>([]);
  const count = computed(() => lines.value.reduce((n, l) => n + l.qty, 0));
  function add(p: Product) {
    const line = lines.value.find((l) => l.id === p.id);
    if (line) line.qty++;
    else lines.value.push({ id: p.id, price: p.price, qty: 1 });
  }
  return { lines, count, add };
});

import { create } from 'zustand';
import type { Product } from './products';

type Line = { id: number; price: number; qty: number };
type Cart = { lines: Line[]; add: (p: Product) => void };

export const useCart = create<Cart>((set) => ({
  lines: [],
  add: (p) =>
    set((s) => {
      const line = s.lines.find((l) => l.id === p.id);
      if (!line) return { lines: [...s.lines, { id: p.id, price: p.price, qty: 1 }] };
      return { lines: s.lines.map((l) => (l.id === p.id ? { ...l, qty: l.qty + 1 } : l)) };
    }),
}));

লাইন সংখ্যা সমান (১৩), কিন্তু ভাবনা আলাদা। Zustand-এ নতুন array আর নতুন object বানাতে হয়, কারণ React reference মিলিয়ে বদল চেনে। Pinia-তে line.qty++ সরাসরি লেখা যায়, কারণ Proxy নিজেই লেখা ধরে। আর Pinia-তে selector লাগে না। Component যা পড়ে, শুধু তাতেই নির্ভর করে।

Vue Router-এর ধারণাও পর্ব ২০-এর React Router-এর মতো। Route-এর তালিকা, <RouterView> হলো React-এর <Outlet>, <RouterLink> হলো <Link>, আর useRoute().params হলো useParams(). বাজারঘরের দুই পাতার আসল router:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import ProductList from './pages/ProductList.vue';
import ProductPage from './pages/ProductPage.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: ProductList },
    { path: '/products/:id', component: ProductPage },
  ],
});

createApp(App).use(createPinia()).use(router).mount('#app');

Vue Router 5-এর একটি খবর: আগে আলাদা plugin-এ থাকা file-ভিত্তিক routing এখন মূল package-এ এসেছে। নথি অনুযায়ী যাঁরা file routing ব্যবহার করেন না, তাঁদের জন্য version 4 থেকে 5-এ বড় কোনো ভাঙন নেই। এখানে হাতে লেখা তালিকাই রাখা হয়েছে, কারণ Nuxt-এ file routing আসছে একটু পরেই।

৮ · Nuxt — file routing, useFetch, server/api আর rendering

Vue একা একটি UI library-র মতো। Server rendering, file দিয়ে route আর backend-এর API একসাথে চাইলে লাগে একটি meta-framework. React-এর জন্য যেমন Next.js, Vue-র জন্য তেমন Nuxt. Nuxt প্রথম আসে ২০১৬ সালে, Next.js-এর অল্প পরেই, আর এর পেছনে Chopin ভাইদের নাম প্রচলিত। Nuxt 4 এসেছে ২০২৫-এর জুলাইয়ে। লেখার সময়ে stable version 4.6.3.

$ npm create nuxt@4.0.1 bazarghar-nuxt -- --template minimal --packageManager npm --gitInit=false --no-install
$ cd bazarghar-nuxt && npm install

Nuxt 4-এ অ্যাপের কোড থাকে app/ ফোল্ডারে, আর server-এর কোড server/-এ। ফাইলের নামই route. বাজারঘরের পুরো গঠন:

bazarghar-nuxt/
├─ app/
│  ├─ app.vue                  ← header + <NuxtPage />
│  ├─ pages/
│  │  ├─ index.vue             ← /
│  │  └─ products/[id].vue     ← /products/1, /products/2 …
│  ├─ components/ProductCard.vue
│  └─ composables/useCart.ts
├─ server/
│  ├─ api/products/index.get.ts   ← GET /api/products
│  ├─ api/products/[id].get.ts    ← GET /api/products/:id
│  └─ utils/products.ts
└─ nuxt.config.ts

পর্ব ৫১-এর Next.js-এ যেমন app/products/[id]/page.tsx, Nuxt-এ তেমন pages/products/[id].vue. File-based routing-এর ধারণা এক, নামের নিয়ম আলাদা। আর server/api-র প্রতিটি ফাইল একটি server route, যা চালায় Nuxt-এর server engine Nitro. Next.js-এর route handler-এর মতো, যা পর্ব ৫৭-এ দেখেছেন।

export default defineEventHandler((event) => {
  const id = Number(getRouterParam(event, 'id'));
  const product = products.find((p) => p.id === id);
  if (!product) throw createError({ statusCode: 404, statusMessage: 'Product not found' });
  return product;
});

<script setup lang="ts">
const route = useRoute();
const { add } = useCart();
const { data: product, error } = await useFetch(`/api/products/${route.params.id}`);
</script>

<template>
  <article v-if="product">
    <h1>{{ product.name }}</h1>
    <p>দাম: ৳{{ product.price }} · মজুত: {{ product.stock }}</p>
    <button :disabled="product.stock === 0" @click="add(product)">ঝুড়িতে যোগ</button>
  </article>
  <h1 v-else-if="error">পণ্যটি পাওয়া যায়নি ({{ error.statusCode }})</h1>
</template>

type Line = { id: number; price: number; qty: number };

export function useCart() {
  const lines = useState<Line[]>('cart', () => []);
  const count = computed(() => lines.value.reduce((n, l) => n + l.qty, 0));
  function add(p: { id: number; price: number }) {
    const line = lines.value.find((l) => l.id === p.id);
    if (line) line.qty++;
    else lines.value.push({ id: p.id, price: p.price, qty: 1 });
  }
  return { count, add };
}

লক্ষ করুন, কোনো ফাইলে import নেই। ref, computed, useFetch, useRoute, এমনকি নিজের useCart আর ProductCard, সব Nuxt নিজে যোগ করে। একে বলে auto-import. Server-এর products-ও server/utils থেকে আপনা থেকে আসে। এর সুবিধা-অসুবিধা একটু পরে।

useFetch আর useAsyncData: একবার আনা, দুবার নয়

Server rendering-এ একটি পুরোনো সমস্যা আছে, যা পর্ব ৫৬-এ দেখেছেন। একই component দুই জায়গায় চলে: প্রথমে server-এ HTML বানাতে, তারপর browser-এ hydration-এর জন্য। setup-এ সরাসরি $fetch লিখলে API দুবার ডাকা হবে। useFetch এটি ঠেকায়। Server-এ আনা ফল HTML-এর ভেতরে payload হিসেবে যায়, আর browser সেখান থেকে পড়ে, আবার আনে না। যেকোনো async function-এর জন্য একই কাজ করে useAsyncData. ক্লিক বা form-এর মতো ঘটনায় সাধারণ $fetch-ই ঠিক, কারণ সেটি শুধু browser-এ চলে।

আগে শেখানোর মডেল, শুধু Node-এর built-in দিয়ে। এখানে makeUseFetch নিয়মটুকু করে: payload-এ থাকলে আর আনবে না।

// শেখানোর মডেল: payload কীভাবে দুবার আনা ঠেকায়, আসল Nuxt নয়
const http = require('node:http');
const products = [{ id: 1, name: 'Miniket chal 5kg' }, { id: 2, name: 'Masur dal 1kg' }];
let apiHits = 0, base;
const getJson = (path) => fetch(base + path).then((r) => r.json());
function makeUseFetch(payload) {                 // payload-এ থাকলে আর আনে না
  return async (key) => (key in payload ? payload[key] : (payload[key] = await getJson(key)));
}
const server = http.createServer(async (req, res) => {
  if (req.url === '/api/products') { apiHits++; return res.end(JSON.stringify(products)); }
  const payload = {};                            // প্রতি request-এর নিজের payload
  const list = await makeUseFetch(payload)('/api/products');
  const html = `<ul>${list.map((p) => `<li>${p.name}</li>`).join('')}</ul>`;
  res.end(`${html}<script id="payload">${JSON.stringify(payload)}</script>`);
});
server.listen(0, '127.0.0.1', async () => {
  base = `http://127.0.0.1:${server.address().port}`;
  const page = await (await fetch(base + '/')).text();
  console.log('HTML:', page.slice(0, 45) + '...');
  console.log('API hits after server render:', apiHits);
  // browser-এ hydration: HTML-এর ভেতরের payload পড়ে
  const sent = JSON.parse(page.match(/id="payload">(.*)<\/script>/)[1]);
  const again = await makeUseFetch(sent)('/api/products');
  console.log('API hits after hydration    :', apiHits, '| products:', again.length);
  // ভুল পথ: setup-এ সরাসরি fetch, যা browser-এ আবার চলে
  await getJson('/api/products');
  console.log('API hits with a plain fetch :', apiHits);
  server.close();
});

HTML: <ul><li>Miniket chal 5kg</li><li>Masur dal 1k...
API hits after server render: 1
API hits after hydration    : 1 | products: 2
API hits with a plain fetch : 2

এবার আসল Nuxt. সত্যিকারের run: nuxt build, তারপর node .output/server/index.mjs একটি local port-এ, আর Edge-এ Playwright দিয়ে network দেখা। একটি পাতার অনুরোধ পুরো পথে:

GET /
// এখনো কোনো JavaScript নেই

await useFetch('/api/products')
// server-এর ভেতরেই API route ডাকা হলো, network ছাড়া
[server] GET /api/products

<li class="card"><a href="/products/1">Miniket chal 5kg</a><span>৳420</span>…
<script type="application/json" id="__NUXT_DATA__">
[…,"Miniket chal 5kg",420,12,…,"Masur dal 1kg",135,0,…]

script /_nuxt/Ce0dpAcg.js  …  ৬টি JS ফাইল
fetch /api/products: নেই
// useFetch payload থেকে পড়ল

fetch /api/products/1   57 bytes
নতুন HTML নেই, পাতা বদলায় client-এ
ঝুড়িতে যোগ → ঝুড়ি: 1

Build-এর আসল আউটপুট (লম্বা path-এর শুরু “…” দিয়ে ছোট করা, server-এর বেশিরভাগ লাইন বাদ):

$ npm run build
● Nuxt 4.6.3 (with Nitro 2.13.6, Vite 8.3.5 and Vue 3.5.44)
● Nitro preset: node-server
ℹ vite v8.3.5 building client environment for production...
✓ 182 modules transformed.
…/client/_nuxt/8sweXEme.js     1.53 kB │ gzip:  0.94 kB
…/client/_nuxt/Bi0CVc-0.js    12.04 kB │ gzip:  4.57 kB
…/client/_nuxt/DWpamHSj.js    28.70 kB │ gzip: 11.67 kB
…/client/_nuxt/t4csLo-a.js    68.67 kB │ gzip: 25.56 kB
…/client/_nuxt/Ce0dpAcg.js    92.94 kB │ gzip: 35.61 kB
…
[nitro] ✔ Nuxt Nitro server built
  ├─ .output/server/chunks/routes/api/index.get.mjs (553 B) (279 B gzip)
  ├─ .output/server/chunks/routes/api/products/_id_.get.mjs (749 B) (371 B gzip)
  …
Σ Total size: 2.15 MB (547 kB gzip)
[nitro] ✔ You can preview this build using node .output/server/index.mjs
◆ ✨ Build complete in 4.76s!

প্রথম পাতায় browser যে ৬টি JS ফাইল নামাল, Vite-এর হিসাবে তাদের মোট gzip আকার 78.89 kB. Server-এর পুরো .output 2.15 MB, যা browser-এ যায় না। একটি অনুরোধ ভুল id নিয়ে গেলে createError-এর ফল সত্যিকারের run-এ এমন এলো:

GET /api/products/99  →  HTTP 404
{ "error": true, "statusCode": 404, "statusMessage": "Product not found", "message": "Product not found", … }
পাতা /products/99 → h1: পণ্যটি পাওয়া যায়নি (404)

Rendering mode আর route rules

Nuxt-এর default হলো universal rendering: প্রথম পাতা server-এ HTML, তারপর browser-এ SPA. পর্ব ৫৫-এর সব কৌশল এখানে route rules দিয়ে URL ধরে ধরে বেছে নেওয়া যায়। Nuxt-এর নথির উদাহরণের ধাঁচে বাজারঘরের জন্য:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },              // build-এর সময় HTML (SSG)
    '/products/**': { swr: 3600 },         // cache, পেছনে নতুন করা
    '/blog/**': { isr: 3600 },             // CDN-এ cache, সমর্থন থাকলে
    '/admin/**': { ssr: false },           // শুধু browser-এ (CSR)
  },
});

এই config-টি নথির ধাঁচে লেখা উদাহরণ, এই পর্বের project-এ চালানো হয়নি। কোন rule কোথায় আসলে কাজ করবে, তা deployment-এর ধরনের ওপরও নির্ভর করে। ISR-এর মতো কিছু rule-এর জন্য hosting-এর সমর্থন লাগে। পুরো অ্যাপ browser-এ চালাতে চাইলে ssr: false.

Auto-import: আরাম আর তার দাম

৯ · বাজারঘর তিনভাবে — মাপ, আর কখন Vue বা Nuxt

একই দুই পাতা, তিনটি project: পণ্যের তালিকা (খোঁজা, স্টক নেই লেখা, যোগ বোতাম) আর পণ্যের পাতা, সঙ্গে ঝুড়ির সংখ্যা। Vue আর React দুটোই create-vite 9.3.3 থেকে, router আর store সহ। পণ্যের ৯ লাইনের ডেটা-ফাইল তিনটিতেই এক, তাই লাইনের হিসাবে ধরা হয়নি।

# ~/vue-shop  (Vue 3.5.44, Vue Router 5.4.0, Pinia 4.1.0)
$ npm run build
✓ 30 modules transformed.
dist/assets/index-BfXAcdUC.js   98.47 kB │ gzip:  38.48 kB

# ~/react-shop  (React 19.3.1, React Router 8.5.1, Zustand 5.0.16)
$ npm run build
✓ 100 modules transformed.
dist/assets/index-BnuNcq42.js  316.66 kB │ gzip: 100.05 kB

# শুধু framework, একটি counter বোতাম (একই project-এ আলাদা entry)
Vue:   dist-min/assets/min-CusSLt7K.js   61.96 kB │ gzip: 24.38 kB
React: dist-min/assets/min-BWHS8rFc.js  219.55 kB │ gzip: 68.61 kB

সংখ্যাগুলো সতর্ক হয়ে পড়ুন। এগুলো একটি ছোট demo-র একটি local run, সাধারণ সিদ্ধান্ত নয়। React-এর দিকে বড় অংশটি React DOM আর React Router 8, যা loader, action, data API-র মতো অনেক কিছু নিয়ে আসে। পর্ব ২০-এর পুরো ক্ষমতা এখানে ব্যবহারই হয়নি। Nuxt-এর ৭৮.৮৯ kB-এর সাথে Vue SPA-র ৩৮.৪৮ kB সরাসরি তুলনীয়ও নয়। Nuxt-এ আছে hydration, payload, head ব্যবস্থাপনা আর error পাতা, আর বিনিময়ে প্রথম HTML-এই data চলে আসে। বড় অ্যাপে framework-এর এককালীন আকারের চেয়ে আপনার নিজের কোড আর library দ্রুত বড় হয়।

কখন Vue বা Nuxt বেছে নেবেন

Community-তে এ নিয়ে মতভেদ আছে। কেউ বলেন Vue শেখা সহজ আর কম ভুলের সুযোগ দেয়। কেউ বলেন React-এর ecosystem বড় বলে সেটি বেশি সুবিধার। দুই দিকেরই যুক্তি আছে, আর বাজারের অবস্থা দেশ আর সময়ভেদে বদলায়। Laravel-এর সাথে Vue-র একটি পুরোনো যোগ আছে: Laravel-এর starter kit-এ বহুদিন ধরে Vue একটি বিকল্প, যা পর্ব ৭০-এ Laravel দেখার সময় কাজে লাগবে। কোন framework-এর চাকরি বেশি, তার নির্ভরযোগ্য সংখ্যা এখানে দেওয়া হচ্ছে না; নিজের শহরের বিজ্ঞাপন দেখে নিন। একটি framework ভালো করে জানলে অন্যটি শিখতে কয়েক সপ্তাহ লাগে, কারণ component, state, effect আর routing-এর ধারণা একই।

১০ · AI-এর যুগে Vue আর Nuxt

Vue 2 আর Nuxt 2-এর কোড ইন্টারনেটে অনেক বছর ধরে জমেছে। তাই AI প্রায়ই পুরোনো ধাঁচের কোড দেয়, যা আজকের version-এ চলে না বা অন্যভাবে চলে। কোড চললেও সেটি এখনকার পথ নাও হতে পারে।

AI-এর লেখা Vue বা Nuxt কোড হাতে পেলে

• package.json-এর version আর import path সরকারি docs-এর সাথে মিলিয়েছি
• npm run build (Vue-তে vue-tsc সহ) চালিয়ে প্রতিটি warning আর error পড়েছি
• Browser-এর Network tab-এ দেখেছি, প্রথম পাতায় API একবারও দুবার ডাকা হয়নি
• Server-এ module-স্তরের state নেই, আর কোনো secret browser-এর bundle-এ যায়নি
• Diff পড়েছি, অন্তত একটি component বা API route-এর test লিখেছি