[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-nuxt3-module-system-extending-framework":73,"parsed-post-1cdfdd36-3803-44d3-9dfe-21955cf3c167":147},{"success":4,"data":5},true,{"items":6,"pagination":70},[7,16,24,32,40,48,56,63],{"id":8,"name":9,"description":10,"parentId":11,"createdAt":12,"updatedAt":12,"parent":11,"children":13,"_count":14},"ai-future","AI & The Future","Artificial intelligence and emerging technology",null,"2026-07-24T06:02:45.990Z",[],{"posts":15},1,{"id":17,"name":18,"description":19,"parentId":11,"createdAt":20,"updatedAt":20,"parent":11,"children":21,"_count":22},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":23},7,{"id":25,"name":26,"description":27,"parentId":11,"createdAt":28,"updatedAt":28,"parent":11,"children":29,"_count":30},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":31},3,{"id":33,"name":34,"description":35,"parentId":11,"createdAt":36,"updatedAt":36,"parent":11,"children":37,"_count":38},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":39},6,{"id":41,"name":42,"description":43,"parentId":11,"createdAt":44,"updatedAt":44,"parent":11,"children":45,"_count":46},"tutorials","Tutorials","Step-by-step learning guides","2026-07-24T06:02:44.965Z",[],{"posts":47},21,{"id":49,"name":50,"description":51,"parentId":11,"createdAt":52,"updatedAt":52,"parent":11,"children":53,"_count":54},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":55},24,{"id":57,"name":58,"description":59,"parentId":11,"createdAt":60,"updatedAt":60,"parent":11,"children":61,"_count":62},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":39},{"id":64,"name":65,"description":66,"parentId":11,"createdAt":67,"updatedAt":67,"parent":11,"children":68,"_count":69},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":55},{"page":15,"limit":71,"total":71,"totalPages":15,"hasNext":72,"hasPrev":72},8,false,{"success":4,"data":74},{"id":75,"slug":76,"title":77,"excerpt":78,"content":79,"status":80,"visibility":81,"featuredImage":82,"canonicalUrl":11,"readingTime":83,"viewCount":84,"commentEnabled":4,"publishedAt":85,"scheduledAt":11,"createdAt":86,"updatedAt":87,"seoTitle":88,"seoDescription":78,"seoKeywords":11,"authorId":89,"author":90,"coAuthors":95,"tags":96,"categories":112,"comments":115,"_count":116,"relatedPosts":118},"1cdfdd36-3803-44d3-9dfe-21955cf3c167","nuxt3-module-system-extending-framework","The Nuxt 3 Module System: Extending Your Framework","Build custom Nuxt modules to encapsulate functionality, share code between projects, and create powerful development tools.","## What Are Nuxt Modules?\n\nModules are the extension system for Nuxt. They run at build time and can:\n\n- Add plugins, composables, and components\n- Modify the Nuxt configuration\n- Hook into the build process\n- Add server routes and middleware\n\n## Creating a Basic Module\n\n```typescript\n\u002F\u002F modules\u002Fanalytics\u002Findex.ts\nimport { defineNuxtModule, addPlugin, createResolver } from '@nuxt\u002Fkit'\n\nexport default defineNuxtModule({\n  meta: {\n    name: 'my-analytics',\n    configKey: 'analytics',\n  },\n  defaults: {\n    trackingId: '',\n    debug: false,\n  },\n  setup(options, nuxt) {\n    if (!options.trackingId) {\n      console.warn('[analytics] No tracking ID provided')\n      return\n    }\n\n    const resolver = createResolver(import.meta.url)\n\n    \u002F\u002F Add a plugin that runs on client\n    addPlugin({\n      src: resolver.resolve('.\u002Fruntime\u002Fplugin.client'),\n      mode: 'client',\n    })\n\n    \u002F\u002F Make config available at runtime\n    nuxt.options.runtimeConfig.public.analytics = {\n      trackingId: options.trackingId,\n      debug: options.debug,\n    }\n  },\n})\n```\n\nThe runtime plugin:\n\n```typescript\n\u002F\u002F modules\u002Fanalytics\u002Fruntime\u002Fplugin.client.ts\nexport default defineNuxtPlugin(() => {\n  const config = useRuntimeConfig().public.analytics\n\n  \u002F\u002F Initialize analytics SDK\n  const analytics = initAnalytics(config.trackingId)\n\n  \u002F\u002F Track page views on route change\n  const router = useRouter()\n  router.afterEach((to) => {\n    analytics.pageView(to.fullPath)\n  })\n\n  return {\n    provide: { analytics },\n  }\n})\n```\n\n## Adding Composables\n\n```typescript\n\u002F\u002F modules\u002Fanalytics\u002Findex.ts (in setup)\nimport { addImports } from '@nuxt\u002Fkit'\n\naddImports({\n  name: 'useAnalytics',\n  from: resolver.resolve('.\u002Fruntime\u002Fcomposables\u002FuseAnalytics'),\n})\n```\n\n```typescript\n\u002F\u002F modules\u002Fanalytics\u002Fruntime\u002Fcomposables\u002FuseAnalytics.ts\nexport function useAnalytics() {\n  const { $analytics } = useNuxtApp()\n\n  function trackEvent(name: string, properties?: Record\u003Cstring, unknown>) {\n    $analytics.track(name, properties)\n  }\n\n  return { trackEvent }\n}\n```\n\n::callout{icon=\"i-lucide-puzzle\" color=\"success\"}\nOnce registered, `useAnalytics()` is auto-imported in every component — no explicit imports needed.\n::\n\n## Adding Server Routes\n\n```typescript\n\u002F\u002F In module setup\nimport { addServerHandler } from '@nuxt\u002Fkit'\n\naddServerHandler({\n  route: '\u002Fapi\u002F_analytics\u002Fcollect',\n  handler: resolver.resolve('.\u002Fruntime\u002Fserver\u002Fapi\u002Fcollect.post'),\n})\n```\n\n## Using Your Module\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['.\u002Fmodules\u002Fanalytics'],\n  analytics: {\n    trackingId: 'UA-XXXXX',\n    debug: process.env.NODE_ENV === 'development',\n  },\n})\n```\n\n## Module Best Practices\n\n1. **Always provide defaults** — Don't require configuration for basic usage\n2. **Respect the user's config** — Don't override, extend\n3. **Add TypeScript types** — Augment module declarations\n4. **Document publicly** — Even internal modules deserve a README\n5. **Test in isolation** — Modules should work independently\n\nModules are Nuxt's superpower. They turn complex setup into single-line configuration.\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",9,959,"2026-05-20T06:04:02.792Z","2026-07-24T06:04:02.796Z","2026-07-28T17:17:15.711Z","The Nuxt 3 Module System: Extending Your Framework | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":91,"bio":92,"id":89,"name":93,"avatarUrl":94},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[97,102,107],{"id":98,"name":99,"color":100,"description":101},"typescript","TypeScript","#3178c6","Typed superset of JavaScript",{"id":103,"name":104,"color":105,"description":106},"vue","Vue","#4fc08d","The Progressive JavaScript Framework",{"id":108,"name":109,"color":110,"description":111},"nuxt","Nuxt","#00dc82","The Intuitive Vue Framework",[113,114],{"id":64,"name":65,"description":66},{"id":41,"name":42,"description":43},[],{"comments":117},0,[119,128,138],{"id":120,"slug":121,"title":122,"excerpt":123,"featuredImage":124,"viewCount":125,"readingTime":71,"publishedAt":126,"author":127},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z",{"id":89,"name":93,"avatarUrl":94},{"id":129,"slug":130,"title":131,"excerpt":132,"featuredImage":133,"viewCount":134,"readingTime":135,"publishedAt":136,"author":137},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,10,"2026-07-21T06:02:49.268Z",{"id":89,"name":93,"avatarUrl":94},{"id":139,"slug":140,"title":141,"excerpt":142,"featuredImage":82,"viewCount":143,"readingTime":144,"publishedAt":145,"author":146},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.",990,12,"2026-07-19T06:02:51.753Z",{"id":89,"name":93,"avatarUrl":94},{"data":148,"body":150,"toc":364},{"title":149,"description":149},"",{"type":151,"children":152},"root",[153,162,168,193,199,211,216,224,230,238,246,265,271,279,285,293,299,354,359],{"type":154,"tag":155,"props":156,"children":158},"element","h2",{"id":157},"what-are-nuxt-modules",[159],{"type":160,"value":161},"text","What Are Nuxt Modules?",{"type":154,"tag":163,"props":164,"children":165},"p",{},[166],{"type":160,"value":167},"Modules are the extension system for Nuxt. They run at build time and can:",{"type":154,"tag":169,"props":170,"children":171},"ul",{},[172,178,183,188],{"type":154,"tag":173,"props":174,"children":175},"li",{},[176],{"type":160,"value":177},"Add plugins, composables, and components",{"type":154,"tag":173,"props":179,"children":180},{},[181],{"type":160,"value":182},"Modify the Nuxt configuration",{"type":154,"tag":173,"props":184,"children":185},{},[186],{"type":160,"value":187},"Hook into the build process",{"type":154,"tag":173,"props":189,"children":190},{},[191],{"type":160,"value":192},"Add server routes and middleware",{"type":154,"tag":155,"props":194,"children":196},{"id":195},"creating-a-basic-module",[197],{"type":160,"value":198},"Creating a Basic Module",{"type":154,"tag":200,"props":201,"children":205},"pre",{"className":202,"code":203,"language":98,"meta":149,"style":204},"language-typescript","\u002F\u002F modules\u002Fanalytics\u002Findex.ts\nimport { defineNuxtModule, addPlugin, createResolver } from '@nuxt\u002Fkit'\n\nexport default defineNuxtModule({\n  meta: {\n    name: 'my-analytics',\n    configKey: 'analytics',\n  },\n  defaults: {\n    trackingId: '',\n    debug: false,\n  },\n  setup(options, nuxt) {\n    if (!options.trackingId) {\n      console.warn('[analytics] No tracking ID provided')\n      return\n    }\n\n    const resolver = createResolver(import.meta.url)\n\n    \u002F\u002F Add a plugin that runs on client\n    addPlugin({\n      src: resolver.resolve('.\u002Fruntime\u002Fplugin.client'),\n      mode: 'client',\n    })\n\n    \u002F\u002F Make config available at runtime\n    nuxt.options.runtimeConfig.public.analytics = {\n      trackingId: options.trackingId,\n      debug: options.debug,\n    }\n  },\n})\n","undefined",[206],{"type":154,"tag":207,"props":208,"children":209},"code",{"__ignoreMap":149},[210],{"type":160,"value":203},{"type":154,"tag":163,"props":212,"children":213},{},[214],{"type":160,"value":215},"The runtime plugin:",{"type":154,"tag":200,"props":217,"children":219},{"className":202,"code":218,"language":98,"meta":149,"style":204},"\u002F\u002F modules\u002Fanalytics\u002Fruntime\u002Fplugin.client.ts\nexport default defineNuxtPlugin(() => {\n  const config = useRuntimeConfig().public.analytics\n\n  \u002F\u002F Initialize analytics SDK\n  const analytics = initAnalytics(config.trackingId)\n\n  \u002F\u002F Track page views on route change\n  const router = useRouter()\n  router.afterEach((to) => {\n    analytics.pageView(to.fullPath)\n  })\n\n  return {\n    provide: { analytics },\n  }\n})\n",[220],{"type":154,"tag":207,"props":221,"children":222},{"__ignoreMap":149},[223],{"type":160,"value":218},{"type":154,"tag":155,"props":225,"children":227},{"id":226},"adding-composables",[228],{"type":160,"value":229},"Adding Composables",{"type":154,"tag":200,"props":231,"children":233},{"className":202,"code":232,"language":98,"meta":149,"style":204},"\u002F\u002F modules\u002Fanalytics\u002Findex.ts (in setup)\nimport { addImports } from '@nuxt\u002Fkit'\n\naddImports({\n  name: 'useAnalytics',\n  from: resolver.resolve('.\u002Fruntime\u002Fcomposables\u002FuseAnalytics'),\n})\n",[234],{"type":154,"tag":207,"props":235,"children":236},{"__ignoreMap":149},[237],{"type":160,"value":232},{"type":154,"tag":200,"props":239,"children":241},{"className":202,"code":240,"language":98,"meta":149,"style":204},"\u002F\u002F modules\u002Fanalytics\u002Fruntime\u002Fcomposables\u002FuseAnalytics.ts\nexport function useAnalytics() {\n  const { $analytics } = useNuxtApp()\n\n  function trackEvent(name: string, properties?: Record\u003Cstring, unknown>) {\n    $analytics.track(name, properties)\n  }\n\n  return { trackEvent }\n}\n",[242],{"type":154,"tag":207,"props":243,"children":244},{"__ignoreMap":149},[245],{"type":160,"value":240},{"type":154,"tag":247,"props":248,"children":251},"callout",{"color":249,"icon":250},"success","i-lucide-puzzle",[252],{"type":154,"tag":163,"props":253,"children":254},{},[255,257,263],{"type":160,"value":256},"Once registered, ",{"type":154,"tag":207,"props":258,"children":260},{"className":259},[],[261],{"type":160,"value":262},"useAnalytics()",{"type":160,"value":264}," is auto-imported in every component — no explicit imports needed.",{"type":154,"tag":155,"props":266,"children":268},{"id":267},"adding-server-routes",[269],{"type":160,"value":270},"Adding Server Routes",{"type":154,"tag":200,"props":272,"children":274},{"className":202,"code":273,"language":98,"meta":149,"style":204},"\u002F\u002F In module setup\nimport { addServerHandler } from '@nuxt\u002Fkit'\n\naddServerHandler({\n  route: '\u002Fapi\u002F_analytics\u002Fcollect',\n  handler: resolver.resolve('.\u002Fruntime\u002Fserver\u002Fapi\u002Fcollect.post'),\n})\n",[275],{"type":154,"tag":207,"props":276,"children":277},{"__ignoreMap":149},[278],{"type":160,"value":273},{"type":154,"tag":155,"props":280,"children":282},{"id":281},"using-your-module",[283],{"type":160,"value":284},"Using Your Module",{"type":154,"tag":200,"props":286,"children":288},{"className":202,"code":287,"language":98,"meta":149,"style":204},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['.\u002Fmodules\u002Fanalytics'],\n  analytics: {\n    trackingId: 'UA-XXXXX',\n    debug: process.env.NODE_ENV === 'development',\n  },\n})\n",[289],{"type":154,"tag":207,"props":290,"children":291},{"__ignoreMap":149},[292],{"type":160,"value":287},{"type":154,"tag":155,"props":294,"children":296},{"id":295},"module-best-practices",[297],{"type":160,"value":298},"Module Best Practices",{"type":154,"tag":300,"props":301,"children":302},"ol",{},[303,314,324,334,344],{"type":154,"tag":173,"props":304,"children":305},{},[306,312],{"type":154,"tag":307,"props":308,"children":309},"strong",{},[310],{"type":160,"value":311},"Always provide defaults",{"type":160,"value":313}," — Don't require configuration for basic usage",{"type":154,"tag":173,"props":315,"children":316},{},[317,322],{"type":154,"tag":307,"props":318,"children":319},{},[320],{"type":160,"value":321},"Respect the user's config",{"type":160,"value":323}," — Don't override, extend",{"type":154,"tag":173,"props":325,"children":326},{},[327,332],{"type":154,"tag":307,"props":328,"children":329},{},[330],{"type":160,"value":331},"Add TypeScript types",{"type":160,"value":333}," — Augment module declarations",{"type":154,"tag":173,"props":335,"children":336},{},[337,342],{"type":154,"tag":307,"props":338,"children":339},{},[340],{"type":160,"value":341},"Document publicly",{"type":160,"value":343}," — Even internal modules deserve a README",{"type":154,"tag":173,"props":345,"children":346},{},[347,352],{"type":154,"tag":307,"props":348,"children":349},{},[350],{"type":160,"value":351},"Test in isolation",{"type":160,"value":353}," — Modules should work independently",{"type":154,"tag":163,"props":355,"children":356},{},[357],{"type":160,"value":358},"Modules are Nuxt's superpower. They turn complex setup into single-line configuration.",{"type":154,"tag":360,"props":361,"children":362},"style",{},[363],{"type":160,"value":149},{"title":149,"searchDepth":365,"depth":365,"links":366},2,[367,368,369,370,371,372],{"id":157,"depth":365,"text":161},{"id":195,"depth":365,"text":198},{"id":226,"depth":365,"text":229},{"id":267,"depth":365,"text":270},{"id":281,"depth":365,"text":284},{"id":295,"depth":365,"text":298}]