vue-v 
Tiny component to render Vue.js vNodes in the template.
"><v :nodes="vnodes" />
Tiny component to render Vue.js vNodes in the template.
Last update: Jul 2, 2022
vue-v
🙋♂️
Why?
-
🎩 Render vNodes without converting your component to use a render function! -
🔥 Declarative API render multiple vNodes anywhere in your template! -
🐥 Tiny250 Bminzipped!
🚀
Install
npm i vue-v
👨🏻🏫 Basic usage
<template> <div> <v :nodes="$slot.default" /> div> template> <script> import V from 'vue-v'; export default { components: { V } }; script>
💁♀️
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.
For example, you might want to render just the text from the default
<template> <div> <v :nodes="textNodes()" /> div> template> <script> 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); } } }; script>
How can I add a class, attribute, or event handler to the vNodes?
You can use vNode Syringe to overwrite attributes, props, and event-listeners.
For example, if you want to overwrite the class, and add a click handler:
<template> <div> <vnode-syringe class!="overwrite-class" @click="onClick" > <v :nodes="vnodes" /> vnode-syringe> div> template> <script> import V from 'vue-v'; import vnodeSyringe from 'vue-vnode-syringe'; export default { components: { V, vnodeSyringe }, ..., methods: { onClick() { ... } } }; script>
👨👩👧
Related
- vue-proxi -
💠 Tiny proxy component - vue-subslot -
💍 Pick 'n choose what you want from a slot passed into your Vue component - vue-pseudo-window -
🖼 Declaratively interface window/document in your Vue template - vue-vnode-syringe -
🧬 Mutate your vNodes with vNode Syringe💉 - vue-frag -
🤲 Directive to return multiple root elements
