vue-v

    1.2.0 • Public • Published

    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

    Install

    npm i vue-v

    DownloadsWeekly Downloads

    391

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    5.91 kB

    Total Files

    5

    Last publish

    Collaborators

    • hirokiosame