Pick out specific elements from the component
⬅ Pick only the `h1` element from the default slot
npm i vue-subslot
- 🔥 Cleaner Slot API Give your users a cleaner and more readable API!
- 🧠 Full Slot control Filter out and limit unwanted content from slots!
- 🐥 Tiny
Have you ever developed a parent-child component set, and wanted to allow users to pass in the child-component without specifiying a slot but still have the same level of control as named-slots? With Subslot, you can!
Imagine being able to offer the following API with parent-child components Card and CardHeader.
<!-- The Card Header will be positioned separetely from the content -->My special cardMy card content
Using Subslot, this is all the code you need to make this possible. This is what Card.vue looks like.
<!-- Pick out the Card Header from the default slot --><!-- Use the remainder -->
Alternatively to using inline filter attributes, you can define subslots on the component. With this approach, you can access subslots like you would normal slots but via
$subslots. This is what Card.vue would look like.
<!-- Use the remainder -->
Filter by element tag
As a string, it filters the vnodes by tag (as opposed to component)
Filter the vnodes with tag
To match a specific component
@ prefix to use the component from the
Or, pass in the direct Component reference
To match multiple elements
Pass in an array
To match any element
Use the asterisk to match any element. This is to match only elements and remove any text/white-space.
Offset the number of returned elements
Limit the number of returned elements
Inverse the filter
not boolean to inverse the filter and get everything that doesn't match.
Like normal slots, what you pass into the slot of
subslot will be the fallback content of that
@no-match: Emitted when there are no matching vnodes
⚡ Advanced usage
Pass in vnodes from a difference source
Will this work for functional components passed into the slot?
Unfortunately not due to how functional components are implemented in Vue.js.
Functional components are stateless and are immediately invoked as a function that outputs vNodes. The outputted vNodes are passed into the slot in place of the functional component. Because Subslot doesn't actually receive the functional component, it's impossible to detect them.