question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to document slots in a component with render function?

See original GitHub issue

Currently the only way to document slots, or so it seems, is to write a comment in the component’s <template> like so:

<template>
  <!-- @slot Use this slot for text contents -->
  <slot></slot>
</template>

However, components that utilise a render function do not have a <template>. In these cases, how do we write documentation for slots?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:16 (14 by maintainers)

github_iconTop GitHub Comments

1reaction
elevatebartcommented, Jul 22, 2019

Here is how you can document your slot after this fix:

export default {
   render(h) {
     return h('div', [
       /** @slot It is the default slot */
       this.$scopedSlots.default(),
      ]);
    },
 };

Sorry it took me so long to fix it.

0reactions
AustinGilcommented, Sep 7, 2019

Hey @elevatebart. First of all, congrats!!! That’s awesome for you.

I’ll post a new issue, but I’m in no hurry, so take all the time you need 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I send slots to a component in render function in ...
I want to render this component with render function. My attempt is this, but it is not working. import { createApp, h }...
Read more >
Slots - Vue.js
With slots, the <FancyButton> is responsible for rendering the outer <button> (and its fancy styling), while the inner content is provided by the...
Read more >
Building Component Slots in React | Articles - Sandro Roth
Slots are an way to pass elements to a component and let them render in a specific location, like a header or footer....
Read more >
How to use Scoped Slot inside Vue's Render Function (Vuetify)
I tried to implement a custom component using Vue's render function. I get some problem to understand how to implement Scoped Slot inside...
Read more >
Using Slots In Vue.js - Smashing Magazine
Slots are a powerful tool for creating reusable components in ... need to write render functions rather than using a template in order...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found