Vue.js Slots Using Single Slots


Example

Single slots are used when a child component only defines one slot within its template. The page component above uses a single slot to distribute content.

An example of the page component's template using a single slot is below:

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <slot>
            This will only be displayed if there is no content
            to be distributed.
        </slot>
    </body>
</html>

To illustrate how the slot works we can set up a page as follows.

<page>
    <p>This content will be displayed within the page component</p>
</page>

The end result will be:

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This content will be displayed within the page component</p>
    </body>
</html>

If we didn't put anything between the page tags an instead had <page></page> we would instead yield the following result since there is default content between the slot tags in the page component template.

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        This will only be displayed if there is no content
        to be distributed.
    </body>
</html>