├── .gitignore
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
├── favicon.ico
└── index.html
├── src
├── components
│ └── forward-slots.ts
├── index.ts
├── shims-vue.d.ts
└── vue-forward-slots.d.ts
├── tsconfig.json
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 |
6 | # local env files
7 | .env.local
8 | .env.*.local
9 |
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 |
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue Forward Slots
2 |
3 | Effortlessly forward slots to child components in Vue 3 applications.
4 |
5 | ## Features
6 |
7 | - Easily forward all slots or specific slots to child components
8 | - Simple and declarative syntax
9 |
10 | ## Why Vue Forward Slots?
11 |
12 | In Vue applications, it's common to need to forward slots from a parent component to a child component. However, the
13 | default way of doing this can be verbose and repetitive. Consider the following example:
14 |
15 | ### The Default Way
16 |
17 | ```vue
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | ```
31 |
32 | Verbose and hard to read!
33 |
34 | ### With Vue Forward Slots
35 |
36 | ```vue
37 |
38 |
39 |
40 |
41 |
42 |
43 | ```
44 |
45 | Simple and clean!
46 |
47 | ## Installation
48 |
49 | ```bash
50 | npm install vue-forward-slots
51 | ```
52 |
53 | ### Importing
54 |
55 | You can import it in the component where you want to use it.
56 |
57 | ```vue
58 |
63 | ```
64 |
65 | ## Usage
66 |
67 | ### Example Usage
68 |
69 | A classic example is that of a table component with multiple levels of nested components.
70 | We can easily define and forward slots to nested components using the `ForwardSlots` component.
71 |
72 | #### Root Component
73 |
74 | We define the slots in the root component.
75 |
76 | ```vue
77 |
78 |
79 |
80 |
81 | Name
82 |
83 |
84 |
85 | // We still have access to the slot data like we would normally
86 |
87 |
88 |
89 |
90 |
91 | ```
92 |
93 | #### Table Component
94 |
95 | We forward the slots to the child components.
96 |
97 | ```vue
98 |
99 |
100 | // Notice that we can wrap multiple components in the ForwardSlots component
101 |
102 |
103 |
104 |
105 |
106 |
107 | ```
108 |
109 | #### TableHead Component
110 |
111 | The TableHeadComponent now has access to the slots defined in the root component. If no slot is provided, it will
112 | default to the text in the slot.
113 |
114 | ```vue
115 |
116 |
117 |
118 |
119 |
120 | Some default text
121 |
122 |
123 |
124 |
125 | Some default text
126 |
127 |
128 |
129 |
130 |
131 | ```
132 |
133 | #### TableBody Component
134 |
135 | The TableBodyComponent also has access to the slots defined in the root component. Notice how we also pass the user data.
136 |
137 | ```vue
138 |
139 |
140 |
141 |
142 |
143 | {{ user.name }}
144 |
145 |
146 |
147 |
148 | {{ user.status }}
149 |
150 |
151 |
152 |
153 |
154 | ```
155 |
156 | We could even go a step further and forward the slots to the next level of child components.
157 |
158 | ```vue
159 |
160 |
161 |