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

Last update: Jul 2, 2022

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 :

">
<template>
    <div>
        
        <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

GitHub

https://github.com/privatenumber/vue-v
You might also like...

Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/

Vue Ripple Vue Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple DEMO Install You can import vue-ripple to your

May 11, 2022

A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

vue-advanced-chat Vue 3 compatibility ๐Ÿš€ Features Vue, Angular & React compatibility Customizeable realtime chat messaging Backend agnostic Images, vi

Jun 27, 2022

Vue 3 + Vite - How to use vue Teleport component

Vue 3 + Vite - How to use vue Teleport component

Feb 15, 2022

Vue Cookies Consent - Nice and clean component to display message about cookies in Vue and Nuxt.js

Vue Cookies Consent Nice and clean component to display message about cookies in Vue and Nuxt.js ๐ŸŽฌ Demo ๐Ÿ“ฆ Installation NPM npm install --save @norvi

Jun 22, 2022

Vue-slot-portal - Vue plugin for across-component slot distribution

Vue-slot-portal - Vue plugin for across-component slot distribution

vue-slot-portal Vue plugin for across-component slot distribution. install npm i vue-slot-portal usage define slot routes (key: slotName, value: compo

Apr 13, 2022

An avatar component for vue.js

vue-avatar An avatar component for vue.js. This component display an avatar image and if none is provided fallback to the user initials. This componen

Jul 4, 2022

Vue component that simulates a user typing, selecting, and erasing text.

Vue component that simulates a user typing, selecting, and erasing text. Play with vue-typer in this interactive demo. Getting Started Usage Props tex

Jun 29, 2022

Rich flashcard component for vue js 2โšก

Rich flashcard component for vue js 2โšก

Vue Flashcard โšก This is on GitHub so let me know if I've b0rked it somewhere, give me a star โญ if you like it โœ… Install ๐Ÿ‘Œ npm i vue-flashcard โœ… Usage

May 19, 2022

A simple and elegant letter avatar component for vue.js

A simple and elegant letter avatar component for vue.js

vue-letter-avatar Introduction An elegant and easy to use letter avatar component for vue.js 2.0+ Install $ yarn add vue-letter-avatar or $ npm instal

May 24, 2022
Render children into a DOM node that exists outside the DOM hierarchy of the parent component

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Nov 8, 2018
This project is based on Codepen and use vuejs to render a live view html/js/css of your code

Homemade Codepen This project is based on Codepen, and use vuejs to render a live view html/js/css of your code. Features Live preview of your code Ed

May 6, 2022
LogLive - Render changelog as a website on the fly.
LogLive - Render changelog as a website on the fly.

This is inspired by headwayapp.co but as a single script you can add to an HTML file. Install yarn add loglive Table of Contents Usage Changel

Mar 5, 2022
A Tiny Memory Game Written in Vue 3
A Tiny Memory Game Written in Vue 3

Jogo da Memoria vue App A tiny game written in vue3. It's inspired by IgorMinar's Memory-Game. You can view the online demo here. Components Tree Comp

Dec 9, 2021
A tiny, SSR-safe directive for binding random data to an element.

1๏ธโƒฃ vue-bind-once A tiny, SSR-safe directive for binding random data to an element. A tiny, SSR-safe directive for binding random data to an element.

Jun 21, 2022
Vue Modern Resume is basically a simple (yet easy to setup) resume template based on Vue.js framework and Vuetify UI toolkit.

Vue Modern Resume is basically a simple (yet easy to setup) resume template based on Vue.js framework and Vuetify UI toolkit.

Feb 9, 2022
a landing template developed usage Nuxtjs, Vuetifyjs

Run # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run

Mar 31, 2022
Nestjs-ssr - A template using NestJS for both SSR and RESTful API based on Vite

A progressive Node.js framework for building efficient and scalable server-side

Jun 13, 2022
A simple directory where you will find lots of freemium design resources like icons, template ui, illustration, etc
A simple directory where you will find lots of freemium design resources like icons, template ui, illustration, etc

Developer's directory where you will find lots of freemium resources like icons, template ui, illustration, App idea, etc. Feel free to browse around.

Apr 21, 2022
A free Changelog template created with Nuxt 3.0 & Nuxt Content 2.0 that you can use for your projects
A free Changelog template created with Nuxt 3.0 & Nuxt Content 2.0 that you can use for your projects

Rain of Change A free Changelog template created with Nuxt 3.0 & Nuxt Content 2.0 that you can use for your projects. We are very pleased to share our

Jun 30, 2022