Misc

The Misc directory contains Vue components that are not elegible to be grouped into a specific category. These components are designed to be reused throughout the application, and are not tied to a specific feature.

AppButton

The AppButton Vue Component is a wrapper around the HTML <button> element and can be used as follows:

<AppButton class="btn btn-primary"> Primary Button </AppButton>

And it will be rendered as:

AppButton Variants

There are also a few variants of the AppButton Vue Component that can be used:

<AppButton class="btn btn-secondary"> Secondary Button </AppButton>

<AppButton class="btn btn-neutral"> Neutral Button </AppButton>

<AppButton class="btn btn-destructive"> Destructive Button </AppButton>

<AppButton class="btn btn-primary-outline"> Primary Outline Button </AppButton>

<AppButton class="btn btn-neutral-outline"> Neutral Outline Button </AppButton>

The rendered AppButtons will be:

AppButton Icon

The AppButton component can also be used to render icon buttons:

<AppButton class="btn btn-primary btn-icon">
  <i class="ri-edit-line"></i>
</AppButton>

<AppButton class="btn btn-neutral btn-icon">
  <i class="ri-edit-line"></i>
</AppButton>

<AppButton class="btn btn-destructive btn-icon">
  <i class="ri-edit-line"></i>
</AppButton>

<AppButton class="btn btn-primary-outline btn-icon">
  <i class="ri-edit-line"></i>
</AppButton>

<AppButton class="btn btn-neutral-outline btn-icon">
  <i class="ri-edit-line"></i>
</AppButton>

The rendered AppButtons will be:

AppButton Slots

Name	Description
default	The content of the button element.

AppCard

The AppCard Vue Component is a reusable card component that can be used as follows:

<AppCard class="max-w-sm space-y-2 px-8">
  <template #title> The Card Title </template>

  <template #description>
    <p class="text-skin-neutral-11">Some nice description</p>
  </template>

  <template #content>
    <div class="pb-2">
      This slot is dedicated to the main content of your Card Component. You can
      put anything you want here: images, videos, form elements and of course
      other components...
    </div>
  </template>

  <template #footer>
    <div class="border-t pt-2">
      <AppButton class="btn btn-secondary mt-3"> Secondary Button </AppButton>
    </div>
  </template>
</AppCard>

And it will be rendered as:

The Card Title

Some nice description

This slot is dedicated to the main content of your Card Component. You can put anything you want here: images, videos, form elements and of course other components...

AppCard Slots

Name	Description
title	The title of the card component.
description	The description (subtitle) of the card component.
content	The main content of the card component.
footer	The footer of the card component.

AppLink

The AppLink Vue Component acts as a wrapper around the Inertia.js Link Component, allowing for the creation of visually consistent links to routes as follows:

<AppLink :href="route('dashboard.index')">
    Dashboard
</AppLink>

The rendered AppLink will be:

Dashboard

AppLink Slots

Name	Description
default	The content of the link.

AppSectionHeader

The AppSectionHeader Vue Component is used at the top of each page to identify the page's purpose like "List Users" or "Create User". It incorporates Breadcrumb navigation and call-to-action buttons related to the page context.

<AppSectionHeader title="Users" :bread-crumb="breadCrumb">
    <template #right>
        <AppButton
            class="btn btn-primary"
            @click="$inertia.visit(route('user.create'))"
        >
            Create User
        </AppButton>
    </template>
</AppSectionHeader>

<script setup>
const breadCrumb = [
  { label: 'Home', href: route('dashboard.index') },
  { label: 'Users', last: true }
]
</script>

The rendered AppSectionHeader will be:

Users

Home > Users

AppSectionHeader Props

Name	Type	Default	Description
title	String	'-'	The name of the current page (or section) in context.
breadCrumb	Array	[]	The breadcrumb itens to be received by the AppBreadCrumb component.

AppSectionHeader Slots

Name	Description
right	Optional extra content to be showed to the user, usually action buttons (ex: Create Customer).

AppTopBar

The AppTopBar Vue Component is part of the resources/js/Layouts/AuthenticatedLayout.vue Component. It incorporates the "Hamburger Menu Button," the "Theme Switcher" button, and the "Logout Button."

<AppTopBar />

And it will be rendered as:

AppTopBar Props

Name	Type	Default	Description
title	String	''	Optional title to be shown on the TopBar.