Vue Component Proxy

A VueJS plugin to proxy access to a child component's props, events, and methods.

Overview

The Problem

As you DRY up your code, VueJS component hierarchies can get quite deep. Let's say you have the following component tree:

            App
            / \
           /   \
         Foo   Bar
         /
        A
       /             
      B
     / \
    C   D
   /
  E

Now assume that App needs to be able to configure E with some options passed in as props. The only way to do this is to pass those options to Foo which in turn passes them down the hierarchy to E. The trouble is that this means that every single intermediate component must declare each prop and pass it down manually. As the number of props and the length of the hierarchy grows, maintaining this becomes a monumental task.

The officially suggested solution it to simply declare a single prop options that is an object containing all the props you need to pass. Unfortuntely this means that you lose validation capability (required, type, etc...) for those individual props that you are passing in the options prop.

Both events and methods suffer from the same problem: every intermediate component must manually emit each event that needs to be passed through.

The Solution

Generate a mixin that declares all props and methods specified for you, and a directive that binds those props and emits the events on a child component instance. This mixin can be shared between components, so it can be generated once, exported, and then imported by Foo, A, B, etc...

Installation

npm install vue-component-proxy --save

Usage

Importing

• Import globally

import componentProxy from 'vue-component-proxy/dist/vue-component-proxy.esm.js'
Vue.use(componentProxy)

OR

• Import locally

import componentProxyFactory from 'vue-component-proxy/proxy.js'

Mixing In

import ChildComponent from './child'

let options = {
    // here you specify which props, events, and methods to proxy
}

const componentProxy = Vue.componentProxyFactory({for: ChildComponent, ...options}) // if imported globally
const componentProxy = componentProxyFactory({for: ChildComponent, ...options}) // if imported locally

export default {
    mixins: [componentProxy],
    components: [ChildComponent]
}

Proxying an Instance

<child-component v-proxy></child-component>

📖 Documentation

See here

📜 Changelog

Details changes for each release are documented in the CHANGELOG.md.

❗️ Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

💪 Contribution

Please make sure to read the Contributing Guide before making a pull request.

©️ License

MIT