Vue Components Support

Because LaRecipe renders the documentations in the back-end of Laravel application, it's pretty cool to leverage custom VueJs components.

Built-in Components

LaRecipe provides a bunch of amazing looking UI Vue based components.

{warning} If you don't like the idea of mixing Vue components with Markdown, remember that this feature is optional.

Cards

Input:

<larecipe-card shadow>
    Example card
</larecipe-card>

Output:

Example card

Buttons

Input:

<larecipe-button radius="full">Example button</larecipe-button>
<larecipe-button type="success" radius="full">Success button</larecipe-button>

Output:

Default button Success button

Badges

Input:

<larecipe-badge type="primary" circle icon="fa fa-user"></larecipe-badge>
<larecipe-badge type="success" rounded>Holly</larecipe-badge>
<larecipe-badge type="danger" rounded>Molly</larecipe-badge>

Output:

Holla Molly

Progress

Input:

<larecipe-progress type="success" :value="60"></larecipe-progress>

Output:

{primary} You can achieve the same effect on the overview page by including a progress component inside a card.

Input:

<larecipe-card>
    <larecipe-badge type="success" circle class="mr-3" icon="fa fa-heart"></larecipe-badge> BinaryTorch
    <larecipe-progress type="success" :value="100"></larecipe-progress>
</larecipe-card>

Output:

BinaryTorch