Render multiple nodes in Vue

Installation

Via NPM:

npm install vue-echo-children

Via UNPKG (browser):

<script src="https://unpkg.com/vue-echo-children"></script>

Usage

NPM Package

Global Install

import Vue from 'vue'
import EchoChildren from 'vue-echo-children'

Vue.use(EchoChildren)

A La Carte

import { EchoChildren } from 'vue-echo-children'

const MyComponent = {
    components: {
        EchoChildren
    },
    template: '<echo-children>...</echo-children>'
}

Vue Single File Component

<template>
    <echo-children>
        <div>Multiple</div>
        <div>Root</div>
        <div>Nodes!</div>
    </echo-children>
</template>

<script>
    import { EchoChildren } from 'vue-echo-children'

    export default {
        components: {
            EchoChildren
        }
    }
</script>

Browser

The <echo-children> component is installed globally by default. The library instance is located at window.VueEchoChildren.

Global Install (HTML)

    <!-- All you need to do is use the component -->
    <echo-children>...</echo-children>

Global Install (JS)

    // All you need to do is use the component
    new Vue({
        template: '<echo-children>..</echo-children>'
    })

Manual Usage (Global Install)

If the component failed to install to a global Vue instance, you can install it yourself.

Vue.use(window.VueEchoChildren)

Manual Usage (A La Carte)

If the component failed to install to a global Vue instance and you don't want a global install.

// Get the Vue component
const { EchoChildren } = VueEchoChildren

// es5
// var EchoChildren = VueEchoChildren.EchoChildren

// When creating your Vue components, add this as a child component
new Vue({
    components: {
        EchoChildren // <--
    }
})