Vue3 Tabler

A premium administrative dashboard component library for Vue 3, based on Tabler UI. This project provides a set of highly customizable Vue components that follow Tabler's design system and best practices.

🚀 Getting Started

Installation

Install the package via npm:

npm install @ones006/vue3-tabler

Make sure you also have the peer dependencies installed:

npm install @tabler/core @tabler/icons-vue vue-router pinia

Basic Usage

Option 1: Import Components Individually

<script setup>
import { TLayout, TCard, TButton } from 'vue3-tabler'
</script>

<template>
  <TLayout type="vertical">
    <TCard title="Welcome">
      <p>This is a Tabler Vue component!</p>
      <TButton variant="primary">Click Me</TButton>
    </TCard>
  </TLayout>
</template>

Option 2: Register Components Globally

// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Vue3Tabler from 'vue3-tabler'

const app = createApp(App)
app.use(Vue3Tabler)
app.mount('#app')

Then use components without importing:

<template>
  <TLayout type="vertical">
    <TCard title="Welcome">
      <p>No import needed!</p>
      <TButton variant="primary">Click Me</TButton>
    </TCard>
  </TLayout>
</template>

🔗 Inertia.js & Routing Integration

This library is designed to be framework-agnostic regarding routing. It works seamlessly with vue-router, Inertia.js, or plain HTML links.

Using with Inertia.js

To use Inertia's <Link> component for all navigation links (sidebar, tags, dropdowns, etc.), pass it to the plugin options during installation:

import { createApp } from 'vue'
import { Link } from '@inertiajs/vue3' // or @inertiajs/inertia-vue3
import Vue3Tabler from 'vue3-tabler'
import App from './App.vue'

const app = createApp(App)

// Configure global link component
app.use(Vue3Tabler, { 
  linkComponent: Link 
})

app.mount('#app')

Using with vue-router

If you are using vue-router, you can either rely on the default behavior (which tries to resolve RouterLink) or explicitly pass it for clarity:

import { RouterLink } from 'vue-router'

app.use(Vue3Tabler, { 
  linkComponent: RouterLink 
})

Individual Component Override

You can also override the link component on a per-component basis using the link-component prop:

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
  <TTag :link-component="Link" link="/dashboard">Dashboard</TTag>
</template>

🏗️ Components Documentation

1. Layout & Structure

TLayout

The main wrapper component that manages different Tabler layout types.

| Prop | Type | Default | Description | | --------------------------- | --------- | ------------ | -------------------------------------------------------------------------------- | | type | String | 'vertical' | Layout style: vertical, horizontal, fluid, combo, navbar-overlap, etc. | | sidebar-items | Array | [] | Navigation items for the sidebar. | | v-model:sidebar-collapsed | Boolean | false | Controls the mini/collapsed state of the sidebar. |

Example:

<TLayout 
  type="vertical" 
  v-model:sidebar-collapsed="isCollapsed"
  :sidebar-items="navItems"
  brand-text="My App"
>
  <router-view />
</TLayout>

2. Navigation

TSidebar

The vertical navigation component with collapse support.

TNavbar

The horizontal top navigation bar.

TNotificationDropdown

A ready-to-use notification menu for the navbar.

Example:

<TNotificationDropdown 
  :notifications="items" 
  :unread-count="5" 
  @archive="handleArchive" 
/>

TAppMenuDropdown

A grid-based menu typically used for "Apps" or shortcuts.

3. Data Display

TCard

Versatile container for content.

| Prop | Type | Default | Description | | ---------- | -------- | ----------- | --------------------- | | title | String | undefined | Card header title. | | subtitle | String | undefined | Card header subtitle. |

TTable

A styled Tabler table component.

TBadge

Small status indicators. Supports pulse animation.

Example:

<TBadge variant="success" pulse>Active</TBadge>
<TBadge variant="danger">Offline</TBadge>

4. Forms

Full support for Tabler-styled form elements:

• TInput: Standard text, email, password inputs.
• TSelect: Custom styled select dropdowns.
• TCheckbox & TRadio: Styled selection controls.
• TFormFieldset: Grouped form fields.

Example:

<TFormFieldset label="Account Information">
  <TFormLabel>Email Address</TFormLabel>
  <TInput type="email" placeholder="enter email" />
</TFormFieldset>

5. UI Elements & Feedback

• TButton: Supports all Tabler variants (primary, success, ghost-secondary, etc).
• TAlert: Styled alert boxes with icons.
• TModal: Responsive dialog windows.
• TProgress: Linear progress bars.
• TSteps: Multi-step process indicators.

📦 Available Components

Below is the complete list of components currently available in the library:

• Layout: TLayout, TPage, TPageWrapper, TPageHeader, TPageBody, TFooter, TEmptyState, TDataGrid, TPageLoader
• Navigation: TSidebar, TNavbar, TNotificationDropdown, TAppMenuDropdown, TPagination, TTabs, TTab
• Forms: TInput, TSelect, TCheckbox, TRadio, TTextarea, TFormLabel, TFormFieldset, TFormGroup, TDatePicker, TColorInput, TFormSelectGroup, TFormSelectGroupItem, TInputMask, TRange, TSelectAdvance, TWysiwyg, TDropzone, TStarRating
• Data Display: TCard, TRibbon, TTable, TDataTable, TChart, TBadge, TTag, TAvatar, TPlaceholder, TProgress, TSteps, TStatsCard, TActivityList, TActivityItem, TPricingCard, TInvoice
• UI Elements: TButton, TAccordion, TAccordionItem, TAlert, TCarousel, TDropdown, TDropdownItem, TDropdownDivider, TDropdownHeader
• Overlays: TModal, TOffcanvas, TToast, TAlert
• Grid: TRow, TCol
• Theme: TToggleTheme, TThemeSettings

🎨 Theme & Customization

The components support Tabler's built-in themes:

• Dark Mode: Add data-bs-theme="dark" to any parent element or use the dark prop in navigation components.
• RTL Support: Handled automatically when type="rtl" is set on TLayout.

Credits

• Tabler Authors: tabler.io
• Tabler Icons: tabler-icons.io
• Vue3 Easy Data Table: vue3-easy-data-table
• Vue3 ApexCharts: vue3-apexcharts