Skip to content

Commit 6fa9b0c

Browse files
committed
feat: allow passing pre-existing DOM elements to slots
1 parent 1bb2dd1 commit 6fa9b0c

File tree

4 files changed

+232
-33
lines changed

4 files changed

+232
-33
lines changed

README.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,11 +179,12 @@ Renders a Vue component to a target element. **Returns a Promise** that resolves
179179
**Parameters (in order):**
180180
- **componentName** (string): Name of the registered Vue component
181181
- **props** (object, optional): Props to pass to the component (default: `{}`)
182-
- **slots** (object, optional): Slot content as HTML strings, keyed by slot name (default: `{}`)
182+
- **slots** (object, optional): Slot content as HTML strings OR DOM elements, keyed by slot name (default: `{}`)
183183
- **targetSelector** (string | Element): CSS selector or DOM element where component will be rendered
184184

185185
**Returns:** `Promise<{unmount: Function}>`
186186

187+
**Basic Example (HTML strings):**
187188
```javascript
188189
// Simple component
189190
await nuxtApp.$previewComponent('TestCard', { title: 'My Card' }, {}, '#preview-target');
@@ -200,6 +201,29 @@ await nuxtApp.$previewComponent(
200201
);
201202
```
202203

204+
**Pass pre-exsiting DOM elements to slots**
205+
206+
Slots can also accept pre-existing DOM elements instead of HTML strings. This is useful when:
207+
- Slot content already exists in the DOM (e.g., server-rendered content)
208+
- Processing needs to happen on slot content before Nuxt renders
209+
210+
```javascript
211+
// Extract existing DOM elements to use as slots
212+
const container = document.getElementById('preview-target');
213+
const slotElements = {};
214+
container.querySelectorAll('[data-slot]').forEach(el => {
215+
slotElements[el.dataset.slot] = el; // Pass the element directly
216+
});
217+
218+
await nuxtApp.$previewComponent(
219+
'TwoColumnLayout',
220+
{ width: 50 },
221+
slotElements, // DOM elements instead of strings
222+
'#preview-target'
223+
);
224+
```
225+
See [playground/public/preview-test-dom-slots.html](./playground/public/preview-test-dom-slots.html) for a complete working example.
226+
203227
**Nested Components:** Slots can contain additional preview containers. An example implementing rendering with an
204228
arbitrary depth can be found at the [example](./playground/public/preview-test-loader.html), which can be tested via `npm run dev`.
205229

package-lock.json

Lines changed: 0 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)