[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"articles":3},{"articles":4,"pagination":424},[5,59,106,188,243,310,341,401],{"title":6,"slug":7,"excerpt":8,"content":9,"author":10,"author_bio":11,"published_at":12,"updated_at":13,"is_featured":14,"is_external":15,"banner_image":16,"reading_time":17,"toc":18,"official_docs":41,"category":45,"tags":48,"meta":16},"PHP Attributes in Laravel 13 — The Complete Guide","php-attributes-in-laravel-13-the-complete-guide","Laravel 13 doubles down on PHP's native Attribute system, letting you replace scattered configuration arrays, boot callbacks, and interface implementations with clean, colocated #[...] annotations directly on your classes and methods. This article explains what PHP Attributes are, why they matter, and walks through every place Laravel 13 uses them — with working code examples and direct links to the official docs.","\u003Ch2 id=\"what-are-attributes\">What Are PHP Attributes?\u003C/h2>\r\n\u003Cp>PHP 8.0 introduced \u003Cstrong>Attributes\u003C/strong> (sometimes called Annotations) as a first-class, native language feature. An Attribute is a structured, machine-readable piece of metadata you can attach to classes, methods, properties, parameters, constants, or functions using the \u003Ccode>#[...] \u003C/code>syntax.\u003C/p>\r\n\u003Cp>Before Attributes, frameworks like Laravel relied on docblock comments parsed at runtime, or required you to implement specific interfaces or define properties/methods in your classes. Attributes replace all of that with something the PHP engine understands natively — no reflection hacks required.\u003C/p>\r\n\u003Ch2 id=\"basic-anatomy-of-a-php-attribute\">Basic Anatomy of a PHP Attribute\u003C/h2>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// 1. Define an Attribute class\r\n#[Attribute]\r\nclass MyRoute\r\n{\r\n    public function __construct(\r\n        public readonly string $path,\r\n        public readonly string $method = 'GET',\r\n    ) {}\r\n}\r\n\r\n// 2. Apply it to a class or method\r\n#[MyRoute(path: '/hello', method: 'GET')]\r\nfunction helloWorld(): string\r\n{\r\n    return 'Hello, World!';\r\n}\r\n\r\n// 3. Read it at runtime with Reflection\r\n$rf   = new ReflectionFunction('helloWorld');\r\n$attr = $rf->getAttributes(MyRoute::class)[0];\r\n$inst = $attr->newInstance(); // → MyRoute object\r\necho $inst->path;            // → /hello\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Cp>Key facts to know:\u003C/p>\r\n\u003Cul>\r\n\u003Cli>Attributes are \u003Cstrong>zero-cost when not inspected\u003C/strong> - PHP does not instantiate them unless you call \u003Ccode>->newInstance()\u003C/code> via reflection.\u003C/li>\r\n\u003Cli>An Attribute class is just a regular PHP class decorated with \u003Ccode>#[Attribute].\u003C/code>\u003C/li>\r\n\u003Cli>You can restrict where an Attribute is allowed (class only, method only,  etc.). Using the \u003Ccode>Attribute::TARGET_*\u003C/code> flags.\u003C/li>\r\n\u003Cli>Multiple Attributes can be stacked on the same target: \u003Ccode>#[Attr1] #[Attr2].\u003C/code>\u003Ccode> \u003C/code>\u003C/li>\r\n\u003C/ul>\r\n\u003Cblockquote>\r\n\u003Cp>\u003Cstrong>Laravel's strategy:\u003C/strong> Laravel reads your Attributes during the service-container boot phase or request lifecycle — so you write zero runtime code; the framework does the heavy lifting with Reflection under the hood.\u003C/p>\r\n\u003C/blockquote>\r\n\u003Ch2 id=\"why-laravel-is-going-all-in-on-attributes\">Why Laravel is going All-In On Attributes\u003C/h2>\r\n\u003Cp>Laravel's design philosophy has always been about expressiveness and reduced boilerplate. Attributes fit perfectly because they let you declare intent right next to the code that implements it, instead of spreading configuration across routes files, service providers, and constructors.\u003C/p>\r\n\u003Cp>Compare the \"old way\" vs. the \"Attribute way\" for middleware on a controller:\u003C/p>\r\n\u003Ch3 id=\"before-attributes-laravel-1011-style\">Before Attributes (Laravel 10/11 style)\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>class CommentController extends Controller\r\n{\r\n    public function __construct()\r\n    {\r\n        // Had to define middleware in the constructor\r\n        $this->middleware('auth');\r\n        $this->middleware('subscribed')->only('store');\r\n    }\r\n}\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Ch3 id=\"after-attributes-laravel-13-style\">After Attributes (Laravel 13 style)\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>#[Middleware('auth')]\r\nclass CommentController\r\n{\r\n    #[Middleware('subscribed')]\r\n    public function store(Post $post): Response\r\n    {\r\n        // Intent is immediately obvious here\r\n    }\r\n}\u003C/code>\u003C/pre>\r\n\u003Cp>The Attribute version is self-documenting — a developer reading the method immediately knows what middleware and policies apply, without jumping to a constructor or routes file.\u003C/p>\r\n\u003Chr>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"laravel-13-attributes\">Every Laravel 13 Attribute — Documented\u003C/h2>\r\n\u003Cp>Below is the complete, categorised reference. For each Attribute you'll find a description, code example, use case, and a link to the official Laravel 13 documentation page.\u003C/p>\r\n\u003Ch2 id=\"attributes-at-a-glance\">Attributes at a Glance\u003C/h2>\r\n\u003Ctable style=\"border-collapse: collapse; width: 100%; border-width: 1px; border-style: solid; height: 78.7812px;\" border=\"1\">\u003Ccolgroup>\u003Ccol style=\"width: 6.36445%;\">\u003Ccol style=\"width: 18.6302%;\">\u003Ccol style=\"width: 24.9973%;\">\u003Ccol style=\"width: 50.008%;\">\u003C/colgroup>\r\n\u003Ctbody>\r\n\u003Ctr style=\"height: 39.3906px;\">\r\n\u003Ctd>\u003Cstrong>#\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Cstrong>ATTRIBUTE\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Cstrong>AREA\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Cstrong>REPLACES\u003C/strong>\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr style=\"height: 39.3906px;\">\r\n\u003Ctd>1\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Table]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>$table\u003C/code>, \u003Ccode>$primaryKey\u003C/code>, $\u003Ccode>timestamps\u003C/code>...\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr>\r\n\u003Ctd>2\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Fillable]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>$fillable\u003C/code>\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr>\r\n\u003Ctd>3\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Guarded]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>$guarded\u003C/code>\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr>\r\n\u003Ctd>4\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Unguarded]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>Model::unguard() \u003C/code>call\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr>\r\n\u003Ctd>5\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Hiddem]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>$hidden\u003C/code>\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr>\r\n\u003Ctd>6\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Visible]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>$visible\u003C/code>\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr>\r\n\u003Ctd>7\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Appends]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>$appends\u003C/code>\u003C/td>\r\n\u003C/tr>\r\n\u003Ctr>\r\n\u003Ctd>8\u003C/td>\r\n\u003Ctd>\u003Ccode>#[Casts]\u003C/code>\u003C/td>\r\n\u003Ctd>\u003Cstrong>Eloquent\u003C/strong>\u003C/td>\r\n\u003Ctd>\u003Ccode>$casts\u003C/code> / \u003Ccode>casts()\u003C/code>\u003C/td>\r\n\u003C/tr>\r\n\u003C/tbody>\r\n\u003C/table>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp> \u003C/p>","Shyam Sundar Bhattarai","Software Engineer & Technical Writer","2026-03-29T16:52:00.000000Z","2026-03-30T07:58:03.000000Z",true,false,null,3,[19,23,26,29,32,35,38],{"level":20,"text":21,"id":22},2,"What Are PHP Attributes?","what-are-php-attributes",{"level":20,"text":24,"id":25},"Basic Anatomy of a PHP Attribute","basic-anatomy-of-a-php-attribute",{"level":20,"text":27,"id":28},"Why Laravel is going All-In On Attributes","why-laravel-is-going-all-in-on-attributes",{"level":17,"text":30,"id":31},"Before Attributes (Laravel 10/11 style)","before-attributes-laravel-1011-style",{"level":17,"text":33,"id":34},"After Attributes (Laravel 13 style)","after-attributes-laravel-13-style",{"level":20,"text":36,"id":37},"Every Laravel 13 Attribute — Documented","every-laravel-13-attribute-mdash-documented",{"level":20,"text":39,"id":40},"Attributes at a Glance","attributes-at-a-glance",[42],{"title":43,"url":44},"Laravel","https://laravel.com/docs/13.x/eloquent",{"id":20,"name":46,"slug":47},"Backend","backend",[49,50,53,56],{"name":46,"slug":47},{"name":51,"slug":52},"Php","php",{"name":54,"slug":55},"Laravel 13","laravel-13",{"name":57,"slug":58},"New in 13.x","new-in-13x",{"title":60,"slug":61,"excerpt":62,"content":63,"author":10,"author_bio":16,"published_at":64,"updated_at":65,"is_featured":14,"is_external":15,"banner_image":66,"reading_time":17,"toc":67,"official_docs":92,"category":93,"tags":97,"meta":16},"Vue 3.4+ defineModel(): Simplifying Two-Way Binding","vue-3-4-definemodel-simplifying-two-way-binding","Simplify v-model in Vue 3.4 with defineModel(). Cut boilerplate, enable two-way binding, TypeScript support, and modifiers for cleaner code.","\u003Cp>Vue 3.4 introduced the \u003Ccode>defineModel()\u003C/code> macro, revolutionizing how developers handle two-way binding in custom components. This powerful addition to the Composition API significantly reduces boilerplate code while maintaining the same functionality as traditional \u003Ccode>v-model \u003C/code>implementations.\u003C/p>\r\n\u003Ch2 id=\"what-is-definemodel\">What is defineModel()?\u003C/h2>\r\n\u003Cp>\u003Ccode>defineModel()\u003C/code> is a compile-time macro that simplifies the creation of custom components supporting v-model directives. Before this version, you typically needed to manually emit \u003Ccode>update:modelValue\u003C/code> events and manage the \u003Ccode>modelValue\u003C/code> prop. defineModel streamlines this process, automatically handling prop declarations and event emissions behind the scenes.\u003C/p>\r\n\u003Ch2 id=\"the-problem-it-solves\">The Problem It Solves\u003C/h2>\r\n\u003Cp>Previously, implementing two-way binding required manual setup of  props and emits:\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><!-- Old approach -->\r\n<template>\r\n  <input type=\"text\" @input=\"updateValue\" :value=\"modelValue\" />\r\n</template>\r\n\r\n<script setup>\r\ndefineProps(['modelValue']);\r\nconst emit = defineEmits(['update:modelValue']);\r\n\r\nconst updateValue = (e) => {\r\n  const value = e.target.value;\r\n  emit('update:modelValue', value);\r\n};\r\n</script>\u003C/code>\u003C/pre>\r\n\u003Cp>With d\u003Ccode>efineModel()\u003C/code>, this becomes drastically simpler:\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><!-- New approach with defineModel -->\r\n<template>\r\n  <input type=\"text\" v-model=\"modelValue\" />\r\n</template>\r\n\r\n<script setup>\r\nconst modelValue = defineModel();\r\n</script>\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"key-features-and-usage\">Key Features and Usage\u003C/h2>\r\n\u003Ch3 id=\"basic-implementation\">Basic Implementation\u003C/h3>\r\n\u003Cp>The macro automatically declares a \u003Ccode>modelValue\u003C/code> prop and corresponding\u003Ccode> update:modelValue \u003C/code>event:\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode>// Basic usage\r\nconst model = defineModel()\r\n\r\n// With type constraints\r\nconst model = defineModel({ type: String })\r\n\r\n// Named models for multiple v-model bindings\r\nconst count = defineModel('count', { type: Number, default: 0 })\u003C/code>\u003C/pre>\r\n\u003Ch3 id=\"advanced-features\">Advanced Features\u003C/h3>\r\n\u003Cp>defineModel takes care of both date synchronization and event emission behind the scenes, eliminating the need for manual event handling and keeping your code concise.\u003C/p>\r\n\u003Cp>\u003Cstrong>Modifiers Support:\u003C/strong>\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode>const [modelValue, modelModifiers] = defineModel({\r\n  set(value) {\r\n    if (modelModifiers.trim) {\r\n      return value.trim()\r\n    }\r\n    return value\r\n  }\r\n})\u003C/code>\u003C/pre>\r\n\u003Cp class=\"whitespace-normal break-words\">\u003Cstrong>TypeScript Integration:\u003C/strong>\u003C/p>\r\n\u003Cdiv class=\"relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg\">\r\n\u003Cdiv class=\"sticky opacity-0 group-hover/copy:opacity-100 top-2 py-2 h-12 w-0 float-right\">\r\n\u003Cdiv class=\"absolute right-0 h-8 px-2 items-center inline-flex\">\r\n\u003Cdiv class=\"relative\">\r\n\u003Cdiv class=\"flex items-center justify-center transition-all opacity-100 scale-100\">\r\n\u003Cpre class=\"language-javascript\">\u003Ccode>const modelValue = defineModel<string>({ required: true })\r\nconst [modelValue, modifiers] = defineModel<string, 'trim' | 'uppercase'>()\u003C/code>\u003C/pre>\r\n\u003C/div>\r\n\u003Cdiv class=\"flex items-center justify-center absolute top-0 left-0 transition-all opacity-0 scale-50\"> \u003C/div>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003Ch2 id=\"important-considerations\">Important Considerations\u003C/h2>\r\n\u003Cp>\u003Cstrong>Synchronization Warning:\u003C/strong>   Be careful with default values. If a child component has a default value but the parent doesn't provide one, it can cause desynchronization between components.\u003Cbr />\u003Cstrong>Compile-Time Nature:  \u003C/strong>defineModel is \"just\" another macro that is compiled into an \"old\" component defining method via defineComponent, meaning it's transformed at build time into traditional prop and emit declarations.\u003C/p>\r\n\u003Ch2 id=\"when-to-use-definemodel\">When to Use defineModel()\u003C/h2>\r\n\u003Cul>\r\n\u003Cli>Creating reusable form components\u003C/li>\r\n\u003Cli>Building complex input components with validation\u003C/li>\r\n\u003Cli>Implementing components that need bi-directional data flow\u003C/li>\r\n\u003Cli>Working with multiple \u003Ccode>v-model\u003C/code> binding on a single component\u003C/li>\r\n\u003C/ul>\r\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\r\n\u003Cp class=\"whitespace-normal break-words\">\u003Ccode class=\"bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">defineModel()\u003C/code> represents Vue's commitment to developer experience, offering a more intuitive and maintainable approach to two-way binding. While v-model remains useful for basic scenarios, defineModel offers a cleaner and more concise approach for complex data structures in custom components. As Vue applications grow in complexity, this macro becomes an essential tool for efficient component communication.\u003C/p>\r\n\u003Cp class=\"whitespace-normal break-words\">The introduction of \u003Ccode class=\"bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">defineModel()\u003C/code> in Vue 3.4+ showcases the framework's evolution toward more declarative and less verbose component development, making two-way binding both more powerful and easier to implement.\u003C/p>\r\n\u003Cp class=\"whitespace-normal break-words\"> \u003C/p>\r\n\u003Cp class=\"whitespace-normal break-words\">For Details and official guide, you can explore \u003Ca href=\"https://vuejs.org/guide/components/v-model\">https://vuejs.org/guide/components/v-model\u003C/a> this.\u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cp style=\"text-align: center;\">\u003Cstrong>Happy Coding !!!\u003C/strong>\u003C/p>","2025-09-13T06:29:00.000000Z","2025-09-13T07:05:43.000000Z","https://admin.ssbhattarai.com.np/storage/articles/banners/0CMdqJvbOR4fgzFyk6OPR531IOT4krRZUQV6tPxq.png",[68,71,74,77,80,83,86,89],{"level":20,"text":69,"id":70},"What is defineModel()?","what-is-definemodel",{"level":20,"text":72,"id":73},"The Problem It Solves","the-problem-it-solves",{"level":20,"text":75,"id":76},"Key Features and Usage","key-features-and-usage",{"level":17,"text":78,"id":79},"Basic Implementation","basic-implementation",{"level":17,"text":81,"id":82},"Advanced Features","advanced-features",{"level":20,"text":84,"id":85},"Important Considerations","important-considerations",{"level":20,"text":87,"id":88},"When to Use defineModel()","when-to-use-definemodel",{"level":20,"text":90,"id":91},"Conclusion","conclusion",[],{"id":94,"name":95,"slug":96},1,"Frontend","frontend",[98,99,101,104],{"name":95,"slug":96},{"name":100,"slug":100},"javascript",{"name":102,"slug":103},"web development","web-development",{"name":105,"slug":105},"vue3",{"title":107,"slug":108,"excerpt":109,"external_link":110,"author":111,"author_bio":16,"published_at":112,"updated_at":113,"is_featured":15,"is_external":14,"banner_image":114,"official_docs":115,"category":116,"tags":117,"meta":122},"Biome vs ESLint: The Ultimate 2025 Showdown for JavaScript Developers — Speed, Features, and Migration Guide","biome-vs-eslint-the-ultimate-2025-showdown-for-javascript-developers-speed-features-and-migration-guide","Biome is an all-in-one toolchain that’s gaining serious momentum in 2025. What makes it special? It’s incredibly fast and works out of the box with minimal setup.","https://medium.com/@harryespant/biome-vs-eslint-the-ultimate-2025-showdown-for-javascript-developers-speed-features-and-3e5130be4a3c","Harry Es Pant","2025-09-13T06:23:00.000000Z","2025-09-13T06:26:20.000000Z","https://admin.ssbhattarai.com.np/storage/articles/banners/DVQjrXVS5yxFrjbMTFAWGtEeMObb9laLgVOm3z0R.webp",[],{"id":94,"name":95,"slug":96},[118,119,120],{"name":95,"slug":96},{"name":100,"slug":100},{"name":121,"slug":121},"linter",{"info":123,"oembed":134,"metas":135},{"image":124,"title":125,"description":126,"url":110,"author":127,"provider":128,"keywords":129,"publishedAt":130,"icon":133},"https://miro.medium.com/v2/resize:fit:1024/1*VumnQbX20BtQ1QRXG-Mm5A.jpeg","Biome vs ESLint: The Ultimate 2025 Showdown for JavaScript Developers — Speed, Features, and…","When you’re building JavaScript applications, keeping your code clean and consistent is crucial. For years, ESLint has been the go-to tool…","https://medium.com/@harryespant","Medium",[],{"date":131,"timezone_type":20,"timezone":132},"2025-09-12 17:24:50.036000","Z","https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156",[],{"viewport":136,"theme-color":138,"twitter:app:name:iphone":140,"twitter:app:id:iphone":141,"al:ios:app_name":143,"al:ios:app_store_id":144,"al:android:package":145,"fb:app_id":147,"og:site_name":149,"apple-itunes-app":150,"og:type":152,"article:published_time":154,"title":156,"og:title":158,"al:android:url":160,"al:ios:url":162,"al:android:app_name":163,"description":164,"og:description":166,"og:url":167,"al:web:url":168,"og:image":169,"article:author":170,"author":171,"robots":172,"referrer":174,"twitter:title":176,"twitter:site":177,"twitter:app:url:iphone":179,"twitter:description":180,"twitter:image:src":181,"twitter:card":182,"twitter:label1":184,"twitter:data1":186},[137],"width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1",[139],"#000000",[128],[142],"828256236",[128],[142],[146],"com.medium.reader",[148],"542599432471018",[128],[151],"app-id=828256236, app-argument=/@harryespant/biome-vs-eslint-the-ultimate-2025-showdown-for-javascript-developers-speed-features-and-3e5130be4a3c, affiliate-data=pt=698524&ct=smart_app_banner&mt=8",[153],"article",[155],"2025-09-12T17:24:50.036Z",[157],"Biome vs ESLint: The Ultimate 2025 Showdown for JavaScript Developers — Speed, Features, and Migration Guide | by Harry Es Pant | Sep, 2025 | Medium",[159],"Biome vs ESLint: The Ultimate 2025 Showdown for JavaScript Developers — Speed, Features, and…",[161],"medium://p/3e5130be4a3c",[161],[128],[165],"Biome vs ESLint: The Ultimate 2025 Showdown for JavaScript Developers — Speed, Features, and Migration Guide When you’re building JavaScript applications, keeping your code clean and consistent …",[126],[110],[110],[124],[127],[111],[173],"index,noarchive,follow,max-image-preview:large",[175],"unsafe-url",[159],[178],"@Medium",[161],[126],[124],[183],"summary_large_image",[185],"Reading time",[187],"5 min read",{"title":189,"slug":190,"excerpt":191,"content":192,"author":10,"author_bio":16,"published_at":193,"updated_at":194,"is_featured":15,"is_external":15,"banner_image":195,"reading_time":196,"toc":197,"official_docs":235,"category":236,"tags":237,"meta":16},"Using defineExpose script: A hidden gem in Vue 3","using-defineexpose-script-a-hidden-gem-in-vue-3","Explore Vue 3’s defineExpose macro to safely expose child methods and properties. Learn patterns, best practices, and real examples.","\u003Ch2 id=\"introduction\">Introduction\u003C/h2>\r\n\u003Cp>Vue 3 introduced several composition API features that change how we build components, and among these powerful additions lies a lesser-known gem: \u003Ccode>defineExpose\u003C/code>. This compiler macro provides a clean and more effective way to expose specific methods and properties from child components to their parents, offering developers greater control over component interfaces.\u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"what-is-defineexpose\">What is defineExpose()?\u003C/h2>\r\n\u003Cp>defineExpose is a compile-time macro available in Vue 3's \u003Ccode><script setup>\u003C/code> syntax that allows you to explicitly define which properties and methods should be accessible to parent components through template refs. Unlike the Options API, where all methods and data are automatically exposed, the Composition API  \u003Ccode><script setup>\u003C/code> keeps everything private by default; that's where defineExpose becomes invaluable.\u003C/p>\r\n\u003Ch2 id=\"the-problem-defineexpose-solves\">The problem defineExpose solves?\u003C/h2>\r\n\u003Cp>In traditional Vue 2 or options API components, parent components could access any method or property of child components through refs. However, with the composition API, this automatic exposure is disabled for better encapsulation. Sometimes you need to break this encapsulation intentionally, and that's exactly what \u003Ccode>defineExpose\u003C/code> enables. For understanding the options API way, see the example below.\u003C/p>\r\n\u003Ch3 id=\"options-api-example\">Options API example:\u003C/h3>\r\n\u003Cp>\u003Cstrong>Child.vue\u003C/strong>\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><template>\r\n  <p>Count: {{ count }}</p>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return { count: 0 }\r\n  },\r\n  methods: {\r\n    increment() {\r\n      this.count++\r\n    }\r\n  }\r\n}\r\n</script>\r\n\u003C/code>\u003C/pre>\r\n\u003Cp>\u003Cstrong>Parent.vue\u003C/strong>\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><template>\r\n  <Child ref=\"child\" />\r\n  <button @click=\"callChild\">Increment From Parent</button>\r\n</template>\r\n\r\n<script>\r\nimport Child from './Child.vue'\r\n\r\nexport default {\r\n  components: { Child },\r\n  methods: {\r\n    callChild() {\r\n      // can directly access any data or method\r\n      this.$refs.child.increment()\r\n      console.log(this.$refs.child.count)\r\n    }\r\n  }\r\n}\r\n</script>\r\n\u003C/code>\u003C/pre>\r\n\u003Cp>In this, the parent can call\u003Ccode> increment ()\u003C/code> or even read \u003Ccode>count\u003C/code> without the child exposing it.\u003C/p>\r\n\u003Ch2 id=\"basic-implementation-of-defineexpose\">Basic Implementation of \u003Ccode>defineExpose()\u003C/code>\u003C/h2>\r\n\u003Cp>Here's a simple example demonstrating how to use \u003C/p>\r\n\u003Cp>\u003Cstrong>Child component (childComponent.vue):\u003C/strong>\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><script setup>\r\nimport { ref } from 'vue'\r\n\r\nconst count = ref(0)\r\nconst message = ref('Hello from child!')\r\n\r\nconst increment = () => {\r\n  count.value++\r\n}\r\n\r\nconst reset = () => {\r\n  count.value = 0\r\n}\r\n\r\nconst updateMessage = (newMessage) => {\r\n  message.value = newMessage\r\n}\r\n\r\n// Expose specific methods and properties\r\ndefineExpose({\r\n  count,\r\n  increment,\r\n  reset,\r\n  updateMessage\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div>\r\n    <p>Count: {{ count }}</p>\r\n    <p>{{ message }}</p>\r\n    <button @click=\"increment\">Increment</button>\r\n    <button @click=\"reset\">Reset</button>\r\n  </div>\r\n</template>\u003C/code>\u003C/pre>\r\n\u003Cp>\u003Cstrong>Parent component (ParentComponent.vue):\u003C/strong>\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><script setup>\r\nimport { ref } from 'vue'\r\nimport ChildComponent from './ChildComponent.vue'\r\n\r\nconst childRef = ref()\r\n\r\nconst handleParentIncrement = () => {\r\n  childRef.value.increment()\r\n}\r\n\r\nconst handleReset = () => {\r\n  childRef.value.reset()\r\n}\r\n\r\nconst changeChildMessage = () => {\r\n  childRef.value.updateMessage('Updated from parent!')\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div>\r\n    <h2>Parent Component</h2>\r\n    <button @click=\"handleParentIncrement\">Increment from Parent</button>\r\n    <button @click=\"handleReset\">Reset from Parent</button>\r\n    <button @click=\"changeChildMessage\">Change Message</button>\r\n    \r\n    <ChildComponent ref=\"childRef\" />\r\n  </div>\r\n</template>\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"practical-use-cases\">Practical Use Cases\u003C/h2>\r\n\u003Ch3 id=\"form-validation\">Form Validation\u003C/h3>\r\n\u003Cp>One of the most common use cases for \u003Ccode>defineExpose\u003C/code> is creating reusable form components that can be validated from the parent components:\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><!-- FormInput.vue -->\r\n<script setup>\r\nimport { ref, computed } from 'vue'\r\n\r\nconst props = defineProps(['modelValue', 'rules'])\r\nconst emit = defineEmits(['update:modelValue'])\r\n\r\nconst inputValue = computed({\r\n  get: () => props.modelValue,\r\n  set: (value) => emit('update:modelValue', value)\r\n})\r\n\r\nconst errors = ref([])\r\n\r\nconst validate = () => {\r\n  errors.value = []\r\n  if (props.rules) {\r\n    props.rules.forEach(rule => {\r\n      const result = rule(inputValue.value)\r\n      if (result !== true) {\r\n        errors.value.push(result)\r\n      }\r\n    })\r\n  }\r\n  return errors.value.length === 0\r\n}\r\n\r\nconst clearErrors = () => {\r\n  errors.value = []\r\n}\r\n\r\ndefineExpose({\r\n  validate,\r\n  clearErrors,\r\n  hasErrors: computed(() => errors.value.length > 0)\r\n})\r\n</script>\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Ch3 id=\"modal-components\">Modal Components\u003C/h3>\r\n\u003Cp>Another excellent use case is modal components, where the parent needs to control the modal's visibility.\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><!-- Modal.vue -->\r\n<script setup>\r\nimport { ref } from 'vue'\r\n\r\nconst isVisible = ref(false)\r\n\r\nconst show = () => {\r\n  isVisible.value = true\r\n}\r\n\r\nconst hide = () => {\r\n  isVisible.value = false\r\n}\r\n\r\nconst toggle = () => {\r\n  isVisible.value = !isVisible.value\r\n}\r\n\r\ndefineExpose({\r\n  show,\r\n  hide,\r\n  toggle,\r\n  isVisible: readonly(isVisible)\r\n})\r\n</script>\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"best-practices\">Best Practices\u003C/h2>\r\n\u003Col>\r\n\u003Cli>\u003Cstrong>Be selective:\u003C/strong> \u003Cbr />Only expose what's necessary. The principle of least privilege applies here - expose only the methods and properties that parent components genuinely need to access.\u003C/li>\r\n\u003Cli>\u003Cstrong>Use Descriptive Names:\u003C/strong> \u003Cbr />Choose clear, descriptive names for exposed methods that clearly indicate their purpose and expected behavior.\u003C/li>\r\n\u003Cli>\u003Cstrong>Consider readonly for state: \u003C/strong>\u003Cbr />When exposing state, consider using \u003Ccode>readonly()\u003C/code> to prevent parent components from directly mutating the state\u003Cbr />\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><script setup>\r\nimport { ref, readonly } from 'vue'\r\n\r\nconst internalState = ref('some value')\r\n\r\ndefineExpose({\r\n  state: readonly(internalState),\r\n  updateState: (newValue) => {\r\n    internalState.value = newValue\r\n  }\r\n})\r\n</script>\u003C/code>\u003C/pre>\r\n\u003C/li>\r\n\u003C/ol>\r\n\u003Ch2 id=\"alternative-approaches\">Alternative Approaches\u003C/h2>\r\n\u003Cp>While defineExpose is powerful, consider whether it's the right solution. Sometimes, proper event emission or props passing might be more appropriate.\u003C/p>\r\n\u003Cul>\r\n\u003Cli>\u003Cstrong>Events\u003C/strong>: For communicating state changes upward\u003C/li>\r\n\u003Cli>\u003Cstrong>Props\u003C/strong>: For passing data downward\u003C/li>\r\n\u003Cli>\u003Cstrong>Provide/Inject\u003C/strong>: For deep component tree communication\u003C/li>\r\n\u003Cli>S\u003Cstrong>tate management:\u003C/strong> for complex application state\u003C/li>\r\n\u003C/ul>\r\n\u003Ch2 id=\"typescript-support\">TypeScript Support\u003C/h2>\r\n\u003Cp>\u003Ccode>defineExpose\u003C/code> works seamlessly with TypeScript; you can define interfaces for better type safety:\u003C/p>\r\n\u003Cpre class=\"language-javascript\">\u003Ccode><script setup lang=\"ts\">\r\ninterface ExposedAPI {\r\n  validate: () => boolean\r\n  reset: () => void\r\n  value: string\r\n}\r\n\r\nconst validate = (): boolean => {\r\n  // validation logic\r\n  return true\r\n}\r\n\r\nconst reset = (): void => {\r\n  // reset logic\r\n}\r\n\r\nconst value = ref('')\r\n\r\ndefineExpose<ExposedAPI>({\r\n  validate,\r\n  reset,\r\n  value\r\n})\r\n</script>\u003C/code>\u003C/pre>\r\n\u003Ch2 id=\"nbsp\"> \u003C/h2>\r\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\r\n\u003Cp>\u003Ccode>defineExpose\u003C/code> is a valuable addition to the Vue 3 toolkit that strikes a balance between component encapsulation and necessary parent-child communication. Remember that with great power comes great responsibility – use defineExpose thoughtfully to maintain clean component architecture while solving real communication challenges in your Vue 3 applications.\u003C/p>\r\n\u003Cp>The key is understanding when to use it versus other communication patterns, ensuring your components remain maintainable and your application architecture stays clean and predictable.\u003C/p>","2025-09-05T21:37:00.000000Z","2025-09-06T15:56:15.000000Z","https://admin.ssbhattarai.com.np/storage/articles/banners/kQp61jrdiwIoto9mgErUBr5PgCpEqhqtlA6CZPWr.png",5,[198,201,204,207,210,213,216,219,222,225,228,231,234],{"level":20,"text":199,"id":200},"Introduction","introduction",{"level":20,"text":202,"id":203},"What is defineExpose()?","what-is-defineexpose",{"level":20,"text":205,"id":206},"The problem defineExpose solves?","the-problem-defineexpose-solves",{"level":17,"text":208,"id":209},"Options API example:","options-api-example",{"level":20,"text":211,"id":212},"Basic Implementation of defineExpose()","basic-implementation-of-defineexpose",{"level":20,"text":214,"id":215},"Practical Use Cases","practical-use-cases",{"level":17,"text":217,"id":218},"Form Validation","form-validation",{"level":17,"text":220,"id":221},"Modal Components","modal-components",{"level":20,"text":223,"id":224},"Best Practices","best-practices",{"level":20,"text":226,"id":227},"Alternative Approaches","alternative-approaches",{"level":20,"text":229,"id":230},"TypeScript Support","typescript-support",{"level":20,"text":232,"id":233}," ","nbsp",{"level":20,"text":90,"id":91},[],{"id":94,"name":95,"slug":96},[238,241,242],{"name":239,"slug":240},"Vue","vue",{"name":95,"slug":96},{"name":102,"slug":103},{"title":244,"slug":245,"excerpt":246,"external_link":247,"author":10,"author_bio":16,"published_at":248,"updated_at":249,"is_featured":15,"is_external":14,"banner_image":16,"official_docs":250,"category":251,"tags":252,"meta":257},"Alpine.js: A Modern Lightweight JavaScript Framework — A jQuery Replacement ?","alpine-js-a-modern-lightweight-javascript-framework-a-jquery-replacement","Alpine.js promotes a reactive programming paradigm, similar to Vue.js. This means that data binding and updates are automatically handled by the framework, eliminating the need for manual event handling and DOM manipulation.","https://medium.com/@ssbhattarai/alpine-js-a-modern-lightweight-javascript-framework-a-jquery-replacement-68faa791edbb","2025-08-28T15:33:00.000000Z","2025-08-28T15:35:21.000000Z",[],{"id":94,"name":95,"slug":96},[253,254,255],{"name":95,"slug":96},{"name":100,"slug":100},{"name":256,"slug":256},"alpinejs",{"info":258,"oembed":266,"metas":267},{"image":259,"title":260,"description":261,"url":247,"author":262,"provider":128,"keywords":263,"publishedAt":264,"icon":133},"https://miro.medium.com/v2/da:true/resize:fit:1200/0*5uXeNboKhsLWf83G","Alpine.js: A Modern Lightweight JavaScript Framework — A jQuery Replacement","I’ve been an active user of Alpine.js since 2023, and let me tell you, it’s been a game-changer for me. One of the primary reasons I’ve…","https://medium.com/@ssbhattarai",[],{"date":265,"timezone_type":20,"timezone":132},"2024-03-28 15:51:11.565000",[],{"viewport":268,"theme-color":269,"twitter:app:name:iphone":270,"twitter:app:id:iphone":271,"al:ios:app_name":272,"al:ios:app_store_id":273,"al:android:package":274,"fb:app_id":275,"og:site_name":276,"apple-itunes-app":277,"og:type":279,"article:published_time":280,"title":282,"og:title":284,"al:android:url":286,"al:ios:url":288,"al:android:app_name":289,"description":290,"og:description":292,"og:url":293,"al:web:url":294,"og:image":295,"article:author":296,"author":297,"robots":299,"referrer":300,"twitter:title":301,"twitter:site":302,"twitter:app:url:iphone":303,"twitter:description":304,"twitter:image:src":305,"twitter:card":306,"twitter:label1":307,"twitter:data1":308},[137],[139],[128],[142],[128],[142],[146],[148],[128],[278],"app-id=828256236, app-argument=/@ssbhattarai/alpine-js-a-modern-lightweight-javascript-framework-a-jquery-replacement-68faa791edbb, affiliate-data=pt=698524&ct=smart_app_banner&mt=8",[153],[281],"2024-03-28T15:51:11.565Z",[283],"Alpine.js: A Modern Lightweight JavaScript Framework — A jQuery Replacement ? | by ssbhattarai | Medium",[285],"Alpine.js: A Modern Lightweight JavaScript Framework — A jQuery Replacement",[287],"medium://p/68faa791edbb",[287],[128],[291],"I’ve been an active user of Alpine.js since 2023, and let me tell you, it’s been a game-changer for me. One of the primary reasons I’ve grown to love Alpine.js is its remarkable similarity to Vue.js…",[261],[247],[247],[259],[262],[298],"ssbhattarai",[173],[175],[285],[178],[287],[261],[259],[183],[185],[309],"4 min read",{"title":311,"slug":312,"excerpt":313,"content":314,"author":10,"author_bio":16,"published_at":315,"updated_at":316,"is_featured":15,"is_external":15,"banner_image":317,"reading_time":17,"toc":318,"official_docs":334,"category":335,"tags":336,"meta":16},"WhereAll() and WhereAny() in Laravel","whereall-and-whereany-in-laravel","Laravel 11 adds whereAll() and whereAny() to Query Builder, making it easier to apply the same conditions across multiple columns.","\u003Cp>In Laravel 11, the Query Builder introduces two powerful functions: \u003Cstrong>\u003Ccode>whereAll()\u003C/code>\u003C/strong> and \u003Ccode>\u003Cstrong>whereAny()\u003C/strong>\u003C/code>, anticipated to see widespread adoption. Sometimes, you might need to impose identical conditions on multiple columns in a database query. For instance, you may wish to fetch all entries where any or all column in a specified list matches a certain pattern. Utilizing the SQL \u003Cstrong>\u003Ccode>LIKE\u003C/code>\u003C/strong> operator, these functions become essential tools in query construction.\u003C/p>\r\n\u003Ch2 id=\"whereall\">WhereAll()\u003C/h2>\r\n\u003Cp>The \u003Ccode>whereAll\u003C/code> method in laravel allows you to fetch records where all specified columns meet a particular condition. For instance, if we need to fetch all the contents from the \u003Ccode>blogs\u003C/code> table where title and description match the laravel keyword. We can use this as:\u003C/p>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Using whereAll method\r\n$blogs = Blog::query()\r\n            ->whereAll(['title','description'], 'LIKE', '%laravel%')\r\n            ->get();\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Cp>Furthermore, integrating user search input becomes effortless:\u003C/p>\r\n\u003Cdiv>\r\n\u003Cpre class=\"language-php\">\u003Ccode>use Illuminate\\Http\\Request;\r\n\r\npublic function search(Request $request)\r\n{\r\n    $search = $request->get('q');\r\n    $blogs = Blog::query()\r\n            ->whereAll([\r\n                'title',\r\n                'description',\r\n              ], 'LIKE', '%' . $search. '%')\r\n            ->get();\r\n}\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Cp>In this way you can use the \u003Ccode>whereAll\u003C/code> function in query.\u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"heading-whereany\" class=\"permalink-heading\">WhereAny()\u003C/h2>\r\n\u003Cp>W\u003Ccode>hereAny\u003C/code> serves as the counterpart to above implementation. While \u003Ccode>whereAll\u003C/code> requires all specified columns to meet a condition for data retrieval, \u003Ccode>whereAny\u003C/code> only necessitates one column to match the condition. Lets rewrite the above case for this case:\u003C/p>\r\n\u003Cpre class=\"language-php\">\u003Ccode>$blogs = Blog::query()\r\n            ->whereAny(['title','description'], 'LIKE', '%laravel%')\r\n            ->get();\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Cp>Implement user search input as:\u003C/p>\r\n\u003Cdiv>\r\n\u003Cdiv>\r\n\u003Cpre class=\"language-php\">\u003Ccode>use Illuminate\\Http\\Request;\r\n\r\npublic function search(Request $request)\r\n{\r\n    $search = $request->get('q');\r\n    $blogs = Blog::query()\r\n            ->whereAny([\r\n                'title',\r\n                'description',\r\n              ], 'LIKE', '%' . $search. '%')\r\n            ->get();\r\n}\u003C/code>\u003C/pre>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003Cp>In this way you can implement the whereAny function on query.\u003C/p>\r\n\u003Cp>This is not only changing the function from All to Any, but this will impact on SQL Query. You can see use the difference between these by generating the sql from the above as:\u003C/p>\r\n\u003Cp> \u003C/p>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// To dubug and see the SQL of below query\r\n$blogs = Blog::query()\r\n            ->whereAny(['title','description'], 'LIKE', '%laravel%')\r\n            ->ddRawSql();\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Cp>For a more descriptive implementation, you can always visit the \u003Ca href=\"https://laravel.com/docs/12.x/queries#where-any-all-none-clauses\" target=\"_blank\" rel=\"noopener\">official documentation\u003C/a>.\u003C/p>\r\n\u003Ch2 id=\"heading-all-code\" class=\"permalink-heading\">\u003C/h2>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"heading-all-code\" class=\"permalink-heading\">All code\u003C/h2>\r\n\u003Cdiv>\r\n\u003Cdiv>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Using whereAll method\r\n$blogs = Blog::query()\r\n            ->whereAll(['title', 'description'], 'LIKE', '%laravel%')\r\n            ->get();\r\n\r\n// Using whereAny method\r\n$blogs = Blog::query()\r\n            ->whereAny(['title', 'description'], 'LIKE', '%laravel%')\r\n            ->get();\r\n\r\n// Implementing with request search data\r\nuse Illuminate\\Http\\Request;\r\n\r\npublic function search(Request $request)\r\n{\r\n    $search = $request->get('q');\r\n\r\n    // Using whereAll method\r\n    $blogs = Blog::query()\r\n            ->whereAll(['title', 'description'], 'LIKE', '%' . $search. '%')\r\n            ->get();\r\n\r\n    // Using whereAny method\r\n    $blogs = Blog::query()\r\n            ->whereAny(['title', 'description'], 'LIKE', '%' . $search. '%')\r\n            ->get();\r\n}\u003C/code>\u003C/pre>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003Cdiv id=\"post-content-wrapper\" class=\"prose prose-base mx-auto mb-10 min-h-30 break-words dark:prose-dark lg:prose-lg\">\r\n\u003Ch3 id=\"happy-coding-nbsp\">Happy Coding !!\u003Cspan style=\"font-size: 14px;\"> \u003C/span>\u003C/h3>\r\n\u003C/div>\r\n\u003Ch2 id=\"heading-whereany\" class=\"permalink-heading\">\u003C/h2>\r\n\u003C/div>","2025-08-26T17:38:00.000000Z","2025-08-26T17:51:20.000000Z","https://admin.ssbhattarai.com.np/storage/articles/banners/3dC0SsTnTEi8RjGzpQeHwPMZeceCsTy8gk6FQsdZ.png",[319,322,325,327,330,333],{"level":20,"text":320,"id":321},"WhereAll()","whereall",{"level":20,"text":323,"id":324},"WhereAny()","whereany",{"level":20,"text":326,"id":326},"",{"level":20,"text":328,"id":329},"All code","all-code",{"level":17,"text":331,"id":332},"Happy Coding !! ","happy-coding-nbsp",{"level":20,"text":326,"id":326},[],{"id":20,"name":46,"slug":47},[337,339,340],{"name":43,"slug":338},"laravel",{"name":46,"slug":47},{"name":51,"slug":52},{"title":342,"slug":343,"excerpt":344,"content":345,"author":10,"author_bio":16,"published_at":346,"updated_at":347,"is_featured":15,"is_external":15,"banner_image":348,"reading_time":349,"toc":350,"official_docs":391,"category":392,"tags":393,"meta":16},"How to Use DTOs Perfectly in Laravel PHP","how-to-use-dtos-perfectly-in-laravel-php","DTO (Data Transfer Object) is a design pattern used to transfer data between application layers. This object-oriented approach encapsulates data for efficient and easy transmission","\u003Ch2 id=\"what-is-a-data-transfer-object-dto\" class=\"text-xl font-bold mt-1 -mb-0.5\">What is a data transfer object (DTO)?\u003C/h2>\r\n\u003Cp class=\"whitespace-normal break-words\">A \u003Cstrong>Data Transfer Object  (DTO) \u003C/strong>is a design pattern used to transfer data between software application subsystems or layers. DTOs are simple objects that contain no business logic and serve purely as data carriers. They encapsulate multiple data attributes into a single object, making data transfer more efficient and organised.\u003C/p>\r\n\u003Cp class=\"whitespace-normal break-words\">\u003Cbr />Think of a DTO as a specialized container that holds related data together, similar to how a shipping box contains multiple items for transport. The key characteristics of DTOs include:\u003C/p>\r\n\u003Cul style=\"list-style-type: circle;\">\r\n\u003Cli>\u003Cstrong>No Business Logic: DTOs \u003C/strong>only hold data; they don't perform operations\u003C/li>\r\n\u003Cli>\u003Cstrong>immutability\u003C/strong>: Once created, they typically don't change\u003C/li>\r\n\u003Cli>\u003Cstrong>Serializable\u003C/strong>: Can be easily converted to/from different formats (JSON, XML, etc.)\u003C/li>\r\n\u003Cli>\u003Cstrong>Type safety\u003C/strong>: Provide compile-time checking and IDE support\u003C/li>\r\n\u003C/ul>\r\n\u003Cp>The DTO pattern was first introduced by \u003Ca href=\"https://www.martinfowler.com/\" target=\"_blank\" rel=\"noopener\">Martin Fowler\u003C/a> in his book \u003Ca title=\""Patterns of Enterprise Application Architecture" (2002)\" href=\"https://www.martinfowler.com/books/eaa.html\" target=\"_blank\" rel=\"noopener\">\"Patterns of Enterprise Application Architecture\" (2002)\u003C/a>. Originally designed for Enterprise Java applications to reduce network calls in distributed systems. , DTOs solved the problem of \"chatty\" interfaces where multiple small requests were made instead of fewer, more substantial ones.\u003C/p>\r\n\u003Ch2 id=\"why-dtos-matter-in-laravel\">Why DTOs Matter in Laravel\u003C/h2>\r\n\u003Cp>Laravel applications often suffer from several common problems that DTos can elegantly solve:\u003C/p>\r\n\u003Ch3 id=\"problem-1-array-hell\">Problem 1: Array Hell\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Without DTOs - unclear data structure\r\npublic function createUser(array $userData): User\r\n{\r\n    // What fields are in $userData? \r\n    // What types are they?\r\n    // Which are required?\r\n    return User::create($userData);\r\n}\u003C/code>\u003C/pre>\r\n\u003Ch3 id=\"problem-2-controller-bloat\">Problem 2: Controller Bloat\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Fat controllers doing validation and transformation\r\npublic function store(Request $request)\r\n{\r\n    $validated = $request->validate([\r\n        'name' => 'required|string',\r\n        'email' => 'required|email',\r\n        'birth_date' => 'required|date',\r\n        // ... 20 more fields\r\n    ]);\r\n    \r\n    // Complex transformation logic\r\n    $userData = [\r\n        'name' => $validated['name'],\r\n        'email' => strtolower($validated['email']),\r\n        'birth_date' => Carbon::parse($validated['birth_date']),\r\n        // ... more transformations\r\n    ];\r\n    \r\n    return $this->userService->createUser($userData);\r\n}\u003C/code>\u003C/pre>\r\n\u003Ch3 id=\"problem-3-inconsistent-api-response\">Problem 3: Inconsistent API Response\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Different endpoints returning different data formats\r\nRoute::get('/users/{id}', function($id) {\r\n    return User::find($id); // Returns all model attributes\r\n});\r\n\r\nRoute::get('/users/{id}/summary', function($id) {\r\n    $user = User::find($id);\r\n    return [\r\n        'id' => $user->id,\r\n        'name' => $user->name,\r\n        'email' => $user->email,\r\n        // Inconsistent with above endpoint\r\n    ];\r\n});\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Cp>DTOs solve these problems by providing structure, type safety, and consistency.\u003C/p>\r\n\u003Ch2 id=\"creating-your-first-dto-in-laravel\">Creating Your First DTO in Laravel\u003C/h2>\r\n\u003Cp>Let's start with a basic DTO implementation and gradually build complexity.\u003C/p>\r\n\u003Ch3 id=\"basic-dto-structure\">Basic DTO structure\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode><?php\r\n\r\nnamespace App\\DTOs;\r\n\r\nclass UserDTO\r\n{\r\n    public function __construct(\r\n        public readonly string $name,\r\n        public readonly string $email,\r\n        public readonly ?string $phone = null,\r\n        public readonly ?Carbon $birthDate = null,\r\n    ) {}\r\n    \r\n    public static function fromArray(array $data): self\r\n    {\r\n        return new self(\r\n            name: $data['name'],\r\n            email: $data['email'],\r\n            phone: $data['phone'] ?? null,\r\n            birthDate: isset($data['birth_date']) \r\n                ? Carbon::parse($data['birth_date']) \r\n                : null,\r\n        );\r\n    }\r\n    \r\n    public function toArray(): array\r\n    {\r\n        return [\r\n            'name' => $this->name,\r\n            'email' => $this->email,\r\n            'phone' => $this->phone,\r\n            'birth_date' => $this->birthDate?->toDateString(),\r\n        ];\r\n    }\r\n}\u003C/code>\u003C/pre>\r\n\u003Cp>Why we structured it this way:\u003C/p>\r\n\u003Cul>\r\n\u003Cli>\u003Cstrong>\u003Ccode>Readonly\u003C/code> properties\u003C/strong>:  Prevents accidental mutation after creation, ensuring data integrity\u003C/li>\r\n\u003Cli>\u003Cstrong>Names constructor parameters\u003C/strong>: PHP 8+ syntax makes instantiation clear and prevents parameter order mistakes\u003C/li>\r\n\u003Cli>\u003Cstrong>\u003Ccode>fromArray()\u003C/code> static method\u003C/strong>: Provides a clean factory method for creating DTOs from request data or database results\u003C/li>\r\n\u003Cli>\u003Cstrong>Type hints\u003C/strong>: \u003Ccode>string\u003C/code>, \u003Ccode>?string\u003C/code>, \u003Ccode>?Carbon\u003C/code> provides compile-time checking and IDE autocomplete\u003C/li>\r\n\u003Cli>\u003Cstrong>Null coalescing\u003C/strong>: Handles optional fields gracefully with sensible defaults\u003C/li>\r\n\u003Cli>\u003Cstrong>\u003Ccode>toArray()\u003C/code> method\u003C/strong>: Converts DTO back to array format for database operations or JSON responses\u003C/li>\r\n\u003C/ul>\r\n\u003Ch3 id=\"using-dtos-in-controllers\">Using DTOs in Controllers\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode><?php\r\n\r\nnamespace App\\Http\\Controllers;\r\n\r\nuse App\\DTOs\\UserDTO;\r\nuse App\\Http\\Requests\\CreateUserRequest;\r\nuse App\\Services\\UserService;\r\n\r\nclass UserController extends Controller\r\n{\r\n    public function __construct(\r\n        private UserService $userService\r\n    ) {}\r\n    \r\n    public function store(CreateUserRequest $request)\r\n    {\r\n        $userDTO = UserDTO::fromArray($request->validated());\r\n        \r\n        $user = $this->userService->createUser($userDTO);\r\n        \r\n        return response()->json([\r\n            'data' => $userDTO->toArray(),\r\n            'message' => 'User created successfully'\r\n        ], 201);\r\n    }\r\n}\u003C/code>\u003C/pre>\r\n\u003Cp>Why is this approach better?\u003C/p>\r\n\u003Cul>\r\n\u003Cli>\u003Cstrong>Dependency Injection\u003C/strong>: User service is injected, making the controller testable and following the SOLID principles\u003C/li>\r\n\u003Cli>\u003Cstrong>Thin controller\u003C/strong>: Controller only handles HTTP concerns - converting request to DTO and returning response\u003C/li>\r\n\u003Cli>\u003Cstrong>Type Safety\u003C/strong>: \u003Ccode>CreateUserRequest\u003C/code> handles validation, and UserDTO ensures type safety for the server layer\u003C/li>\r\n\u003Cli>\u003Cstrong>consistent response format:\u003C/strong> user \u003Ccode>toArray()\u003C/code> ensures consistent API responses\u003C/li>\r\n\u003Cli>\u003Cstrong>Separation of concerns\u003C/strong>: Business logic stays in the service layer, not the controller\u003Cbr />\u003Cbr />\u003C/li>\r\n\u003C/ul>\r\n\u003Ch2 id=\"service-layer-integration\">Service Layer Integration\u003C/h2>\r\n\u003Cpre class=\"language-php\">\u003Ccode><?php\r\n\r\nnamespace App\\Services;\r\n\r\nuse App\\DTOs\\UserDTO;\r\nuse App\\Models\\User;\r\n\r\nclass UserService\r\n{\r\n    public function createUser(UserDTO $userDTO): User\r\n    {\r\n        return User::create($userDTO->toArray());\r\n    }\r\n    \r\n    public function updateUser(User $user, UserDTO $userDTO): User\r\n    {\r\n        $user->update($userDTO->toArray());\r\n        return $user->fresh();\r\n    }\r\n}\u003C/code>\u003C/pre>\r\n\u003Cp>\u003Cbr />Why these service patterns work well:\u003C/p>\r\n\u003Cul>\r\n\u003Cli>\u003Cstrong>Clear method signatures\u003C/strong>: \u003Ccode>UserDTO $userDTO\u003C/code> parameter makes it immediately clear what data is expected\u003C/li>\r\n\u003Cli>\u003Cstrong>No array guessing\u003C/strong>: Service methods don't need to validate  or guess array structure\u003C/li>\r\n\u003Cli>\u003Cstrong>Reusable\u003C/strong>: The same DTO can be used for create, update or other operations\u003C/li>\r\n\u003Cli>\u003Cstrong>Clean Separation\u003C/strong>: Service handles business logic, DTO handles data transport\u003C/li>\r\n\u003C/ul>\r\n\u003Ch2 id=\"common-pitfalls\">Common Pitfalls\u003C/h2>\r\n\u003Ch3 id=\"1-adding-business-logic-to-dtos\">1. Adding Business logic to DTOs\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Don't do this\r\nclass UserDTO\r\n{\r\n    public function createUser(): User\r\n    {\r\n        // Business logic doesn't belong in DTOs\r\n        return User::create($this->toArray());\r\n    }\r\n}\r\n\r\n// Do this instead\r\nclass UserService\r\n{\r\n    public function createUser(UserDTO $userDTO): User\r\n    {\r\n        return User::create($userDTO->toArray());\r\n    }\r\n}\u003C/code>\u003C/pre>\r\n\u003Ch3 id=\"2-making-dtos-mutable\">2. Making DTOs Mutable\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Avoid mutable DTOs\r\nclass UserDTO\r\n{\r\n    public string $name;\r\n    public string $email;\r\n    \r\n    public function setEmail(string $email): void\r\n    {\r\n        $this->email = $email; // Mutations make DTOs unreliable\r\n    }\r\n}\r\n\r\n// Use immutable DTOs\r\nclass UserDTO\r\n{\r\n    public function __construct(\r\n        public readonly string $name,\r\n        public readonly string $email,\r\n    ) {}\r\n    \r\n    public function withEmail(string $email): self\r\n    {\r\n        return new self($this->name, $email); // Return new instance\r\n    }\r\n}\u003C/code>\u003C/pre>\r\n\u003Ch3 id=\"3-over-engineering-with-too-many-dtos\">3. Over-engineering with Too Many DTOs\u003C/h3>\r\n\u003Cpre class=\"language-php\">\u003Ccode>// Don't create DTOs for every small data structure\r\nclass UserNameDTO\r\n{\r\n    public function __construct(public readonly string $name) {}\r\n}\r\n\r\n// Use DTOs for meaningful data groupings\r\nclass UserContactDTO\r\n{\r\n    public function __construct(\r\n        public readonly string $email,\r\n        public readonly ?string $phone,\r\n        public readonly ?AddressDTO $address,\r\n    ) {}\r\n}\u003C/code>\u003C/pre>\r\n\u003Cp> \u003C/p>\r\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\r\n\u003Cp>Data Transfer Objects are a powerful pattern that can significantly improve your Laravel applications by providing \u003Cstrong>Type safety\u003C/strong>, \u003Cstrong>code clarity\u003C/strong>, \u003Cstrong>consistency\u003C/strong>, \u003Cstrong>maintainability\u003C/strong>, and \u003Cstrong>API stability\u003C/strong>. The key to using DTos effectively is finding the right balance. Not every array needs to become a DTO, but complex data structures, API boundaries, and service layer interfaces are excellent candidates for the DTO pattern.\u003C/p>\r\n\u003Cp>By following the patterns and practices outlined in this guide, you'll be able to create more robust, maintainable, and professional Laravel applications that handle data transfer with confidence and clarity.\u003C/p>\r\n\u003Cp>Remember: DTOs are tools for better software design, not goals in themselves. Use them where they add value, and don't be afraid to start simple and evolve our implementations as your application grows in complexity.\u003C/p>\r\n\u003Cp>\u003Cstrong>Happy Coding !!\u003C/strong>\u003C/p>\r\n\u003Cdiv class=\"relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg\">\r\n\u003Cdiv class=\"sticky opacity-100 group-hover/copy:opacity-100 top-2 py-2 h-12 w-0 float-right\">\r\n\u003Cdiv class=\"absolute right-0 h-8 px-2 items-center inline-flex\">\r\n\u003Cdiv class=\"relative\"> \u003C/div>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003Cdiv class=\"relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg\">\r\n\u003Cdiv class=\"sticky opacity-100 group-hover/copy:opacity-100 top-2 py-2 h-12 w-0 float-right\">\r\n\u003Cdiv class=\"absolute right-0 h-8 px-2 items-center inline-flex\">\r\n\u003Cdiv class=\"relative\">\r\n\u003Cdiv class=\"flex items-center justify-center absolute top-0 left-0 transition-all opacity-100 scale-50\"> \u003C/div>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003C/div>\r\n\u003C/div>","2025-08-25T17:50:00.000000Z","2025-08-28T08:00:01.000000Z","https://admin.ssbhattarai.com.np/storage/articles/banners/ua3JhmROXyIysO2NG5h38obAggNMOX0ixD47wdjw.png",6,[351,354,357,360,363,366,369,372,375,378,381,384,387,390],{"level":20,"text":352,"id":353},"What is a data transfer object (DTO)?","what-is-a-data-transfer-object-dto",{"level":20,"text":355,"id":356},"Why DTOs Matter in Laravel","why-dtos-matter-in-laravel",{"level":17,"text":358,"id":359},"Problem 1: Array Hell","problem-1-array-hell",{"level":17,"text":361,"id":362},"Problem 2: Controller Bloat","problem-2-controller-bloat",{"level":17,"text":364,"id":365},"Problem 3: Inconsistent API Response","problem-3-inconsistent-api-response",{"level":20,"text":367,"id":368},"Creating Your First DTO in Laravel","creating-your-first-dto-in-laravel",{"level":17,"text":370,"id":371},"Basic DTO structure","basic-dto-structure",{"level":17,"text":373,"id":374},"Using DTOs in Controllers","using-dtos-in-controllers",{"level":20,"text":376,"id":377},"Service Layer Integration","service-layer-integration",{"level":20,"text":379,"id":380},"Common Pitfalls","common-pitfalls",{"level":17,"text":382,"id":383},"1. Adding Business logic to DTOs","1-adding-business-logic-to-dtos",{"level":17,"text":385,"id":386},"2. Making DTOs Mutable","2-making-dtos-mutable",{"level":17,"text":388,"id":389},"3. Over-engineering with Too Many DTOs","3-over-engineering-with-too-many-dtos",{"level":20,"text":90,"id":91},[],{"id":20,"name":46,"slug":47},[394,395,396,398],{"name":43,"slug":338},{"name":46,"slug":47},{"name":397,"slug":397},"dto",{"name":399,"slug":400},"clean code","clean-code",{"title":402,"slug":403,"excerpt":404,"external_link":405,"author":10,"author_bio":16,"published_at":406,"updated_at":407,"is_featured":15,"is_external":14,"banner_image":408,"official_docs":409,"category":410,"tags":411,"meta":414},"VueUse-Vue composable library that has collection of vue composition utilities","vueuse-vue-composable-library-that-has-collection-of-vue-composition-utilities","VueUse is a powerful collection of Vue.js utility functions built on the Composition API. It provides ready-to-use composables that simplify state management, reactivity, and common application logic, making it easier to build scalable and maintainable Vue applications.","https://medium.com/@ssbhattarai/vueuse-vue-composable-library-that-has-collection-of-vue-composition-utilities-c1704a0de7e9","2025-08-25T16:36:00.000000Z","2025-08-26T16:40:45.000000Z","https://admin.ssbhattarai.com.np/storage/articles/banners/FBER3rxnUU1rwFwmqZRre8ypNEkRN67bBEHzPS9H.png",[],{"id":94,"name":95,"slug":96},[412,413],{"name":239,"slug":240},{"name":95,"slug":96},{"info":415,"oembed":418,"metas":419},{"image":16,"title":416,"description":16,"url":405,"author":16,"provider":128,"keywords":417,"publishedAt":16,"icon":16},"Just a moment...",[],[],{"robots":420,"viewport":422},[421],"noindex,nofollow",[423],"width=device-width,initial-scale=1",{"current_page":94,"from":94,"last_page":94,"links":425,"path":433,"per_page":434,"to":435,"total":435},[426,428,431],{"url":16,"label":427,"page":16,"active":15},"« Previous",{"url":429,"label":430,"page":94,"active":14},"https://admin.ssbhattarai.com.np/api/v1/articles?page=1","1",{"url":16,"label":432,"page":16,"active":15},"Next »","https://admin.ssbhattarai.com.np/api/v1/articles",12,8]