Appearance
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:
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:
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: () => ({}),
},
});