Skip to content

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.

js
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:

ArgumentDescriptionTypeRequired
pointThe location of the insertion point{ page: string, section: string, modifier: string}true
componentThe Vue component to renderVNodetrue
priorityThe priority order of the insertion (lower goes first)Numberfalse

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

js
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:

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

AdminUI is a product of evoMark