Provide a decoupled way of injecting contents into specific regions of the applications.

So parent-child relationships can leverage slots which are great for most scenarios. However, it is not always possible to have parent-child relationships between components to leverage the power of slots. This library was inspired by a similar C# library PRISM.

With vue-regions it is possible to inject any component into any named region within the application.

By using the v-region and specifying the name property component, you can mark that region to be available for component injection by any other component.

Parent Component

<template>
    <v-region region="right-slider" />
    <router-view></router-view>
    <v-region region="left-slider" />
</template>

Some other component injecting into right-slider slot with javascript/typescript

import { RegionNames } from './RegionNames.ts';
import DynmicComponent from '@/components/DynamicComponent.vue';
...

onInjectClick(): void {
    this.getInstance().config
        .globalProperties
        .$regionManager
        .mount(Regionnames.RIGHT_SLIDER, DynmicComponent);
}

import { RegionNames } from './RegionNames.ts';
import DynmicComponent from '@/components/DynamicComponent.vue';
...

methods: {    
    onInjectClick(): void {
        this.$regionManager.mount(Regionnames.RIGHT_SLIDER, DynmicComponent);
    }
}

For best practices, the region names should be defined in a central static file. In the example above they are defined in the RegionNames file.

// RegionNames.ts

export const LEFT_OVERLAY_REGION = "Left_Overlay";
export const RIGHT_DYNAMIC_CONTENT = "Content_Region";