https://github.com/jessegall/vue-forward-slots
Effortlessly forward slots to child components in Vue 3 applications.
https://github.com/jessegall/vue-forward-slots
forwarding slots v-slot vue vuejs vuejs3
Last synced: 8 months ago
JSON representation
Effortlessly forward slots to child components in Vue 3 applications.
- Host: GitHub
- URL: https://github.com/jessegall/vue-forward-slots
- Owner: jessegall
- Created: 2023-08-11T14:45:58.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T11:13:17.000Z (almost 2 years ago)
- Last Synced: 2024-12-30T09:45:05.834Z (over 1 year ago)
- Topics: forwarding, slots, v-slot, vue, vuejs, vuejs3
- Language: TypeScript
- Homepage:
- Size: 147 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Forward Slots
*Effortlessly forward slots to child components in Vue 3 applications.*
[](https://www.npmjs.com/package/vue-forward-slots)
[](https://www.npmjs.com/package/vue-forward-slots)
## Features
- Easily forward all slots or specific slots to child components
- Simple and declarative syntax
## Why Vue Forward Slots?
In Vue applications, it's common to need to forward slots from a parent component to a child component. However, the
default way of doing this can be verbose and repetitive. Consider the following example:
### The Default Way
```vue
```
Verbose and hard to read!
### With Vue Forward Slots
```vue
```
Simple and clean!
## Installation
```bash
npm install vue-forward-slots
```
### Importing
You can import it in the component where you want to use it.
```vue
import {ForwardSlots} from "vue-forward-slots";
...
```
## Usage
### Example Usage
A classic example is that of a table component with multiple levels of nested components.
We can easily define and forward slots to nested components using the `ForwardSlots` component.
#### Root Component
We define the slots in the root component.
```vue
Name
// We still have access to the slot data like we would normally
```
#### Table Component
We forward the slots to the child components.
```vue
// Notice that we can wrap multiple components in the ForwardSlots component
```
#### TableHead Component
The TableHeadComponent now has access to the slots defined in the root component. If no slot is provided, it will
default to the text in the slot.
```vue
Some default text
Some default text
```
#### TableBody Component
The TableBodyComponent also has access to the slots defined in the root component. Notice how we also pass the user data.
```vue
{{ user.name }}
{{ user.status }}
```
We could even go a step further and forward the slots to the next level of child components.
```vue
```
In theory, we could keep forwarding slots to as many levels of child components as we need.
### Forwarding Only Specific Slots
```vue
// For a single slot
// For multiple slots
```
### Excluding Specific Slots
```vue
// For a single slot
// For multiple slots
```