Skip to content

Commit 51b2351

Browse files
committed
docs: add docs for the component explicit register
1 parent ad8f3ca commit 51b2351

File tree

1 file changed

+53
-0
lines changed

1 file changed

+53
-0
lines changed

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,3 +569,56 @@ export const admin = new AdminForth({
569569
After this, you will have a custom Settings section in the users menu:
570570
571571
![alt text](SettingsView-1.png)
572+
573+
574+
## Explicit register of components
575+
576+
There might be rare cases, when you need to register component explicitly and then re-use it somewhere else:
577+
578+
579+
```ts title='./index.ts'
580+
...
581+
582+
customization: {
583+
brandName: "dev-demo",
584+
title: "dev-demo",
585+
favicon: '@@/assets/favicon.png',
586+
brandLogo: '@@/assets/logo.svg',
587+
588+
...
589+
590+
},
591+
//diff-add
592+
componentsToExplicitRegister: [
593+
//diff-add
594+
{
595+
//diff-add
596+
file: '@@/JobCustomComponent.vue',
597+
//diff-add
598+
meta: {
599+
//diff-add
600+
label: 'Job Custom Component',
601+
//diff-add
602+
}
603+
//diff-add
604+
}
605+
//diff-add
606+
],
607+
608+
```
609+
610+
and then you can re-use this component like:
611+
612+
```html title='CustomVueComponent.vue'
613+
//diff-add
614+
import { getCustomComponent } from '@/utils';
615+
616+
...
617+
//diff-add
618+
<component
619+
//diff-add
620+
:is="getCustomComponent('@@/JobCustomComponent.vue')"
621+
//diff-add
622+
/>
623+
624+
```

0 commit comments

Comments
 (0)