1. Introduction
Base components are the core components that are used in the Taskify website. They are used in other section or card components and can be used directly in the content. Think of them as the base building blocks of the website.
Base components are located in the components/base folder. There are about 42 base components in total.
Each component has props and slots to customize them. They are typically size, variant, label etc.
Here is the list of all the base components:
- Accordion
- Avatar
- BackgroundGrid
- BackgroundRadial
- Badge
- Banner
- Breadcrumbs
- Button
- Card
- Container
- Divider
- DocsArticle
- DocsContainer
- DocsFooter
- DocsGrid
- DocsHeader
- FeatureColumn
- FooterBrand
- FooterLinks
- IconButton
- LegalArticle
- Logo
- MenuButton
- Navbar
- NavbarLinks
- PricingTable
- PricingTableCell
- PricingTableFeatures
- PricingTableFoot
- PricingTableHead
- PricingTableSpacer
- Progress
- SearchInput
- Section
- SectionHeader
- Sidebar
- SidebarNavigation
- SocialIcon
- SpinningIcons
- Tab
- TextInput
- User
2. Usage
In the nuxt config, components/ directory is set to globally register and without path prefix. This means that you can directly use the components by its name.
Here is an example of User component is used in the TestimonialCard component:
<template>
<div
class="relative flex flex-col rounded-lg gap-6 p-6 bg-on-layer overflow-hidden"
>
<p v-html="message" class="text-sm font-regular text-secondary"></p>
<User :name="name" :role="role" :company="company" :image="image" />
</div>
</template>
Because of showing of user profile is used exactly the same in other components like TestimonialCard, BlogPostCard and in blog detail page, so it is extracted to the User component to be reused and keep the code clean.