Vue-extensions NPM

vue-extensions

This library is a Vue plugin providing a custom element which acts as extension point, with a named "hook". Plugins of your application then can provide "extension" components for this extensionpoint which are automatically found and rendered replacing the extensionpoint.

This is intended wherever you need to have a "list" of different looking components at one place each provided by a plugin.

If you just need a list of the same component, just with different data, don't use vue-extensions just use a v-for directive.

Install

The easiest way to install this library in your project is to use the corresponding Vue CLI plugin extensions. It will do all magic for you:

# vue add extensions

This adds everything you need automatically to your project. Just make sure that runtimeCompiler: true is enabled in vue.config.js - to use template strings in Vue.

If you choose to install everything manually, see Manual install.

Extensions

Extensions are modules that export a default object with a hooks property, which is an array of objects, pointing to Vue components (with metadata). This seems complicated, but an example makes it much clearer:

// extensions/FooExtension/index.js
import AComponent from './components/acomponent.vue'
import {FooElement, BazElement} from './components/othercomponents.vue'

export default {
    hooks: {
        "my-list.element": [{ component: AComponent }],
        "mycompany.hooks.ui.item": [
            { component: FooElement, weight: 2 },
            { component: BazElement, weight: 3 }
        ]
    },
    routes: [{
      path: '/foo',
      component: () => import('layouts/MyLayout.vue'),
      children: [
        { path: '', component: () => import('./pages/fooIndex.vue') }
      ]
    }]
}

hooks

Hooks are strings that define an entry point for your extension components
Each hook points to an array of objects which declare:

* **component**: the Vue component to render.
* weight: order of the component in a list. The higher the component's weight, the further it "sinks" down (or right) in the list.

One module can provide components for more than one hooks.

There is an <extensionpoint> tag in your project available now:

<template>
    <h3>Extensionpoints for "my-list-element" in a list:</h3>
    <ul>
        <extensionpoint hook="my-list-element"/>
    </ul>

    <h3>Extensionpoints for "mycompany.hooks.ui.item"</h3>
    <extensionpoint hook="mycompany.hooks.ui.item"/>
</template>

The vue-extensions plugin renders the hooked elements replacing the element, one after another. It's up to you what the extensions are rendering: One extension can render a simple <div> element with an image, the next extension (same hook!) can render a complicated component with variables, sub-components etc. The <extensionpoint> renders them one after another. You only have to make sure that your components do what they promise: in the sample case above, FooListElement should render a \<li> element - because it will be rendered within an \<ul> element. But there are no constraints, you are free to choose.

Further usage

The extensions.js file (or how you choose to name it) is intended to be created automatically by a script of your choice - If you want to see a project that uses this, see my Django app GDAPS, which is a Django plugin system that can use Vue as frontend.