Advanced integration - Slots

Each property has before, after and default slots. This is true for object containers, arrays, simple properties, etc. Before and after are handy mostly to display paragraphs of texts, titles, etc. Default can be used to entirely rewrite the way the property is rendered.

You can define any slot of the main underlying Vuetify component for each property (append, prepend, etc.).

All slots are passed either as textual content in a x-slots annotation in the schema (markdown supported) or as code inside the <vjsf /> element with a prefix matching the key of the property in the schema.

The markdown parser can be defined using the markdown option. If you use the default third party dependencies it will be markdown-it and it will be initialized with the markdownit option. For example you can use {markdownit: {html: true}} to accept HTML tags inside the markdown content.

You can write code slots used for multiple properties by naming the slot with a custom- prefix and passing this name to the x-display annotation (see custom-string1 in this example).