@@ -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
189190await 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
204228arbitrary depth can be found at the [ example] ( ./playground/public/preview-test-loader.html ) , which can be tested via ` npm run dev ` .
205229
0 commit comments