Skip to content

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

License

Notifications You must be signed in to change notification settings

privatenumber/vue-v

Repository files navigation

vue-v Latest version Monthly downloads Install size Bundle size

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published