sermonis / vue-v

Tiny component to render Vue.js vNodes in the template.

vue-v

Tiny component to render Vue.js vNodes in the template.

<v :nodes="vnodes" />

🙋‍♂️ Why?

• 🎩 Render vNodes without converting your component to use a render function!
• 🔥 Declarative API render multiple vNodes anywhere in your template!
• 🐥 Tiny 250 B minzipped!

🚀 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 <slot />:

<template>
    <div>
        <!-- Only render the text from <slot /> -->
        <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