https://github.com/privatenumber/vue-subslot
💍 Pick out specific elements from the component <slot>
https://github.com/privatenumber/vue-subslot
component filter pick slot subslot util vnodes vue vue-component
Last synced: 9 months ago
JSON representation
💍 Pick out specific elements from the component <slot>
- Host: GitHub
- URL: https://github.com/privatenumber/vue-subslot
- Owner: privatenumber
- License: mit
- Created: 2019-04-28T00:47:21.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2020-12-28T10:38:51.000Z (almost 5 years ago)
- Last Synced: 2025-03-18T16:04:21.316Z (9 months ago)
- Topics: component, filter, pick, slot, subslot, util, vnodes, vue, vue-component
- Language: JavaScript
- Homepage:
- Size: 922 KB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-subslot - Pick out specific elements from the component `<slot>` ` 📝 8 months ago` (Utilities [🔝](#readme))
- awesome-vue - vue-subslot - 💍 Vue component to pick 'n choose what you want from a slot (Components & Libraries / Utilities)
README
Pick out specific elements from the component ``.
```html
⬅ Pick only the `h1` element from the default slot
```
## 🚀 Install
```sh
npm i vue-subslot
```
## 🙋♂️ Why?
- **🔥 Cleaner Slot API** Give your users a cleaner and more readable API!
- **🧠 Full Slot control** Filter out and limit unwanted content from slots!
- **🐥 Tiny** `1.04 KB` minzipped!
## 👨🏻🏫 Examples
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!
Demo 1: Inline filter attributes
Imagine being able to offer the following API with parent-child components _Card_ and _CardHeader_.
```html
My special card
My card content
```
Using Subslot, this is all the code you need to make this possible. This is what _Card.vue_ looks like.
```html
import Subslot from 'vue-subslot';
import CardHeader './CardHeader.vue';
export default {
name: 'Card',
components: {
Subslot,
CardHeader,
}
};
```
Demo 2: Named Subslots
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.
```html
import Subslot from 'vue-subslot';
import CardHeader './CardHeader.vue';
export default {
name: 'Card',
components: {
Subslot,
CardHeader,
},
mixins: [
Subslot.define({
// Use a string filter
cardHeader: '@CardHeader:1', // Limit 1
cardHeader: '@CardHeader[3:2]', // Offset 3, Limit 2
// Or an object filter
cardHeader: {
element: '@CardHeader',
limit: 1,
},
}),
],
};
```
## 📖 API
#### Filter by element tag
As a string, it filters the vnodes by tag (as opposed to component)
```html
```
Filter the vnodes with tag `child-component`
```html
```
#### To match a specific component
Use the `@` prefix to use the component from the `components` hash
```html
```
Or, pass in the direct Component reference
```html
```
#### To match multiple elements
Pass in an array
```html
```
#### To match any element
Use the asterisk to match any element (incl. components). This can be used to filter out text/white-space.
```html
```
#### Offset the number of returned elements
```html
```
#### Limit the number of returned elements
```html
```
#### Inverse the filter
Set the `not` boolean to inverse the filter and get everything that _doesn't_ match.
```html
```
#### Text only
Inverse the element match-all to match only text nodes.
```html
```
#### Slot fallback
Like normal slots, what you pass into the slot of `subslot` will be the fallback content of that `subslot`.
```html
```
## 📬 Events
- `@no-match`: Emitted when there are no matching vnodes
## ⚡ Advanced usage
### Pass in vnodes from a difference source
```html
```
## 💁♀️ FAQ
### 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.
## 👨👩👧 Related
- [vue-proxi](https://github.com/privatenumber/vue-proxi) - 💠 Tiny proxy component
- [vue-vnode-syringe](https://github.com/privatenumber/vue-vnode-syringe) - 🧬 Add attributes and event-listeners to `` content 💉
- [vue-pseudo-window](https://github.com/privatenumber/vue-pseudo-window) - 🖼 Declaratively interface window/document in your Vue template
- [vue-v](https://github.com/privatenumber/vue-v) - render vNodes via component template
- [vue-frag](https://github.com/privatenumber/vue-frag) - 🤲 Directive to return multiple root elements