{"id":26458585,"url":"https://github.com/jessegall/vue-forward-slots","last_synced_at":"2025-10-25T09:05:37.400Z","repository":{"id":187710373,"uuid":"677427276","full_name":"jessegall/vue-forward-slots","owner":"jessegall","description":"Effortlessly forward slots to child components in Vue 3 applications.","archived":false,"fork":false,"pushed_at":"2024-08-08T11:13:17.000Z","size":151,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-30T09:45:05.834Z","etag":null,"topics":["forwarding","slots","v-slot","vue","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jessegall.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-11T14:45:58.000Z","updated_at":"2024-11-21T02:39:10.000Z","dependencies_parsed_at":"2024-08-08T13:14:16.228Z","dependency_job_id":"09ce3ffe-423d-4c1e-87c3-499abf4af78e","html_url":"https://github.com/jessegall/vue-forward-slots","commit_stats":null,"previous_names":["jessegall/vue-forward-slots"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessegall%2Fvue-forward-slots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessegall%2Fvue-forward-slots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessegall%2Fvue-forward-slots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessegall%2Fvue-forward-slots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jessegall","download_url":"https://codeload.github.com/jessegall/vue-forward-slots/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244326208,"owners_count":20435122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["forwarding","slots","v-slot","vue","vuejs","vuejs3"],"created_at":"2025-03-19T00:07:01.645Z","updated_at":"2025-10-25T09:05:37.385Z","avatar_url":"https://github.com/jessegall.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Forward Slots\n\n*Effortlessly forward slots to child components in Vue 3 applications.*\n\n[![npm](https://img.shields.io/npm/v/vue-forward-slots.svg)](https://www.npmjs.com/package/vue-forward-slots)\n![license](https://img.shields.io/npm/l/vue-forward-slots.svg)\n[![downloads](https://img.shields.io/npm/dt/vue-forward-slots.svg)](https://www.npmjs.com/package/vue-forward-slots)\n\n## Features\n\n- Easily forward all slots or specific slots to child components\n- Simple and declarative syntax\n\n## Why Vue Forward Slots?\n\nIn Vue applications, it's common to need to forward slots from a parent component to a child component. However, the\ndefault way of doing this can be verbose and repetitive. Consider the following example:\n\n### The Default Way\n\n```vue\n\u003ctemplate\u003e\n    \u003cChildComponent\u003e\n        \u003ctemplate v-for=\"(index, name) in $slots\" v-slot:[name]=\"data\"\u003e\n            \u003cslot :name=\"name\" v-bind=\"data\"/\u003e\n        \u003c/template\u003e\n    \u003c/ChildComponent\u003e\n    \u003cAnotherChildComponent\u003e\n        \u003ctemplate v-for=\"(index, name) in $slots\" v-slot:[name]=\"data\"\u003e\n            \u003cslot :name=\"name\" v-bind=\"data\"/\u003e\n        \u003c/template\u003e\n    \u003c/AnotherChildComponent\u003e\n\u003c/template\u003e\n```\n\nVerbose and hard to read!\n\n### With Vue Forward Slots\n\n```vue\n\u003ctemplate\u003e\n    \u003cForwardSlots :slots=\"$slots\"\u003e\n        \u003cChildComponent/\u003e\n        \u003cAnotherChildComponent/\u003e\n    \u003c/ForwardSlots\u003e\n\u003c/template\u003e\n```\n\nSimple and clean!\n\n## Installation\n\n```bash\nnpm install vue-forward-slots\n```\n\n### Importing\n\nYou can import it in the component where you want to use it.\n\n```vue\n\u003cscript\u003e\n    import {ForwardSlots} from \"vue-forward-slots\";\n\n    ...\n\u003c/script\u003e\n```\n\n## Usage\n\n### Example Usage\n\nA classic example is that of a table component with multiple levels of nested components.\nWe can easily define and forward slots to nested components using the `ForwardSlots` component.\n\n#### Root Component\n\nWe define the slots in the root component.\n\n```vue\n\u003ctemplate\u003e\n    \u003cTableComponent\u003e\n        \u003ctemplate #name-header\u003e\n            \u003cp class=\"font-bold\"\u003e\n                Name\n            \u003c/p\u003e\n        \u003c/template\u003e\n\n        // We still have access to the slot data like we would normally\n        \u003ctemplate #status-cell=\"{ user }\"\u003e\n            \u003cStatusBadge :status=\"user.status\"/\u003e\n        \u003c/template\u003e\n    \u003c/TableComponent\u003e\n\u003c/template\u003e\n```\n\n#### Table Component\n\nWe forward the slots to the child components.\n\n```vue\n\u003ctemplate\u003e\n    \u003ctable\u003e\n        // Notice that we can wrap multiple components in the ForwardSlots component\n        \u003cForwardSlots :slots=\"$slots\"\u003e\n            \u003cTableHeadComponent/\u003e\n            \u003cTableBodyComponent/\u003e\n        \u003c/ForwardSlots\u003e\n    \u003c/table\u003e\n\u003c/template\u003e\n```\n\n#### TableHead Component\n\nThe TableHeadComponent now has access to the slots defined in the root component. If no slot is provided, it will\ndefault to the text in the slot.\n\n```vue\n\u003ctemplate\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\n            \u003cslot name=\"name-header\"\u003e\n                Some default text\n            \u003c/slot\u003e\n        \u003c/th\u003e\n        \u003cth\u003e\n            \u003cslot name=\"status-header\"\u003e\n                Some default text\n            \u003c/slot\u003e\n        \u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n\u003c/template\u003e\n```\n\n#### TableBody Component\n\nThe TableBodyComponent also has access to the slots defined in the root component. Notice how we also pass the user data.\n\n```vue\n\u003ctemplate\u003e\n    \u003ctbody\u003e\n    \u003ctr v-for=\"user in users\"\u003e\n        \u003ctd\u003e\n            \u003cslot name=\"name-cell\" :user=\"user\"\u003e\n                {{ user.name }}\n            \u003c/slot\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003cslot name=\"status-cell\" :user=\"user\"\u003e\n                {{ user.status }}\n            \u003c/slot\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/template\u003e\n```\n\nWe could even go a step further and forward the slots to the next level of child components.\n\n```vue\n\u003ctemplate\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth v-for=\"header in headers\"\u003e\n            \u003cForwardSlots :slots=\"$slots\"\u003e\n                \u003cTableHeaderCell :header=\"header\"/\u003e\n            \u003c/ForwardSlots\u003e\n        \u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n\u003c/template\u003e\n```\n\nIn theory, we could keep forwarding slots to as many levels of child components as we need.\n\n### Forwarding Only Specific Slots\n\n```vue\n\u003ctemplate\u003e\n    // For a single slot\n    \u003cForwardSlots :slots=\"$slots\" only=\"header\"\u003e\n        \u003cMyComponent/\u003e\n    \u003c/ForwardSlots\u003e\n\n    // For multiple slots\n    \u003cForwardSlots :slots=\"$slots\" :only=\"['header', 'footer']\"\u003e\n        \u003cMyComponent/\u003e\n    \u003c/ForwardSlots\u003e\n\u003c/template\u003e\n```\n\n### Excluding Specific Slots\n\n```vue\n\u003ctemplate\u003e\n    // For a single slot\n    \u003cForwardSlots :slots=\"$slots\" except=\"sidebar\"\u003e\n        \u003cMyComponent/\u003e\n    \u003c/ForwardSlots\u003e\n\n    // For multiple slots\n    \u003cForwardSlots :slots=\"$slots\" :except=\"['sidebar', 'footer']\"\u003e\n        \u003cMyComponent/\u003e\n    \u003c/ForwardSlots\u003e\n\u003c/template\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessegall%2Fvue-forward-slots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjessegall%2Fvue-forward-slots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessegall%2Fvue-forward-slots/lists"}