Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/privatenumber/vue-v
Tiny component to render Vue.js vNodes in the template.
https://github.com/privatenumber/vue-v
render util vnode vue
Last synced: 2 months ago
JSON representation
Tiny component to render Vue.js vNodes in the template.
- Host: GitHub
- URL: https://github.com/privatenumber/vue-v
- Owner: privatenumber
- License: mit
- Created: 2020-10-07T05:00:48.000Z (about 4 years ago)
- Default Branch: develop
- Last Pushed: 2020-11-21T08:09:15.000Z (about 4 years ago)
- Last Synced: 2024-10-19T01:11:14.234Z (3 months ago)
- Topics: render, util, vnode, vue
- Language: JavaScript
- Homepage:
- Size: 129 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-v [](https://npm.im/vue-v) [](https://npm.im/vue-v) [](https://packagephobia.now.sh/result?p=vue-v) [](https://bundlephobia.com/result?p=vue-v)
Tiny component to render Vue.js vNodes in the template.
```html
```
## 🙋♂️ Why?
- **🎩 Render vNodes** without converting your component to use a [render function](https://vuejs.org/v2/guide/render-function.html)!
- **🔥 Declarative API** render multiple vNodes anywhere in your template!
- **🐥 Tiny** `250 B` minzipped!
## 🚀 Install
```sh
npm i vue-v
```
## 👨🏻🏫 Basic usage
```vue
import V from 'vue-v';
export default {
components: {
V
}
};
```
## 💁♀️ FAQ
### When would I use this?
When you have vNodes that you want to render in a specific part of your template without having to use a [render function](https://vuejs.org/v2/guide/render-function.html).
For example, you might want to render just the text from the default ``:
```vue
import V from 'vue-v';
export default {
components: {
V
},
methods: {
// Can't use computed property because slots aren't reactive
textNodes() {
return (this.$slots.default || []).filter(vnode => !vnode.tag);
}
}
};
```
### How can I add a class, attribute, or event handler to the vNodes?
You can use [vNode Syringe](https://github.com/privatenumber/vue-vnode-syringe) to overwrite attributes, props, and event-listeners.
For example, if you want to overwrite the class, and add a `click` handler:
```vue
import V from 'vue-v';
import vnodeSyringe from 'vue-vnode-syringe';
export default {
components: {
V,
vnodeSyringe
},
...,
methods: {
onClick() {
...
}
}
};
```
## 👨👩👧 Related
- [vue-proxi](https://github.com/privatenumber/vue-proxi) - 💠 Tiny proxy component
- [vue-subslot](https://github.com/privatenumber/vue-subslot) - 💍 Pick 'n choose what you want from a slot passed into your Vue component
- [vue-pseudo-window](https://github.com/privatenumber/vue-pseudo-window) - 🖼 Declaratively interface window/document in your Vue template
- [vue-vnode-syringe](https://github.com/privatenumber/vue-vnode-syringe) - 🧬Mutate your vNodes with vNode Syringe 💉
- [vue-frag](https://github.com/privatenumber/vue-frag) - 🤲 Directive to return multiple root elements