vue-v

Render Vue vNodes from the template

Usage no npm install needed!

<script type="module">
  import vueV from 'https://cdn.skypack.dev/vue-v';
</script>

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>

πŸ‘¨β€πŸ‘©β€πŸ‘§ 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