Vue Slots

Vue Slots

Helpful Information about Slots

All programming languages have a way to inject code into a component in one way or another. Vue uses what is called a slot. Within the ProtoKit, there are components such as the Growl and Modal that utilize the concept of a slot, by allowing the Designer or Developer to pass in HTML, which will be injected into the Vue component "template".

For example, the Modal uses a "named slot" for the body area of the modal with the following code:

https://gist.github.com/bignamehere/a485d61b11530c225d39e7811420e4e1

Within the Modal component tag, any HTML you place within <template v-slot:modalBody> ... </template> slot will be injected into the Modal component. This will allow for a more customized method of adding content to prototypes.