[{"data":1,"prerenderedAt":135},["ShallowReactive",2],{"blog-tech-vue":3},[4,24,37,51,68,81,93,107,121],{"id":5,"slug":6,"title":7,"subtitle":8,"shortDescription":9,"description":10,"featureImage":11,"category":12,"tags":13,"author":17,"publishedDate":18,"featured":19,"relatedPosts":20,"tech":23},1,"mastering-vue-3-composition-api","Mastering Vue 3 Composition API","A deep dive into reactive state management","Explore the Vue 3 Composition API and learn how to build scalable, maintainable applications with reactive state, composables, and the setup() function.","\u003Cp>The Vue 3 Composition API represents a fundamental shift in how we organize and reuse component logic. Unlike the Options API, the Composition API lets you group related logic together, making complex components far easier to understand and maintain.\u003C\u002Fp>\u003Ch2>Why the Composition API?\u003C\u002Fh2>\u003Cp>When components grow beyond a few hundred lines, the Options API can become difficult to navigate — related logic is split across \u003Ccode>data\u003C\u002Fcode>, \u003Ccode>methods\u003C\u002Fcode>, \u003Ccode>computed\u003C\u002Fcode>, and \u003Ccode>watch\u003C\u002Fcode>. The Composition API solves this by letting you co-locate logic by feature.\u003C\u002Fp>\u003Ch2>Key Concepts\u003C\u002Fh2>\u003Cp>\u003Cstrong>setup()\u003C\u002Fstrong> is the entry point for Composition API code. It runs before the component is created, so \u003Ccode>this\u003C\u002Fcode> is unavailable. Instead, you use \u003Ccode>ref()\u003C\u002Fcode> and \u003Ccode>reactive()\u003C\u002Fcode> to declare state.\u003C\u002Fp>\u003Cp>\u003Cstrong>Composables\u003C\u002Fstrong> are the real power — reusable functions that encapsulate and return reactive state. Think of them as Vue's answer to React Hooks.\u003C\u002Fp>\u003Ch2>Practical Example\u003C\u002Fh2>\u003Cp>A \u003Ccode>useCounter()\u003C\u002Fcode> composable returns \u003Ccode>count\u003C\u002Fcode>, \u003Ccode>increment\u003C\u002Fcode>, and \u003Ccode>decrement\u003C\u002Fcode>, and can be reused across any component. This pattern scales beautifully to complex state management without reaching for Vuex or Pinia prematurely.\u003C\u002Fp>\u003Cp>The Composition API isn't just syntactic sugar — it unlocks TypeScript inference, tree-shaking, and a cleaner mental model for complex component logic.\u003C\u002Fp>","https:\u002F\u002Fextensive-amber-3i6-draft.caffeine.xyz\u002Fassets\u002Fgenerated\u002Fblog-vue-mastery.dim_800x450.jpg","Vue.js",[12,14,15,16],"JavaScript","Composition API","Frontend","Alex Chen","2024-03-15",true,[21,22],2,3,"vue",{"id":21,"slug":25,"title":26,"subtitle":27,"shortDescription":28,"description":29,"featureImage":30,"category":31,"tags":32,"author":17,"publishedDate":35,"featured":19,"relatedPosts":36,"tech":23},"advanced-react-patterns-2024","Advanced React Patterns in 2024","Compound components, render props, and hooks deep dive","Discover the most powerful React patterns for building flexible, reusable component libraries — compound components, render props, custom hooks, and the latest React 19 features.","\u003Cp>React's component model is deceptively simple, but mastering advanced patterns unlocks a whole new level of expressiveness and reusability. In 2024, with React 19 stable, these patterns have never been more powerful.\u003C\u002Fp>\u003Ch2>Compound Components\u003C\u002Fh2>\u003Cp>Compound components share implicit state through React Context, giving consumers a clean API while hiding the complexity. The classic example is a custom \u003Ccode><Select>\u003C\u002Fcode> with \u003Ccode><Select.Option>\u003C\u002Fcode> children — each child knows about the parent's selected value without explicit prop drilling.\u003C\u002Fp>\u003Ch2>Custom Hooks\u003C\u002Fh2>\u003Cp>Hooks are React's composability story. A well-crafted \u003Ccode>useAsync()\u003C\u002Fcode> hook handles loading, error, and data states uniformly across your application. Combine it with \u003Ccode>useCallback\u003C\u002Fcode> for stable references and you have a production-ready data-fetching primitive.\u003C\u002Fp>\u003Ch2>React 19 Improvements\u003C\u002Fh2>\u003Cp>React 19 introduces the \u003Ccode>use()\u003C\u002Fcode> hook for reading resources, improved server components, and the Actions API for form handling. These aren't just incremental improvements — they reshape how we think about async in React components.\u003C\u002Fp>\u003Cp>Understanding these patterns deeply will make you a better library author and a more thoughtful component designer.\u003C\u002Fp>","\u002Fassets\u002Fgenerated\u002Fblog-react-patterns.dim_800x450.jpg","React",[31,14,33,34,16],"TypeScript","Patterns","2024-04-02",[5,22],{"id":22,"slug":38,"title":39,"subtitle":40,"shortDescription":41,"description":42,"featureImage":43,"category":44,"tags":45,"author":17,"publishedDate":48,"featured":49,"relatedPosts":50,"tech":23},"tailwind-css-design-systems","Building Design Systems with Tailwind CSS","From tokens to components — a systematic approach","Learn how to architect a robust design system using Tailwind CSS, OKLCH color tokens, and component variants that scale across large teams and diverse products.","\u003Cp>Tailwind CSS has transformed front-end development, but its true power emerges when you use it as the foundation of a systematic design language — not just a utility library.\u003C\u002Fp>\u003Ch2>Design Tokens First\u003C\u002Fh2>\u003Cp>Great design systems start with tokens: semantic color aliases, spacing scales, and typography definitions. With Tailwind's CSS variable support and OKLCH colors, you can build tokens that work perfectly across light and dark modes with predictable perceptual contrast.\u003C\u002Fp>\u003Ch2>Component Variants with CVA\u003C\u002Fh2>\u003Cp>\u003Ccode>class-variance-authority\u003C\u002Fcode> (CVA) brings type-safe component variants to Tailwind. Define your \u003Ccode>Button\u003C\u002Fcode> with variants like \u003Ccode>variant\u003C\u002Fcode> and \u003Ccode>size\u003C\u002Fcode>, and CVA handles the conditional class logic cleanly. No more ternary soup in your JSX.\u003C\u002Fp>\u003Ch2>Dark Mode Done Right\u003C\u002Fh2>\u003Cp>Don't just invert colors — rethink them. OKLCH lets you maintain perceptual brightness and saturation relationships across themes. A primary blue at L:0.5 in light mode should be L:0.62 in dark mode to feel equally prominent.\u003C\u002Fp>\u003Cp>A systematic approach to Tailwind pays dividends as your product scales — consistent spacing, predictable hover states, and a single source of truth for every visual decision.\u003C\u002Fp>","https:\u002F\u002Fextensive-amber-3i6-draft.caffeine.xyz\u002Fassets\u002Fgenerated\u002Fblog-tailwind-design.dim_800x450.jpg","CSS",[46,47,44,16],"Tailwind CSS","Design Systems","2024-04-18",false,[5,21],{"id":52,"slug":53,"title":54,"subtitle":55,"shortDescription":56,"description":57,"featureImage":58,"category":12,"tags":59,"author":62,"publishedDate":63,"featured":19,"relatedPosts":64,"tech":23},7,"vue-35-new-features","Vue 3.5 New Features: Complete Overview","Exploring the latest improvements in Vue 3.5","Vue 3.5 introduces reactive props destructuring, improved SSR, and performance enhancements.","Vue 3.5 brings several exciting features that improve developer experience and application performance. Let's dive into what's new.\n\n## Reactive Props Destructuring\n\n```vue\n\u003Cscript setup>\nconst { title, count = 0 } = defineProps(['title', 'count'])\n\u003C\u002Fscript>\n```\n\nProps are now reactive when destructured in `\u003Cscript setup>`. This was a highly requested feature!\n\n## useTemplateRef()\n\n```vue\n\u003Cscript setup>\nimport { useTemplateRef, onMounted } from 'vue'\n\nconst inputRef = useTemplateRef('input')\n\nonMounted(() => {\n  inputRef.value?.focus()\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput ref=\"input\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n## Deferred Teleport\n\n```vue\n\u003CTeleport defer to=\"#container\">\n  \u003Cdiv>Teleported content\u003C\u002Fdiv>\n\u003C\u002FTeleport>\n```\n\nThe `defer` attribute ensures the target element exists before teleporting.\n\n## Performance Improvements\n\n- 56% faster SSR\n- Improved memory usage in reactive system\n- Better tree-shaking support\n\n## Migration\n\nUpgrade is seamless for most applications:\n\n```bash\nnpm update vue\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1614624532983-4ce03382d63d?w=800&auto=format&fit=crop",[60,12,16,61],"Vue 3.5","Updates","Satish Vishwakarma","2026-04-18",[65,66,67],8,9,10,{"id":65,"slug":69,"title":70,"subtitle":71,"shortDescription":72,"description":73,"featureImage":74,"category":12,"tags":75,"author":62,"publishedDate":78,"featured":19,"relatedPosts":79,"tech":23},"vue-composition-api-complete-guide","Vue Composition API: Complete Guide","Master the Composition API for better code organization","Learn how to use the Composition API to write more maintainable Vue applications.","The Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options.\n\n## Why Composition API?\n\n1. Better logic reuse through composables\n2. More flexible code organization\n3. Better TypeScript integration\n4. Improved tree-shaking\n\n## Reactive State\n\n```vue\n\u003Cscript setup>\nimport { ref, reactive, computed } from 'vue'\n\n\u002F\u002F Primitive values\nconst count = ref(0)\n\n\u002F\u002F Objects\nconst user = reactive({\n  name: 'Satish',\n  role: 'Developer'\n})\n\n\u002F\u002F Computed\nconst doubleCount = computed(() => count.value * 2)\n\nfunction increment() {\n  count.value++\n}\n\u003C\u002Fscript>\n```\n\n## Watchers\n\n```js\nimport { watch, watchEffect } from 'vue'\n\n\u002F\u002F Watch specific source\nwatch(count, (newVal, oldVal) => {\n  console.log(`Count changed from ${oldVal} to ${newVal}`)\n})\n\n\u002F\u002F Auto-track dependencies\nwatchEffect(() => {\n  console.log(`Count is: ${count.value}`)\n})\n```\n\n## Lifecycle Hooks\n\n```js\nimport { onMounted, onUnmounted } from 'vue'\n\nonMounted(() => {\n  console.log('Component mounted')\n})\n\nonUnmounted(() => {\n  console.log('Component unmounted')\n})\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1627398242454-45a1465c2479?w=800&auto=format&fit=crop",[15,12,76,77],"Best Practices","Architecture","2026-04-12",[52,66,80],11,{"id":66,"slug":82,"title":83,"subtitle":84,"shortDescription":85,"description":86,"featureImage":87,"category":12,"tags":88,"author":62,"publishedDate":91,"featured":49,"relatedPosts":92,"tech":23},"vue-composables-patterns","Vue Composables: Patterns and Best Practices","Building reusable logic with composables","Learn how to create and use composables effectively in your Vue applications.","Composables are functions that leverage Vue's Composition API to encapsulate and reuse stateful logic.\n\n## Creating a Composable\n\n```js\n\u002F\u002F composables\u002FuseMouse.js\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nexport function useMouse() {\n  const x = ref(0)\n  const y = ref(0)\n\n  function update(event) {\n    x.value = event.pageX\n    y.value = event.pageY\n  }\n\n  onMounted(() => window.addEventListener('mousemove', update))\n  onUnmounted(() => window.removeEventListener('mousemove', update))\n\n  return { x, y }\n}\n```\n\n## Using Composables\n\n```vue\n\u003Cscript setup>\nimport { useMouse } from '@\u002Fcomposables\u002FuseMouse'\n\nconst { x, y } = useMouse()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>Mouse position: {{ x }}, {{ y }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n```\n\n## Async Composable Pattern\n\n```js\nexport function useFetch(url) {\n  const data = ref(null)\n  const error = ref(null)\n  const loading = ref(true)\n\n  fetch(url)\n    .then(res => res.json())\n    .then(json => {\n      data.value = json\n    })\n    .catch(err => {\n      error.value = err\n    })\n    .finally(() => {\n      loading.value = false\n    })\n\n  return { data, error, loading }\n}\n```\n\n## Best Practices\n\n1. Start with `use` prefix\n2. Return refs, not raw values\n3. Handle cleanup in `onUnmounted`\n4. Keep composables focused and small","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-bf19f8fd1085?w=800&auto=format&fit=crop",[89,15,90,34],"Composables","Reusability","2026-04-08",[52,65,67],{"id":67,"slug":94,"title":95,"subtitle":96,"shortDescription":97,"description":98,"featureImage":99,"category":12,"tags":100,"author":62,"publishedDate":105,"featured":49,"relatedPosts":106,"tech":23},"vue-navigation-guards","Vue Router Navigation Guards Explained","Controlling navigation flow in Vue applications","Master Vue Router navigation guards for authentication and route protection.","Navigation guards allow you to control navigation in your Vue application. Let's explore all types of guards.\n\n## Global Guards\n\n```js\nrouter.beforeEach((to, from) => {\n  if (to.meta.requiresAuth && !isAuthenticated()) {\n    return { name: 'login' }\n  }\n})\n\nrouter.afterEach((to, from) => {\n  sendAnalytics(to.fullPath)\n})\n```\n\n## Per-Route Guards\n\n```js\nconst routes = [\n  {\n    path: '\u002Fdashboard',\n    component: Dashboard,\n    beforeEnter: (to, from) => {\n      if (!hasPermission()) {\n        return '\u002Funauthorized'\n      }\n    }\n  }\n]\n```\n\n## In-Component Guards\n\n```vue\n\u003Cscript setup>\nimport { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'\n\nonBeforeRouteLeave((to, from) => {\n  if (hasUnsavedChanges.value) {\n    return confirm('Discard changes?')\n  }\n})\n\nonBeforeRouteUpdate((to, from) => {\n  \u002F\u002F Fetch new data when route params change\n  fetchData(to.params.id)\n})\n\u003C\u002Fscript>\n```\n\n## Route Meta Fields\n\n```js\n{\n  path: '\u002Fadmin',\n  meta: { requiresAuth: true, roles: ['admin'] },\n  component: AdminPanel\n}\n```\n\n## Navigation Resolution Flow\n\n1. beforeRouteLeave (component)\n2. beforeEach (global)\n3. beforeEnter (route)\n4. beforeRouteEnter (component)\n5. afterEach (global)","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1558618666-fcd25c85cd64?w=800&auto=format&fit=crop",[101,102,103,104],"Vue Router","Navigation Guards","Authentication","Security","2026-04-02",[65,66,80],{"id":80,"slug":108,"title":109,"subtitle":110,"shortDescription":111,"description":112,"featureImage":113,"category":12,"tags":114,"author":62,"publishedDate":119,"featured":19,"relatedPosts":120,"tech":23},"pinia-vs-vuex-comparison","Pinia vs Vuex: Which Should You Choose?","A comprehensive comparison of Vue state management solutions","Comparing Pinia and Vuex to help you choose the right state management for your project.","Pinia is now the official state management solution for Vue. Let's compare it with Vuex to understand the differences.\n\n## Pinia Example\n\n```js\nimport { defineStore } from 'pinia'\n\nexport const useUserStore = defineStore('user', {\n  state: () => ({\n    name: '',\n    isLoggedIn: false\n  }),\n  \n  getters: {\n    greeting: (state) => `Hello, ${state.name}!`\n  },\n  \n  actions: {\n    async login(credentials) {\n      const user = await api.login(credentials)\n      this.name = user.name\n      this.isLoggedIn = true\n    }\n  }\n})\n```\n\n## Key Differences\n\n| Feature | Pinia | Vuex |\n|---------|-------|------|\n| Mutations | No | Yes |\n| TypeScript | Excellent | Good |\n| Devtools | Built-in | Built-in |\n| Bundle Size | ~1KB | ~10KB |\n| Modules | Flat stores | Nested |\n\n## Pinia Composition Style\n\n```js\nexport const useCounterStore = defineStore('counter', () => {\n  const count = ref(0)\n  const doubleCount = computed(() => count.value * 2)\n  \n  function increment() {\n    count.value++\n  }\n  \n  return { count, doubleCount, increment }\n})\n```\n\n## Recommendation\n\n**Choose Pinia** for new projects - it's simpler, more intuitive, and officially recommended.\n\n**Migrate from Vuex** when possible - the migration path is straightforward.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633356122544-f134324a6cee?w=800&auto=format&fit=crop",[115,116,117,118],"Pinia","Vuex","State Management","Comparison","2026-03-25",[52,65,66],{"id":122,"slug":123,"title":124,"subtitle":125,"shortDescription":126,"description":127,"featureImage":128,"category":12,"tags":129,"author":62,"publishedDate":133,"featured":49,"relatedPosts":134,"tech":23},12,"vue-performance-optimization","Vue.js Performance Optimization: Advanced Guide","Techniques to make your Vue apps lightning fast","Advanced performance optimization techniques for Vue.js applications.","Performance is crucial for user experience. Let's explore advanced optimization techniques for Vue.js.\n\n## Virtual Scrolling\n\nFor large lists, use virtual scrolling:\n\n```vue\n\u003Cscript setup>\nimport { useVirtualList } from '@vueuse\u002Fcore'\n\nconst { list, containerProps, wrapperProps } = useVirtualList(\n  largeArray,\n  { itemHeight: 50 }\n)\n\u003C\u002Fscript>\n```\n\n## Lazy Loading Components\n\n```js\nconst HeavyComponent = defineAsyncComponent(() =>\n  import('.\u002FHeavyComponent.vue')\n)\n```\n\n## v-once for Static Content\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv v-once>\n    \u003Ch1>{{ staticTitle }}\u003C\u002Fh1>\n    \u003CComplexStaticTree \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## v-memo for Expensive Updates\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv v-memo=\"[item.id, item.selected]\">\n    \u003CExpensiveComponent :item=\"item\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## Computed vs Methods\n\nAlways prefer computed for derived values:\n\n```js\n\u002F\u002F Good - cached\nconst filteredList = computed(() => \n  list.value.filter(item => item.active)\n)\n\n\u002F\u002F Bad - recalculates every render\nfunction getFilteredList() {\n  return list.value.filter(item => item.active)\n}\n```\n\n## Key Takeaways\n\n1. Profile before optimizing\n2. Use Vue Devtools performance tab\n3. Lazy load routes and components\n4. Avoid unnecessary reactivity","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1460925895917-afdab827c52f?w=800&auto=format&fit=crop",[130,131,76,132],"Performance","Optimization","Advanced","2026-03-18",[52,65,80],1779734545671]