Insertions

Insertions are provided by AdminUI to enable you to add additional content and functionality into AdminUI admin pages at specific insertion points.

Each insertion pointer is given a page, a section and a modifier identifier. So, for example, inserting content before the product details would use page="product-details" section="details" modifier="prepend".

Insertion points also pass down props relevant to their context. See the Insertion Reference for full details on each.

Registering Insertions

Insertions can be registered through your AdminUI Addons entry script by calling the window.auiAddons.insert function.

window.auiAddons.insert(
  { page: "product-details", section: "details", modifier: "prepend" },
  () =>
    h(
      "div",
      { class: "whitespace-nowrap" },
      "This show before the product details"
    ),
  10
);

The insert method accepts the following arguments:

Argument	Description	Type	Required
point	The location of the insertion point	{ page: string, section: string, modifier: string}	true
component	The Vue component to render	VNode	true
priority	The priority order of the insertion (lower goes first)	Number	false

Any valid Vue component can be inserted, so a common pattern might be registering an SFC component:

import { defineAsyncComponent } from "vue";

window.auiAddons.insert(
  { page: "product-details", section: "details", modifier: "prepend" },
  defineAsyncComponent(() =>
    import("./components/insertions/ProductDetailsPrepend.vue")
  ),
  10
);

Receiving Props

Registered components will receive different attributes depending on the insertion point (see Insertion Reference).

To receive them, your component should define the relevant props/events.

For example, with the above ProductDetailsPrepend.vue SFC, we could define:

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  errors: {
    type: Object,
    default: () => ({}),
  },
});