vv

vue-v

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

Showing:

Popularity

Downloads/wk

86

GitHub Stars

5

Maintenance

Last Commit

10mos ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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>
  • 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100