[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f8fQutknRQscU_41fDgl3mXN4zfOhqYcyySXUkDGaFmA":3},{"status":4,"message":5,"data":6},200,"Post retrieved successfully",{"id":7,"slug":8,"coverImage":9,"published":10,"status":11,"isFeatured":10,"viewCount":12,"publishedAt":13,"authorId":14,"createdAt":15,"updatedAt":15,"deletedAt":16,"author":17,"categories":22,"tags":29,"title":46,"excerpt":48,"content":50,"relatedPosts":52},"cmlytjthn000ib0rrgtu83iir","vue-3-composition-api-guide","https://images.unsplash.com/photo-1614741118887-7a4ee193a5fa?w=1200",false,"PUBLISHED",410,"2024-02-20T00:00:00.000Z","cmlytjr8y0000b0rrgio299ym","2026-02-23T06:52:02.473Z",null,{"id":14,"username":18,"firstName":19,"lastName":20,"avatar":21},"panha","Sokun","Panha","https://panha.cambocoder.com/_vercel/image?url=%2Fimages%2Fprofile-image.webp&w=1536&q=100",[23],{"id":24,"name":25,"slug":28},"cmlytjrpx0001b0rrvqln0qga",{"en":26,"kh":27},"Frontend","ផ្នែកខាងមុខ","frontend",[30,35,40],{"id":31,"name":32,"slug":34},"cmlytjskr0007b0rry0p4n4vb",{"en":33,"kh":33},"Vue.js","vuejs",{"id":36,"name":37,"slug":39},"cmlytjskt0008b0rrejzxr4tx",{"en":38,"kh":38},"TypeScript","typescript",{"id":41,"name":42,"slug":45},"cmlytjt0v000gb0rrqa0shb38",{"en":43,"kh":44},"Tutorial","ការបង្រៀន","tutorial",{"en":47,"kh":16},"Vue 3 Composition API: A Complete Guide",{"en":49,"kh":16},"Master Vue 3's Composition API with practical examples and patterns for building scalable applications.",{"en":51,"kh":16},"## Introduction to Composition API\n\nThe Composition API is Vue 3's new way to organize component logic, offering better code reuse and TypeScript support.\n\n## Basic Setup\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue';\n\n// Reactive state\nconst count = ref(0);\nconst name = ref('World');\n\n// Computed property\nconst greeting = computed(() => `Hello, ${name.value}!`);\n\n// Methods\nfunction increment() {\n  count.value++;\n}\n\n// Lifecycle hooks\nonMounted(() => {\n  console.log('Component mounted');\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Ch1>{{ greeting }}\u003C/h1>\n  \u003Cp>Count: {{ count }}\u003C/p>\n  \u003Cbutton @click=\"increment\">Increment\u003C/button>\n\u003C/template>\n```\n\n## Reactive vs Ref\n\n```typescript\nimport { ref, reactive } from 'vue';\n\n// ref - for primitives (access with .value)\nconst count = ref(0);\ncount.value++;\n\n// reactive - for objects (no .value needed)\nconst state = reactive({\n  count: 0,\n  user: null\n});\nstate.count++;\n```\n\n## Creating Composables\n\nExtract and reuse logic across components:\n\n```typescript\n// composables/useFetch.ts\nimport { ref } from 'vue';\n\nexport function useFetch\u003CT>(url: string) {\n  const data = ref\u003CT | null>(null);\n  const error = ref\u003CError | null>(null);\n  const loading = ref(true);\n\n  async function fetchData() {\n    loading.value = true;\n    try {\n      const response = await fetch(url);\n      data.value = await response.json();\n    } catch (e) {\n      error.value = e as Error;\n    } finally {\n      loading.value = false;\n    }\n  }\n\n  fetchData();\n\n  return { data, error, loading, refetch: fetchData };\n}\n\n// Usage in component\nconst { data: users, loading, error } = useFetch('/api/users');\n```\n\n## Watch and WatchEffect\n\n```typescript\nimport { watch, watchEffect } from 'vue';\n\n// Watch specific source\nwatch(count, (newVal, oldVal) => {\n  console.log(`Count changed: ${oldVal} -> ${newVal}`);\n});\n\n// Watch multiple sources\nwatch([firstName, lastName], ([first, last]) => {\n  fullName.value = `${first} ${last}`;\n});\n\n// watchEffect - auto-tracks dependencies\nwatchEffect(() => {\n  console.log(`Count is: ${count.value}`);\n});\n```\n\n## Provide/Inject for Dependency Injection\n\n```typescript\n// Parent component\nimport { provide } from 'vue';\n\nconst theme = ref('dark');\nprovide('theme', theme);\n\n// Child component (any depth)\nimport { inject } from 'vue';\n\nconst theme = inject('theme', 'light'); // 'light' is default\n```\n\n## Conclusion\n\nThe Composition API offers a powerful way to organize and reuse Vue component logic. Start using composables!",[53,65,75,87],{"id":54,"title":55,"excerpt":58,"slug":61,"coverImage":62,"publishedAt":63,"author":64},"cmm1p0jlg000004jjljgzz3xk",{"en":56,"kh":57},"Nuxt 3 Rendering Modes: A Deep Dive","ការរៀបរាប់ត្រួសៗអំពី Nuxt 3 Rendering Modes ",{"en":59,"kh":60},"In Nuxt 3, you can define rendering rules for specific pages or patterns using the routeRules property in nuxt.config.ts. This allows you to have a Hybrid application (e.g., your homepage is static, but your dashboard is a SPA).","ក្នុង Nuxt 3 អ្នកអាចកំណត់របៀប Rendering ខុសៗគ្នាសម្រាប់ទំព័រនីមួយៗក្នុងកម្មវិធីតែមួយ (Hybrid App) តាមរយៈ routeRules ក្នុង nuxt.config.ts។","nuxt-3-rendering-modes-a-deep-dive","https://res.cloudinary.com/dfcdd7ngb/image/upload/v1772003268/posts/bkho48xjwzvpo8a633ir.png","2026-02-25T07:08:23.252Z",{"id":14,"username":18,"firstName":19,"lastName":20,"avatar":21},{"id":66,"title":67,"excerpt":69,"slug":71,"coverImage":72,"publishedAt":73,"author":74},"cmlytjthz000qb0rrt5203re9",{"en":68,"kh":16},"React Hooks Deep Dive: Beyond the Basics",{"en":70,"kh":16},"Go beyond useState and useEffect with advanced React hooks patterns and custom hook creation.","react-hooks-deep-dive","https://images.unsplash.com/photo-1633356122102-3fe601e05bd2?w=1200","2024-02-25T00:00:00.000Z",{"id":14,"username":18,"firstName":19,"lastName":20,"avatar":21},{"id":76,"title":77,"excerpt":80,"slug":83,"coverImage":84,"publishedAt":85,"author":86},"cmlytjthz000rb0rrc3ych66u",{"en":78,"kh":79},"TypeScript Generics Explained with Practical Examples","TypeScript Generics ពន្យល់ជាមួយឧទាហរណ៍ជាក់ស្ដែង",{"en":81,"kh":82},"Master TypeScript generics with clear explanations and real-world examples you can use in your projects.","","typescript-generics-explained","https://images.unsplash.com/photo-1599507593499-a3f7d7d97667?w=1200","2024-02-01T00:00:00.000Z",{"id":14,"username":18,"firstName":19,"lastName":20,"avatar":21},{"id":88,"title":89,"excerpt":91,"slug":93,"coverImage":94,"publishedAt":95,"author":96},"cmlytjthx000lb0rrtde9ik0u",{"en":90,"kh":82},"10 JavaScript Tips for Writing Better Code",{"en":92,"kh":82},"Improve your JavaScript skills with these practical tips and best practices for cleaner, more efficient code.","10-javascript-tips-for-better-code","https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=1200","2024-01-20T00:00:00.000Z",{"id":14,"username":18,"firstName":19,"lastName":20,"avatar":21}]